page_stepper 0.0.4

The Page stepper is very easy to use to help you presenting the content step by step as the professional.

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.

Preview

Features

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

Usage

import 'package:page_stepper/page_stepper.dart';

Table of variable

• 0 is for required
• 1 is for optional

Example

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

  @override
  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 = Colors.red;
  Color color2 = Colors.purple;
  Color color3 = Colors.amber;

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

  @override
  void initState() {
    // TODO: implement initState
    initPlatform();
    super.initState();
  }

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

  @override
  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

---Or---

Additional information

If you have any feedback, please let me know

• you can contact me at *[e-mail] Thank you so much 😘 (❁´◡`❁).