How to multiply Widgets in a list?

Asked

Viewed 74 times

0

Before you start doing the Back-End part of the app I wanted to see what this list style with more items would look like.

class ListScreen extends StatefulWidget {

  @override
  _ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: CupertinoNavigationBar(
            // backgroundColor: defaultColor,
            transitionBetweenRoutes: false,
            trailing: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(17, 0, 0, 0),
                  child: Text(
                    "Painel de controle",
                    style: TextStyle(color: Colors.black, fontSize: 20.0, fontWeight: FontWeight.w600),
                  ),
                ),
                // CupertinoButton(
                //       onPressed: () {

                //       },
                //       padding: EdgeInsets.zero,
                //       child: const Tooltip(
                //         message: 'Back',
                //         child: Text('Selecionar Evento'),
                //         excludeFromSemantics: true,
                //       )),
              ],
            ),
          ),
          body: Container(
            color: colorBack,

            child:  ListView(
              children: <Widget>[
                _card()
              ],
            )
          )

          );
  }


  Widget _card(){
    return Container(
        padding: EdgeInsets.all(10.0),
        child: Center(
          child: Column(
            //Para ocupar toda a tela no horizontal
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Card(
                color: Colors.grey[100],
                child: Container(
                   padding: EdgeInsets.all(10),
                   child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                       Text(
                   "Evento de Tecnologia e ciência",
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 20, color: defaultColor),

                      ),
                      SizedBox(
                        height: 10,
                      ),
                       Text( 
                        "Dispível de 10/02/2020 até 25/06/2020",
                        style: TextStyle(fontSize: 14),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Text( 
                        "Total disponível: 50 de 100 (50%)",
                        style: TextStyle(fontSize: 14),
                      ),

                    ]
                   ),
                ),
             ),
            ],
          ),
        ),
       );

  }
}

This is my canvas. Being _card() the widget you wanted to multiply on this screen.

1 answer

2


For this you can use Listview.Builder:

    body: Container(
        color: Colors.black,

        child:  ListView.builder(
          itemCount: 10,        //número de vezes que você deseja replicar o widget
            itemBuilder: (context, index){
              return _card();
        }),
    )

Browser other questions tagged

You are not signed in. Login or sign up in order to post.