一統天下 flutter - widget 選擇類: Stepper - 步驟選擇

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd

一統天下 flutter - widget 選擇類: Stepper - 步驟選擇

示例如下:

lib\widget\selection\stepper.dart

/*
 * Stepper - 步驟選擇
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class StepperDemo extends StatefulWidget {
  const StepperDemo({Key? key}) : super(key: key);

  @override
  _StepperDemoState createState() => _StepperDemoState();
}

class _StepperDemoState extends State<StepperDemo> {

  /// 步驟的排列方向（vertical 或 horizontal）
  StepperType _stepperType = StepperType.vertical;
  /// 當前編輯的步驟的索引
  int _currentStepIndex = 0;
  /// 數據源
  final List<_MyModel> _dataList = [];
  
  @override
  void initState(){
    super.initState();

    _dataList.add(_MyModel("title0", "subtitle0", "這是第一步"));
    _dataList.add(_MyModel("title1", "subtitle0", "這是第二步"));
    _dataList.add(_MyModel("title2", "subtitle0", "這是第三步"));
  }

  /// 用於定義每個步驟，是一個 Step 類型的集合
  List<Step> _getStepList() {
    List<Step> stepList = [];
    for (var i = 0; i < _dataList.length; i++) {
      var model = _dataList[i];
      /// 步驟的狀態
      ///   indexed - 在小圓圈上顯示步驟的索引
      ///   editing - 在小圓圈上顯示鉛筆圖標
      ///   complete - 在小圓圈上顯示對鉤圖標
      ///   disabled - 標題變爲灰色
      ///   error - 顯示錯誤圖標，標題變爲紅色
      var state = StepState.indexed;
      if(_currentStepIndex == i) {
        state = StepState.editing;
      } else if(_currentStepIndex > i) {
        state = StepState.complete;
      }

      stepList.add(
        /// 用於定義每個步驟
        Step(
          title: Text(model.title),
          subtitle: Text(model.subtitle),
          content: Container(
            alignment: Alignment.centerLeft,
            child: Text(model.content),
          ),
          /// true - 以本例爲例，小圓圈爲藍色背景，可以通過主題修改這個顏色
          /// false - 以本例爲例，小圓圈爲灰色背景，可以通過主題修改這個顏色
          isActive: (_currentStepIndex >= _dataList.indexOf(model)),
          /// 步驟的狀態
          state: state,
        ),
      );
    }
    return stepList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title"),),
      backgroundColor: Colors.white,
      /// Stepper - 步驟選擇
      body: Stepper(
        /// 步驟的排列方向（vertical 或 horizontal）
        type: _stepperType,
        /// 滾動到邊緣時的物理效果，參見 /lib/widget/scroll/single_child_scroll_view.dart
        physics: const BouncingScrollPhysics(),
        /// 當前編輯的步驟在 steps 中的索引位置
        currentStep: _currentStepIndex,
        /// 所有的步驟集合，一個 Step 類型的集合
        steps: _getStepList(),
        /// 用於自定義編輯狀態下的步驟中的控制按鈕，如果不定義 controlsBuilder 則會顯示默認的控制按鈕
        controlsBuilder: (BuildContext context, ControlsDetails details)  {
          return Row(
            children: [
              MyButton(
                onPressed: details.onStepCancel,
                child: const Text('上一步'),
              ),
              Container(
                width: 10,
              ),
              MyButton(
                onPressed: details.onStepContinue,
                child: const Text('下一步'),
              ),
            ],
          );
        },
        /// 點擊當前步驟時
        onStepTapped: (index) {
          setState(() {
            _currentStepIndex = index;
          });
        },
        /// 點擊下一步時
        onStepContinue: () {
          setState(() {
            if (_currentStepIndex < _dataList.length - 1) {
              _currentStepIndex++;
            }
          });
        },
        /// 點擊上一步時
        onStepCancel: () {
          setState(() {
            if (_currentStepIndex > 0) {
              _currentStepIndex--;
            }
          });
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          setState(() {
            /// 切換 StepperType（垂直排列每個步驟或水平排列每個步驟）
            _stepperType = _stepperType == StepperType.vertical ? StepperType.horizontal : StepperType.vertical;
          });
        },
        label: const Text("切換 StepperType"),
      ),
    );
  }
}

/// 用於數據源
class _MyModel {
  String title;
  String subtitle;
  String content;

  _MyModel(this.title, this.subtitle, this.content);
}

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd