page_stepper 0.0.4
page_stepper: ^0.0.4 copied to clipboard
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 *phoutthakonebcl@gmail.com Thank you so much ๐ (โยดโก`โ).