How to wrap widget inside ListViewBuilder in Flutter

Question

I'd Wrap horizontal listview builder, my code:

return ListView.builder(
            // shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: ayahQuran[110]['ayat'].length,
            itemBuilder: (BuildContext context, int index) {
              return Wrap(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      ayahQuran[110]['ayat'][index]["ayat_ayat"]                 
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                        ayahQuran[110]['ayat'][index]["noayat"].toString()),
                  ),
                ],
              );
            },
          );

my code

I want to like this: want to like this

I have tried much time to this, anyone can help me to fix it. thanks

Answer 1

In my code listview scroll horizontal, I want to wrap in new line.

EDIT: so what is asked is to keep elements aligned horizontaly, but with the ability to scroll verticaly.

To keep the vertical scroll: you need to set scrollDirection to Axis.vertical . But since this is the default value, you can simply remove this line from your code: scrollDirection: Axis.horizontal, .

To align elements horizontaly: you must put them into a Row widget.

example:

return ListView.builder(
            // shrinkWrap: true,
            itemCount: ayahQuran[110]['ayat'].length,
            itemBuilder: (BuildContext context, int index) {
              return Wrap(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          ayahQuran[110]['ayat'][index]["ayat_ayat"]                 
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                        ayahQuran[110]['ayat'][index]["noayat"].toString(),
                         ),
                       ),
                     ],
                   ),
                 ],
               );
             },
           );