Flutter 步进器构件-有条件地隐藏一个步骤

wdebmtf2  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(434)

我尝试仅当API调用在第一步返回true时才显示步骤1。

Stepper(
          currentStep: _currentStepper,
          onStepContinue: _continueStep,
          steps: [
            Step(
              title: const Text('Let\'s start with your phone number'),
              ***// call api***
            ),
            Step(***// this step should be displayed only if the first step returns true***
                title: const Text(
                    'Please enter the code sent to your mobile device'),
                content: OTP CODE Step
          ],
        ),

  void _continueStep() {
    if (_currentStepper == 0) {
      if (_formKey.currentState!.validate()) {
        _signUpUser();
        _currentStepper = 1;
      }
    }
  }
jq6vz3qz

jq6vz3qz1#

  • 注意:这不是一个定制的解决方案,您必须调整此示例以满足您的需求。*

问题在于,

通常,要显示/隐藏小部件,可以使用Visibility小部件。
但是,在这里,Stepper小部件接受List<Step>,因此您不能使用Visibility小部件。

变通方案

我创建了一个按钮来切换最后一步:

创建steps列表,并根据条件添加另一个小部件:

final _steps = [
    Step(title: Text("step 1"), content: Text("content 1")),
    Step(title: Text("step 2"), content: Text("content 2")),
  ];

Stepper小工具中:

steps: isVisible
              ? [
                  ..._steps,
                  Step(title: Text("step 3"), content: Text("content 3"))
                ]
              : _steps,

另外,为Stepper小部件使用一个随机的key,否则,您将收到an error

    • 完整示例**:
import 'dart:math';

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: Test(),
        ),
      ),
    );
  }
}

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

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  var isVisible = false;
  final _steps = [
    const Step(title: Text("step 1"), content: Text("content 1")),
    const Step(title: Text("step 2"), content: Text("content 1")),
  ];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
            onPressed: () {
              setState(() {
                isVisible = !isVisible;
              });
            },
            child: const Text("toggle the third step")),
        // show the steps
        Stepper(
          // use a random key
          key: Key(Random.secure().nextDouble().toString()),
          // i want to show 2 steps, but if the `isVisible` is true, i want to show 3 steps
          steps: isVisible
              ? [
                  ..._steps,
                  const Step(title: Text("step 3"), content: Text("content 3"))
                ]
              : _steps,
          currentStep: 0,
          onStepContinue: () {},
          onStepCancel: () {},
        ),
      ],
    );
  }
}

相关问题