Flutter prevent listview showing in new line

user_15291028 0
Viewed 506

I want to show my listview in same line one after another but listview showing every item in every new line. How can I prevent to show in new line. So that it shows like paragraph

ListView.builder(
      shrinkWrap: true,
      itemCount:
      controller.page.value.data.ayahs.length,
      itemBuilder: (context, index) {
         return Text(controller.page.value.data.ayahas[index].name);
     })

Please look at this photo. I want to show text like this one after another instead of new line Listview Text one after another

flutter newline listview
2 Answers

Try using Wrap widget. For example, like this.

final List<String> ayahs = ['This', 'is', 'a', 'very', 'very', 'very', 'very', 'very', 'very', 'very', 'very', 'very', 'very', 'long', 'text'];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: ayahs
          .map((element) => Text(element))
          .toList(),
    );
  }
user_138408640

Try using List generator inside a grid view and provide crossAxisCount same as the length of the list to get list items in a row.

GridView.count(
   crossAxisCount: controller.page.value.data.ayahs.length,
   children: List.generate(controller.page.value.data.ayahs.length, (index) {
       return GridTile(
           child: Text(controller.page.value.data.ayahas.name)
       );
   }),
),
user_113223160
Related