Flutter页面导航插件flutter_page_stepper的使用

特性

• 可定制：可以自定义进度条和指示器的外观。
• 灵活：支持任意数量的步骤/页面。

使用方法

安装依赖并导入包

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_page_stepper: ^x.y.z

然后，在你的 Dart 文件中导入该包：

import 'package:flutter_page_stepper/flutter_page_stepper.dart';

添加FlutterPageStepper到你的代码中

你可以通过设置 activeColor（激活颜色）、stepperLength（步骤数）、currentIndex（当前索引）以及你希望显示的页面列表来添加 FlutterPageStepper。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'FlutterPageStepper Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const FlutterPageStepperExample(),
      );
}

class FlutterPageStepperExample extends StatefulWidget {
  const FlutterPageStepperExample({super.key});

  [@override](/user/override)
  State<FlutterPageStepperExample> createState() => _FlutterPageStepperExampleState();
}

class _FlutterPageStepperExampleState extends State<FlutterPageStepperExample> {
  int currentPage = 0;

  void moveToNext() {
    if (currentPage < 3) {
      setState(() {
        currentPage++;
      });
    }
  }

  void moveToPrevious() {
    if (currentPage > 0) {
      setState(() {
        currentPage--;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FlutterPageStepper(
          headingVerticalPadding: 30,
          stepperLength: 3,
          currentIndex: currentPage,
          activeColor: Colors.brown,
          textStyle: const TextStyle(
            color: Colors.white,
          ),
          children: [
            StepperPage(
              content: 1,
              onNext: () {
                moveToNext();
              },
            ),
            StepperPage(
              content: 2,
              onPrevious: () {
                moveToPrevious();
              },
              onNext: () {
                moveToNext();
              },
            ),
            StepperPage(
              content: 3,
              nextButtonTitle: "提交",
              onPrevious: () {
                moveToPrevious();
              },
              onNext: () {},
            ),
          ],
        ),
      ),
    );
  }
}

参数

这些属性用于自定义进度条小部件的行为和外观。

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_page_stepper/flutter_page_stepper.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'FlutterPageStepper Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const FlutterPageStepperExample(),
      );
}

class FlutterPageStepperExample extends StatefulWidget {
  const FlutterPageStepperExample({super.key});

  [@override](/user/override)
  State<FlutterPageStepperExample> createState() => _FlutterPageStepperExampleState();
}

class _FlutterPageStepperExampleState extends State<FlutterPageStepperExample> {
  int currentPage = 0;

  void moveToNext() {
    if (currentPage < 3) {
      setState(() {
        currentPage++;
      });
    }
  }

  void moveToPrevious() {
    if (currentPage > 0) {
      setState(() {
        currentPage--;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FlutterPageStepper(
          headingVerticalPadding: 30,
          stepperLength: 3,
          currentIndex: currentPage,
          activeColor: Colors.brown,
          textStyle: const TextStyle(
            color: Colors.white,
          ),
          children: [
            StepperPage(
              content: 1,
              onNext: () {
                moveToNext();
              },
            ),
            StepperPage(
              content: 2,
              onPrevious: () {
                moveToPrevious();
              },
              onNext: () {
                moveToNext();
              },
            ),
            StepperPage(
              content: 3,
              nextButtonTitle: "提交",
              onPrevious: () {
                moveToPrevious();
              },
              onNext: () {},
            ),
          ],
        ),
      ),
    );
  }
}

class StepperPage extends StatelessWidget {
  final int content;
  final Function()? onPrevious;
  final Function() onNext;
  final String? nextButtonTitle;
  const StepperPage({
    super.key,
    required this.content,
    this.onPrevious,
    required this.onNext,
    this.nextButtonTitle,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Spacer(),
        Text(
          "Page: $content",
          style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        ),
        const Spacer(),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            onPrevious != null
                ? MaterialButton(
                    onPressed: onPrevious,
                    child: const Text(
                      "上一页",
                      style: TextStyle(
                        color: Colors.brown,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  )
                : const SizedBox(),
            MaterialButton(
              onPressed: onNext,
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 6),
                decoration: BoxDecoration(
                    color: Colors.brown,
                    borderRadius: BorderRadius.circular(20)),
                child: Text(
                  nextButtonTitle ?? "下一页",
                  style: const TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.white),
                ),
              ),
            )
          ],
        ),
      ],
    );
  }
}