Mee
Mee

Reputation: 1651

How to expand elements in list.generate

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

Answers (1)

diegoveloper
diegoveloper

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

Related Questions