Flutter水平Stepper视图实现方法咨询

Looking at your MyStepper component, let's refine it to fix potential issues, follow Flutter/Dart best practices, and make the user experience smoother:

Key Improvements & Fixes #

• Variable Naming: Switched to Dart's camelCase convention (e.g., CurrentStep → currentStep) for consistency.
• Unused Code: Removed redundant variables like step and SetState that weren't being utilized.
• Step State Logic: Fixed inconsistent step states—now steps before the current one show as completed, the current step shows as active, and future steps are disabled.
• Simplified Widget Tree: Replaced the overcomplicated NestedScrollView with a SingleChildScrollView to handle horizontal scrolling more cleanly.
• Safer Button Logic: Removed the risky practice of storing mContinue/mCancel variables, instead directly using the stepper's built-in callback details in the bottom buttons.
• Enhanced UX: Added smooth scroll animations when navigating steps, and disabled buttons when they can't be used (e.g., BACK on the first step).

Optimized Code #

import 'package:flutter/material.dart';

class MyStepper extends StatefulWidget {
  const MyStepper({super.key});

  @override
  State<MyStepper> createState() => _MyStepperState();
}

class _MyStepperState extends State<MyStepper> {
  int currentStep = 0;
  final ScrollController scrollController = ScrollController();

  // Helper to determine step state dynamically
  StepState _getStepState(int index) {
    if (index < currentStep) return StepState.complete;
    if (index == currentStep) return StepState.editing;
    return StepState.disabled;
  }

  @override
  Widget build(BuildContext context) {
    final stepWidth = MediaQuery.of(context).size.width;
    final List<Step> mySteps = [
      Step(
        title: const Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Text('First Step'),
        ),
        content: const Text('This is the first step.'),
        isActive: currentStep >= 0,
        state: _getStepState(0),
      ),
      Step(
        title: const Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Text('Second Step'),
        ),
        content: const Text('This is the second step.'),
        isActive: currentStep >= 1,
        state: _getStepState(1),
      ),
      Step(
        title: const Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Text('Third Step'),
        ),
        content: const Text('This is the third step.'),
        isActive: currentStep >= 2,
        state: _getStepState(2),
      ),
      Step(
        title: const Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Text('Fourth Step'),
        ),
        content: const Text('This is the fourth step.'),
        isActive: currentStep >= 3,
        state: _getStepState(3),
      ),
      Step(
        title: const Text('Fifth Step'),
        content: const Text('This is the fifth step.'),
        isActive: currentStep >= 4,
        state: _getStepState(4),
      ),
    ];

    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('Horizontal Stepper'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        controller: scrollController,
        scrollDirection: Axis.horizontal,
        child: SizedBox(
          width: stepWidth * mySteps.length,
          child: Stepper(
            type: StepperType.horizontal,
            physics: const NeverScrollableScrollPhysics(), // Let parent handle scrolling
            currentStep: currentStep,
            onStepTapped: (index) {
              setState(() => currentStep = index);
              scrollController.animateTo(
                index * stepWidth,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut,
              );
            },
            onStepContinue: () {
              setState(() {
                if (currentStep < mySteps.length - 1) {
                  currentStep++;
                  scrollController.animateTo(
                    currentStep * stepWidth,
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.easeInOut,
                  );
                } else {
                  // Optional: Handle completion (e.g., show success message)
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Stepper completed!')),
                  );
                }
              });
            },
            onStepCancel: () {
              if (currentStep > 0) {
                setState(() => currentStep--);
                scrollController.animateTo(
                  currentStep * stepWidth,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut,
                );
              }
            },
            steps: mySteps,
            controlsBuilder: (context, details) => const SizedBox.shrink(), // Hide default controls
          ),
        ),
      ),
      bottomNavigationBar: Container(
        margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
        color: Colors.blue,
        child: ConstrainedBox(
          constraints: const BoxConstraints.tightFor(height: 48.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              TextButton(
                onPressed: currentStep > 0 ? () => context.findAncestorStateOfType<_MyStepperState>()?.setState(() => onStepCancel()) : null,
                style: TextButton.styleFrom(foregroundColor: Colors.white),
                child: const Row(
                  children: [Icon(Icons.chevron_left), Text('BACK')],
                ),
              ),
              TextButton(
                onPressed: currentStep < mySteps.length - 1 ? () => context.findAncestorStateOfType<_MyStepperState>()?.setState(() => onStepContinue()) : null,
                style: TextButton.styleFrom(foregroundColor: Colors.white),
                child: const Row(
                  children: [Text('NEXT'), Icon(Icons.chevron_right)],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Quick Notes #

• Scroll Animations: The smooth scroll makes navigating between steps feel more polished, especially for steppers with multiple steps.
• Button Disabling: Users can't tap BACK on the first step or NEXT on the last step, which prevents confusing UI states.
• Reusable Logic: The _getStepState helper method cuts down on code duplication and makes it easy to adjust step appearance later.

内容的提问来源于stack exchange，提问作者Saravana Kumar G