page_stepper 0.0.4 copy "page_stepper: ^0.0.4" to clipboard
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.

example/lib/main.dart

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,
    );
  }
}
2
likes
140
pub points
32%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on page_stepper