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 *phoutthakonebcl@gmail.com Thank you so much ๐ (โยดโก`โ).