Reputation: 1651
I am trying to show a list of widgets (circles), yet i want to expand them and make the circles take the entire page. i tried different methods; i used flexibe, flex, and expanded. however, none of them worked. Can you please recommend? Thanks in advance! EDIT: HERE IS THE CODE: // stepper circle is the widget i'm trying to expand between them
return Expanded(
flex: 10,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children:
List<Widget>.generate( numberOfCircles,
(int index) {
return StreamBuilder(
stream: stepperBloc.statusStream,
initialData: {0:"incomplete", 1:"incomplete", 2:"incomplete"},
builder:(_, AsyncSnapshot statusSnapshot){
if(statusSnapshot.hasData){
return Row(
children:<Widget>[ Flexible(
flex:5,
child: StepperCircle(
index: index,
status: statusSnapshot.data[index],
// onTap: () => stepperBloc.statusSink({index: "selected"}),
),
)],
);
Upvotes: 2
Views: 371
Reputation: 103551
You can try using the PageView
widget, it expands each item to fill the screen (according the viewportFraction
value) and you can set the direction vertical or horizontal.
PageController controller = PageController(viewportFraction: 1.0);
return PageView(
controller: controller,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.blue,
),
Container(
color: Colors.yellow,
),
],
);
More info : https://docs.flutter.io/flutter/widgets/PageView-class.html
Upvotes: 1