#GOAL
I want a Flutter Stepper with it's list of steps in the Header scrollable.
#ISSUEBut I'm getting this with this code, please see the attached picture.
#EffortI saw in Stepper Class that Row widget is not scrollable I tried to change it to a ListView but it's breaks everything.
#HopeI 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