awesome_stepper

Developer Challenge

Awesome Stepper with beautiful UI and Animations

Features

  • beautiful UI
  • Customizable controllers
  • Infinite step

Supported platforms

  • Flutter Android
  • Flutter iOS
  • Flutter web
  • Flutter desktop

Installation

Add awesome_stepper: ^0.1.0 to your pubspec.yaml dependencies. And import it:

import 'package:awesome_stepper/awesome_stepper.dart';

How to use

Simply create a AwesomeStepper widget, and pass the required params and List of AwesomeStepperItem:

AwesomeStepper(
      headerColor: Colors.blue,
      progressColor: Colors.red,
      headerStyle: const TextStyle(color: Colors.white, fontSize: 20),
      progressBarAnimationDuration: const Duration(seconds: 2),
      headerAnimationDuration: const Duration(seconds: 1),
      progressStyle: const TextStyle(color: Colors.white, fontSize: 20),
      controlBuilder: (onNext, onBack) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
                onPressed: onBack,
                icon: const Icon(Icons.arrow_back_ios_new_rounded)),
            IconButton(
                onPressed: onNext,
                icon: const Icon(Icons.arrow_forward_ios_rounded)),
          ],
        );
      },
      onStepChanged: (page) {
        print('active page = $page');
      },
      steps: [
        AwesomeStepperItem(
            label: 'Step 1',
            content: Container(
              alignment: Alignment.center,
              child: const Text('Step 1'),
            )),
        AwesomeStepperItem(
            label: 'Step 2',
            content: Container(
              alignment: Alignment.center,
              child: const Text('Step 2'),
            )),
        
      ],
    )

Screen Shots

Customized StepperDefault Stepper

Libraries

awesome_stepper