【Flutter】Stepperの内容を受け取った文字列によって変えたい

前提

Stepperウィジェットで手順画面を作ろうと思っています。

実現したいこと

要約すると
stepsプロパティの値を動的に変更できて、前ページからもらった値によって変更できるか

Providerを使ってmodelの値（現段階で考えているのはString値）を受け取り、
値渡しをしていま受け取っている値によって、
Stepperのstepsプロパティの値を変えることで
表示の中身を変えたい。

発生している問題・エラーメッセージ

強いて言うなら
The argument type 'String?' can't be assigned to the parameter type 'List<Step>'.

該当のソースコード

main
1class WorkStepPage extends StatefulWidget {
2  WorkStepPage(
3      {Key? key,
4      required this.workname,
5      required this.phase,
6      required this.documentId})
7      : super(key: key);
8  final String workname;
9  final int phase;
10  final String documentId;
11  @override
12  State<WorkStepPage> createState() => _WorkStepPageState();
13}
14
15class _WorkStepPageState extends State<WorkStepPage>
16    with SingleTickerProviderStateMixin {
17  late int currentStep = int.parse(widget.phase.toString());
18
19  List<Step> cleanSteps = [
20    Step(
21      isActive: true,
22      title: Text("用具の準備"),
23      content: Container(),
24    ),
25    Step(
26      isActive: true,
27      title: Text("濡れ拭き"),
28      content: Container(),
29    ),
30    Step(
31      isActive: true,
32      title: Text("乾拭き"),
33      content: Container(),
34    ),
35    Step(
36      isActive: true,
37      title: Text("ゴミ捨て"),
38      content: Container(),
39    ),
40    Step(
41      isActive: true,
42      title: Text("用具の片付け"),
43      content: Container(),
44    ),
45  ];
46
47  List<Step> programnSteps = [
48    Step(
49      isActive: true,
50      title: Text("エディター起動"),
51      content: Container(),
52    ),
53    Step(
54      isActive: true,
55      title: Text("コーディング"),
56      content: Container(),
57    ),
58    Step(
59      isActive: true,
60      title: Text("ビルド"),
61      content: Container(),
62    ),
63    Step(
64      isActive: true,
65      title: Text("デバッグ"),
66      content: Container(),
67    ),
68    Step(
69      isActive: true,
70      title: Text("リファクタリング"),
71      content: Container(),
72    ),
73  ];
74
75
76  @override
77  Widget build(BuildContext context) {
78    return ChangeNotifierProvider<WorkStepModel>(
79      create: (_) => WorkStepModel(),
80      child: Consumer<WorkStepModel>(
81        builder: (context, model, child) {
82          return Scaffold(
83            appBar: AppBar(),
84            body: Center(
85              child: Stepper(
86                steps: (model.workName),　　　　　//ここを可変にしたい
87                currentStep: currentStep,
88                type: StepperType.vertical,
89                // onStepTapped: (step) {
90                //   setState(() {
91                //     currentStep = step;
92                //   });
93                // },
94                onStepCancel: () {
95                  setState(
96                    () {
97                      if (currentStep > 0) {
98                        currentStep = currentStep - 1;
99                      } else {
100                        currentStep = 0;
101                      }
102                    },
103                  );
104                },
105                onStepContinue: () {
106                  setState(
107                    () {
108                      if (currentStep < cleanSteps.length - 1) {
109                        currentStep = currentStep + 1;
110                      } else {
111                        currentStep = 0;
112                      }
113                    },
114                  );
115                },
116              ),
117            ),
118        
119          );
120        },
121      ),
122    );
123  }
124}
125

補足情報（FW/ツールのバージョンなど）

Flutter 3.0.5

行動規範の内容に同意します

回答1件

ベストアンサー

以下の実装は、「ここを可変にしたい」というのを質問内容としてくみ取った場合の回答例。
文字列ではないけどbool値で、表示するものを切り替えている。

dart
1class Stepper1 extends StatefulWidget {
2  const Stepper1({super.key}) : super();
3
4  static const String _title = 'Flutter Code Sample';
5
6  @override
7  State<Stepper1> createState() => _Stepper1State();
8}
9
10class _Stepper1State extends State<Stepper1> {
11  bool selectStep = true;
12  @override
13  Widget build(BuildContext context) {
14    return Scaffold(
15      appBar: AppBar(title: const Text(Stepper1._title)),
16      body: Column(
17        children: [
18          TextButton(
19              onPressed: (() {
20                setState(() {
21                  selectStep = !selectStep;
22                });
23              }),
24              child: const Text("select")),
25          MyStatefulWidget(selectStep, 2,)
26        ],
27      ),
28    );
29  }
30}
31
32class MyStatefulWidget extends StatefulWidget {
33  const MyStatefulWidget(this.choice, this.steps, {super.key});
34
35  final bool choice;
36  final int steps;
37
38  @override
39  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
40}
41
42class _MyStatefulWidgetState extends State<MyStatefulWidget> {
43  late int _index = widget.steps;
44  List<Step> cleanSteps = [
45    Step(
46      isActive: true,
47      title: Text("用具の準備"),
48      content: Container(),
49    ),
50    Step(
51      isActive: true,
52      title: Text("濡れ拭き"),
53      content: Container(),
54    ),
55    Step(
56      isActive: true,
57      title: Text("乾拭き"),
58      content: Container(),
59    ),
60    Step(
61      isActive: true,
62      title: Text("ゴミ捨て"),
63      content: Container(),
64    ),
65    Step(
66      isActive: true,
67      title: Text("用具の片付け"),
68      content: Container(),
69    ),
70  ];
71
72  List<Step> programnSteps = [
73    Step(
74      isActive: true,
75      title: Text("エディター起動"),
76      content: Container(),
77    ),
78    Step(
79      isActive: true,
80      title: Text("コーディング"),
81      content: Container(),
82    ),
83    Step(
84      isActive: true,
85      title: Text("ビルド"),
86      content: Container(),
87    ),
88    Step(
89      isActive: true,
90      title: Text("デバッグ"),
91      content: Container(),
92    ),
93    Step(
94      isActive: true,
95      title: Text("リファクタリング"),
96      content: Container(),
97    ),
98  ];
99
100  List<Step> selct(bool selector) {
101    return selector ? cleanSteps : programnSteps;
102  }
103
104  @override
105  Widget build(BuildContext context) {
106    return Stepper(
107      currentStep: _index,
108      onStepCancel: () {
109        if (_index > 0) {
110          setState(() {
111            _index -= 1;
112          });
113        }
114      },
115      onStepContinue: () {
116        if (_index < selct(widget.choice).length - 1) {
117          setState(() {
118            _index += 1;
119          });
120        }
121      },
122      onStepTapped: (int index) {
123        setState(() {
124          _index = index;
125        });
126      },
127      steps: selct(widget.choice),
128    );
129  }
130}

次に、実現したいことに書かれている

stepsプロパティの値を動的に変更できて、前ページからもらった値によって変更できるか

の件。

呼び出し側のStatefulWidgetが異なるという判断がされない限り、その下のState派生は再作成されない。
そのため、Stepのリストを切り替え後、上位側からその位置を指定したWorkStepPageを呼び出してもcurrentStep の値は変更されない可能性がある。
この場合、ウィジェット作成時にkey: UniqueKey()と追加しStatefulWidgetが異なると明示的に指定することで、State側も再作成されてStatefulWidgetのcurrentStepが初期化される感じになる。

質問の意図が若干不明だったのだけど、これで解決できますか？

投稿2022/10/01 13:01

ta.fu

総合スコア1667

my0930

2022/10/02 23:35

ご回答ありがとうございます。可変にしたい理由は、前のページがリストで表示されており、そのリストの選択した科目？によって Stepperで手順を変更したいという意図があります。例えばの話ですが、Stepperは登録手順などでよく使われると思いますが、登録する内容はその人の所属したいものによって内容は変わるという体で考えたとして、リストに生徒、先生、事務員、校長などがあった場合、生徒を選択されたら生徒用の登録手順、先生を選択したら先生用の登録手順などのようにStepperの中身を変えたいという意図でした。サンプルコードでは<List>Stepは2種類しか用意していませんが、作りたいものは複数あります。 providerの<Consumer>で囲ったとしても難しいでしょうか？

ta.fu

2022/10/02 23:54

回答例ではboolを使いましたがStringを受け取って、switch文で返すものを変えてもいいと思います。 List<Step> selct(String selector) { switch(selector) { case 'hoge': return cleanSteps; } } 例えば上のような感じ。 Stringのswitch文だとdefault対応をどうするかなどテストのカバレッジ的にどうなのかなというのはあります。 enumを使うのであればいいかもしれませんが。もしくは、上位側から直接List<Step>を渡すという方法もあります。

my0930

2022/10/03 02:37

swith文かenumを使いえばString値を受け取れるのですね！ありがとうございます！

行動規範の内容に同意します