easy_stepper 0.1.0

A fully customizable, beautiful and easy to use stepper. The stepper widgets help you to show or collect information from users using organized steps.

example/lib/main.dart

import 'package:easy_stepper/easy_stepper.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int activeStep = 0;
  final icons = [
    const Icon(CupertinoIcons.cart),
    const Icon(CupertinoIcons.info),
    const Icon(CupertinoIcons.cart_fill_badge_plus),
    const Icon(CupertinoIcons.money_dollar),
    const Icon(Icons.check_circle_outline),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: Column(
              children: [
                EasyStepper(
                  activeStep: activeStep,
                  steps: const [
                    EasyStep(
                      icon: Icon(CupertinoIcons.cart),
                      title: 'Cart',
                    ),
                    EasyStep(
                      icon: Icon(CupertinoIcons.info),
                      title: 'Address',
                    ),
                    EasyStep(
                      icon: Icon(CupertinoIcons.cart_fill_badge_plus),
                      title: 'Checkout',
                    ),
                    EasyStep(
                      icon: Icon(CupertinoIcons.money_dollar),
                      title: 'Payment',
                    ),
                    EasyStep(
                      icon: Icon(Icons.check_circle_outline),
                      title: 'Finish',
                    ),
                  ],
                  onStepReached: (index) => setState(() => activeStep = index),
                ),
                Expanded(
                  child: Icon(
                    icons[activeStep].icon,
                    size: 180,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}