Question 189492 in Flutter Question posted in
The official Flutter documentation can be found here.

i want to cretae a list in flutter which look like one string with verticalscrolling

I want to create a list in Flutter that shows items one beside one like one string whick consist index of each item .if i am using row then it says right overflowed by pixels. if i use a wrapper then it starts from the next line i want that every item should show its index on click but the list item should look like one string no next line and no extra space in the line.

How to do this in flutter?

 ListView.builder(
      itemCount: 100,
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return Column(
          children: [
            ListTile(
                leading: const Icon(Icons.list),
                trailing: Row(
                  children: [
                    const Text(
                      "text",
                      style: TextStyle(color: Colors.green, fontSize: 15),
                    ),
                  ],
                ),
                title: Text("List item $index")),
          ],
        );
      }),

I also tried many more using the wrapper and expanded and also many more options but was unable to get the desired result

Tags:

2

Answers


  1. 0

    It’s simple you need to set MainAxisSize of the Row widget, as you are not setting it row takes full width of the ListTile. You can set it to min then it will take the width of the child.

    mainAxisSize: MainAxisSize.min,

    And now the code will look like this:

    ListView.builder(
        itemCount: 100,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              ListTile(
                  leading: const Icon(Icons.list),
                  trailing: const Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "text",
                        style: TextStyle(color: Colors.green, fontSize: 15),
                      ),
                    ],
                  ),
                  title: Text("List item $index")),
            ],
          );
        }),
    Login or Signup to reply.
  2. 0

    As far as I understand from the problem you are experiencing, you want to get such a result, if you have expressed something else, you can specify and I can help you accordingly. you can try this code. Shortly you must wrap with Expanded widget.

     Expanded(
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: 100,
              itemBuilder: (context, index) {
                return Card(
                  elevation: 5,
                  child: ListTile(
                    leading: const Icon(Icons.list),
                    trailing: Text("data"),
                    title: Text("List item $index"),
                  ),
                );
              },
            ),
          ),

    result is here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search