page_stepper

Description:

page stepper

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
copied to clipboard
Usage #
import 'package:page_stepper/page_stepper.dart';
copied to clipboard
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,
);
}
}
copied to clipboard
Donation - Support Me #
Lao QR #

Binance - BTC #

---Or--- #

Additional information #
If you have any feedback, please let me know

you can contact me at *[email protected]
Thank you so much 😘 (❁´◡`❁).