Flutter问题：ListView嵌套Stepper时无法滚动

Hey there! Let's tackle this problem where your Stepper inside a ListView won't scroll and its last step gets cut off. The root cause here is that the Stepper widget has its own default scrolling physics and size constraints, which conflict with the outer ListView's scrolling behavior. Here's how to fix it step by step:

Key Issues & Solutions #

• Scroll Gesture Conflict: The Stepper tries to handle scroll gestures itself, preventing the outer ListView from taking over. We can disable the Stepper's internal scrolling so the ListView handles all scrolling.
• Overflowing Content: The Stepper might be trying to expand to fill available space instead of fitting its content, leading to overflow. We'll adjust its constraints to wrap its content properly.

Modified Code Example #

Here's your updated code with fixes applied:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stepper in ListView Fix',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stepper in ListView')),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          // Banner Image
          Container(
            height: 200,
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Center(child: Text('Banner Image')),
          ),
          const SizedBox(height: 16),
          // First Text Container
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.blue[50],
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Text(
              'This is the first container with some sample text. It takes up space in the ListView and scrolls along with other content.',
              style: TextStyle(fontSize: 16),
            ),
          ),
          const SizedBox(height: 16),
          // Second Text Container
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.green[50],
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Text(
              'This is the second container with more text. It adds more content to the ListView, making the page scrollable when needed.',
              style: TextStyle(fontSize: 16),
            ),
          ),
          const SizedBox(height: 16),
          // Stepper Container (Fixed!)
          Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey[300]!),
              borderRadius: BorderRadius.circular(8),
            ),
            // Wrap Stepper in a ConstrainedBox to ensure it fits content
            child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: double.infinity),
              child: Stepper(
                // Disable Stepper's internal scroll physics
                physics: const NeverScrollableScrollPhysics(),
                currentStep: _currentStep,
                onStepTapped: (step) => setState(() => _currentStep = step),
                onStepContinue: () => setState(() {
                  if (_currentStep < 2) _currentStep++;
                }),
                onStepCancel: () => setState(() {
                  if (_currentStep > 0) _currentStep--;
                }),
                steps: const [
                  Step(
                    title: Text('Step 1'),
                    content: Text('This is the content for step 1. It has enough text to demonstrate that the stepper now scrolls with the ListView.'),
                    isActive: true,
                  ),
                  Step(
                    title: Text('Step 2'),
                    content: Text('This is the content for step 2. More sample text to fill space.'),
                  ),
                  Step(
                    title: Text('Step 3'),
                    content: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('This is the final step with longer content that used to overflow the screen.'),
                        SizedBox(height: 8),
                        Text('Now, since the Stepper is wrapped properly, it will scroll along with the rest of the ListView content.'),
                        SizedBox(height: 8),
                        Text('No more overflow issues!'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

What Changed? #

1. Added physics: const NeverScrollableScrollPhysics() to Stepper: This tells the Stepper not to handle scroll gestures, so the outer ListView takes over scrolling for the entire page.
2. Wrapped Stepper in ConstrainedBox: Ensures the Stepper expands horizontally to fit its container while wrapping its vertical content, preventing overflow.
3. Removed any fixed height constraints on the Stepper's parent Container: Let the Stepper's content determine its height, which the ListView will then handle as part of the scrollable content.

These changes will make the entire ListView scroll smoothly, even when tapping the Stepper area, and ensure all Stepper steps are visible without overflowing the screen.

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