big steps in flutter stepper widget cause overflow. how can i show only 4 steps on screen?

Question

big steps in flutter stepper widget cause overflow. how can i show only 4 steps on screen ? this is my code:

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  List<Step> stepList() => [
        const Step(
            title: Text('step 1'),
            content: Center(
              child: Text('step 1'),
            )),
        const Step(
            title: Text('step 2'),
            content: Center(
              child: Text('step 2'),
            )),
        const Step(
            title: Text('step 3'),
            content: Center(
              child: Text('step 3'),
            )),
        const Step(
            title: Text('step 4'),
            content: Center(
              child: Text('step 4'),
            )),
        const Step(
            title: Text('step 5'),
            content: Center(
              child: Text('step 5'),
            )),
        const Step(
            title: Text('step 6'),
            content: Center(
              child: Text('step 6'),
            )),
        const Step(
            title: Text('step 7'),
            content: Center(
              child: Text('step 7'),
            )),
        const Step(
            title: Text('step 8'),
            content: Center(
              child: Text('step 8'),
            )),
        const Step(
            title: Text('step 9'),
            content: Center(
              child: Text('step 9'),
            )),
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.green,
          title: const Text(
            'test',
            style: TextStyle(color: Colors.white),
          ),
        ),

        // Here we have initialized the stepper widget
        body: Stepper(
          type: StepperType.horizontal,
          steps: stepList(),
        ));
    ;
  }
}

i want 1_make steps scrollable or 2_show only 4 steps each time

Answer 1

One solution would be to only show the Step titles on only one Step at a time (the active one):

Step(
  content: Placeholder(),
  title: Text(_currentStep == index
      ? "Title"
      : ""),
  isActive: _currentStep >= index,
  state: _currentStep >= index ? StepState.complete : StepState.disabled);