2

#GOAL

I want a Flutter Stepper with it's list of steps in the Header scrollable.

#ISSUE

But I'm getting this with this code, please see the attached picture.

#Effort

I saw in Stepper Class that Row widget is not scrollable I tried to change it to a ListView but it's breaks everything.

#Hope

I hope that the Flutter community will be reactive to help me go further.

import 'package:provider/provider.dart';
import 'package:easy_cons/models/FormStep.dart';

class HomeScreen extends StatelessWidget {
  final List<Step> steps = <Step>[
    Step(
        isActive: true,
        title: Text('Title 1'),
        subtitle: Text("Constructor"),
        content: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            TextFormField(
              decoration: InputDecoration(labelText: 'Email Address'),
            ),
          ],
        ),
        state: StepState.editing),
    Step(
      isActive: true,
      title: Text('Title2'),
      content: Text('Title2'),
      subtitle: Text("Constructor"),
    ),
    Step(
      title: Text('Title3'),
      content: Text('Title3'),
      subtitle: Text("Constructor"),
    ),
    Step(
      title: Text('Choc'),
      content: Text('Title4'),
      subtitle: Text("Constructor"),
    ),
    Step(
      title: Text('Choc'),
      content: Text('Title5'),
      subtitle: Text("Constructor"),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('MyApp'),
      ),
      body: Stepper(
          physics: ClampingScrollPhysics(),
          currentStep: Provider.of<FormStep>(context).formStep,
          type: StepperType.horizontal,
          onStepContinue: () {
            print(Provider.of<FormStep>(context).formStep);
            Provider.of<FormStep>(context).incrementStep(this.steps.length);
            print(Provider.of<FormStep>(context).formStep);
            print(this.steps.length);
          },
          onStepCancel: () {
            Provider.of<FormStep>(context).decrementStep(this.steps.length);
          },
          onStepTapped: (index) {
            Provider.of<FormStep>(context).formStep = index;
          },
          steps: steps),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container(
        width: 70.0,
        height: 70.0,
        child: Material(
          shape: CircleBorder(),
          elevation: 16.0,
          child: FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.description),
                  onPressed: () {},
                ),
                Text(
                  'MES CONSTATS',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Text(
                  'PARAMETRES',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                IconButton(
                  icon: Icon(
                    Icons.person,
                    size: 30.0,
                  ),
                  onPressed: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}```


[enter image description here][1]


  [1]: https://i.stack.imgur.com/aJG5B.png

0 Answers0