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.
import 'package:flutter/material.dart';
import 'package:page_stepper/page_stepper.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
final String title = 'Page Stepper';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
),
home: MyHomePage(title: title),
);
}
}
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,
);
}
}