Page Stepper

The Page stepper is very easy to use to help you presenting the content step by step as the professional. This is very simple and you can customize many things inside such as: title, shape, color, stepper dot style, etc.



You can use the package to present your content as the professional.

  • Page stepper style: Circle and Number
  • Each Page can be same or difference color
  • You can adjust the title and button

Getting started

Install the package and call the widget directly you will receive the result.

install with flutter

flutter pub add page_stepper
flutter pub get


import 'package:page_stepper/page_stepper.dart';

Table of variable

  • 0 is for required
  • 1 is for optional


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget txtData(String text, {Color? color}) =>
          Text(text, style: TextStyle(fontSize: 32, color: color));
  Widget circleVal(Widget child, {Color? color}) =>
          CircleAvatar(radius: 28, backgroundColor: color, child: child);
  Color color1 =;
  Color color2 = Colors.purple;
  Color color3 = Colors.amber;

  Widget page1() => Center(
    child: Column(
      children: [
        circleVal(txtData('1', color: whiteColor), color: color1),
        txtData('Page1', color: color1),
  Widget page2() => Center(
    child: Column(
      children: [
        circleVal(txtData('2', color: whiteColor), color: color2),
        txtData('Page2', color: color2),
  Widget page3() => Center(
    child: Column(
      children: [
        circleVal(txtData('3', color: whiteColor), color: color3),
        txtData('Page3', color: color3),

  void initState() {
    // TODO: implement initState

  List<PageModel> pages = [];
  void initPlatform() {}

  Widget build(BuildContext context) {
    pages = [
      PageModel(title: 'Page1', page: page1(), color: color1),
      PageModel(title: 'Page2', page: page2(), color: color2),
      PageModel(title: 'Page3', page: page3(), color: color3),
    return PageStepper(
      pages: pages,
      dotType: DotType.typeNumber,
      btnColor: const Color.fromRGBO(41, 118, 108, 1.0),
      titleBackground: const Color.fromRGBO(41, 118, 108, 1.0),
      dotPosition: DotPosition.bottom,

Donation - Support Me

Lao QR

Binance - BTC


Buy Me A Coffee

Additional information

If you have any feedback, please let me know