Flutter水平Stepper不显示问题求助

我尝试在Divider下方放置一个水平Stepper，但它无法正常显示。试过多种方法都没解决，切换为垂直Stepper时能正常显示，但我需要使用水平Stepper，恳请帮忙排查问题。

原代码 #

import 'package:flutter/material.dart';

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

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

class _SignupScreenState extends State<SignupScreen> {
  List<Step> getSteps() => [
        Step(
            isActive: currentStep >= 0,
            title: const Text('Personal'),
            content: Container()),
        Step(
          isActive: currentStep >= 1,
          title: const Text('Company'),
          content: Container(),
        ),
        Step(
          isActive: currentStep >= 2,
          title: const Text('Complete'),
          content: Container(),
        )
      ];

  int currentStep = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Center(
            child: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.fromLTRB(20.0, 20, 20.0, 0.0),
                    child: RichText(
                      text: const TextSpan(
                        children: [
                          TextSpan(
                            text: 'Test',
                            style: TextStyle(
                              fontFamily: "La Belle Aurore",
                              fontSize: 40,
                              color: Color(0xFFFFE381),
                            ),
                          ),
                          TextSpan(
                            text: 'App',
                            style: TextStyle(
                              fontFamily: 'Inter',
                              fontSize: 25,
                              color: Colors.black,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const Text(
                    'Test',
                    style: TextStyle(
                      color: Color.fromARGB(255, 108, 107, 107),
                      fontSize: 15,
                    ),
                  ),
                  const SizedBox(height: 10),
                  const Text(
                    'Create an Account',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 10),
                  const Divider(
                    thickness: 2,
                    indent: 16,
                    endIndent: 16,
                  ),
                  Stepper(
                    type: StepperType.vertical,
                    currentStep: currentStep,
                    onStepTapped: (step) {
                      setState(() {
                        currentStep = step;
                      });
                    },
                    steps: getSteps(),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

问题分析 #

水平Stepper需要足够的水平空间渲染步骤标题和连接线，但原代码中Stepper被嵌套在多层Column和Center组件内，未获得明确的宽度约束，导致水平方向空间不足，无法正常布局。而垂直Stepper是纵向排列，对宽度要求较低，因此可以正常显示。

修复代码 #

import 'package:flutter/material.dart';

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

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

class _SignupScreenState extends State<SignupScreen> {
  List<Step> getSteps() => [
        Step(
            isActive: currentStep >= 0,
            title: const Text('Personal'),
            content: Container()),
        Step(
          isActive: currentStep >= 1,
          title: const Text('Company'),
          content: Container(),
        ),
        Step(
          isActive: currentStep >= 2,
          title: const Text('Complete'),
          content: Container(),
        )
      ];

  int currentStep = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(20.0, 20, 20.0, 0.0),
                  child: RichText(
                    text: const TextSpan(
                      children: [
                        TextSpan(
                          text: 'Test',
                          style: TextStyle(
                            fontFamily: "La Belle Aurore",
                            fontSize: 40,
                            color: Color(0xFFFFE381),
                          ),
                        ),
                        TextSpan(
                          text: 'App',
                          style: TextStyle(
                            fontFamily: 'Inter',
                            fontSize: 25,
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                const Text(
                  'Test',
                  style: TextStyle(
                    color: Color.fromARGB(255, 108, 107, 107),
                    fontSize: 15,
                  ),
                ),
                const SizedBox(height: 10),
                const Text(
                  'Create an Account',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 10),
                const Divider(
                  thickness: 2,
                  indent: 16,
                  endIndent: 16,
                ),
                // 让Stepper获取足够布局空间并切换为水平模式
                Expanded(
                  child: Stepper(
                    type: StepperType.horizontal,
                    currentStep: currentStep,
                    onStepTapped: (step) {
                      setState(() {
                        currentStep = step;
                      });
                    },
                    steps: getSteps(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点 #

• 移除多余的Center组件，避免限制Stepper的水平空间
• 用Expanded包裹Stepper，使其能占据剩余的垂直和水平空间
• 将Stepper的type改为StepperType.horizontal

内容的提问来源于stack exchange，提问作者Dayshin