flutter创建一个下一步下一步向导页面的demo

好的，下面是一个简单的Flutter向导页面的demo，主要使用了PageView和Stepper组件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WizardPage(),
    );
  }
}

class WizardPage extends StatefulWidget {
  @override
  _WizardPageState createState() => _WizardPageState();
}

class _WizardPageState extends State<WizardPage> {
  int _currentStep = 0;
  PageController _pageController = PageController();

  List<Step> _steps = [
    Step(
      title: Text('Step 1'),
      content: Center(
        child: Text('This is step 1'),
      ),
    ),
    Step(
      title: Text('Step 2'),
      content: Center(
        child: Text('This is step 2'),
      ),
    ),
    Step(
      title: Text('Step 3'),
      content: Center(
        child: Text('This is step 3'),
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wizard Page'),
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: _steps.length,
        itemBuilder: (BuildContext context, int index) {
          return _steps[index].content;
        },
        onPageChanged: (int index) {
          setState(() {
            _currentStep = index;
          });
        },
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            FlatButton(
              onPressed: _currentStep == 0 ? null : () {
                setState(() {
                  _pageController.previousPage(
                      duration: Duration(milliseconds: 250),
                      curve: Curves.easeInOut);
                });
              },
              child: Text('Back'),
            ),
            Stepper(
              steps: _steps,
              currentStep: _currentStep,
              onStepTapped: (int index) {
                setState(() {
                  _pageController.jumpToPage(index);
                  _currentStep = index;
                });
              },
              controlsBuilder: (BuildContext context,
                  {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
                return Row(
                  children: <Widget>[
                    FlatButton(
                      onPressed: onStepCancel,
                      child: Text('Cancel'),
                    ),
                    FlatButton(
                      onPressed: onStepContinue,
                      child: Text(_currentStep == _steps.length - 1
                          ? 'Finish'
                          : 'Next'),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

该demo中使用了PageView来呈现不同的步骤内容。在底部，使用了Stepper来显示当前步骤和导航到其他步骤。在点击下一步或完成时，可以使用PageController来滑动到下一步或完成向导。