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

Getting error while adding scrollDirection: Axis.horizontal, to the listview builder – Flutter

I am getting an error while adding scrollDirection: Axis.horizontal to the ListView builder of my ListView.

The application crashes.

return Scaffold(
      appBar: AppBar(),
      body: _users == null || _users!.isEmpty
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : ListView.builder(
              physics: ScrollPhysics(),
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              primary: false,
              itemCount: _users.length,
              itemBuilder: (BuildContext ctxt, int i) {
                return new Card(
                  child: Column(
                    children: [
                      Text(_users[i].name.toString()),
                      ListView.builder(
                        physics: ScrollPhysics(),
                        shrinkWrap: true,
                        primary: false,
                        itemCount: _users[i].chart.length,
                        itemBuilder: (BuildContext ctx, int j) {
                          return Text(_users[i]
                              .chart[j]
                              .ch_timestamp); // display username as an example
                        },
                      ),
                    ],
                  ),
                );
              },
            ),
    );
Tags:

2

Answers


  1. 0

    Try wrapping your inner ListView with a SizedBox that has width specified.

    SizedBox(
  width: 200,
  child: ListView.builder(
    physics: ScrollPhysics(),
    shrinkWrap: true,
    primary: false,
    itemCount: _users[i].chart.length,
    itemBuilder: (BuildContext ctx, int j) {
      return Text(_users[i]
          .chart[j]
          .ch_timestamp); // display username as an example
    },
  ),
),

    The problem here is your inner vertical ListView tries to take all the available width which is not possible because the parent ListView scrolls horizontally, which means it has infinite width.

    Login or Signup to reply.
  2. 0

    The error you have is that you are trying to add horizontal scrolling to a ListView that its default is vertical. to be able to use horizontal scroll you should use scrollDirection to Axis.horizontal. and your crashing issue is related to that you are adding ListView inside ListView.builder but you can use Row and horizontally scrolling instead:

    return Scaffold(
  appBar: AppBar(),
  body: _users == null || _users!.isEmpty
      ? const Center(
          child: CircularProgressIndicator(),
        )
      : Row(
          children: _users.map((user) => Card(
              child: Column(
                children: [
                  Text(user.name.toString()),
                  ListView.builder(
                    physics: ScrollPhysics(),
                    shrinkWrap: true,
                    primary: false,
                    itemCount: user.chart.length,
                    itemBuilder: (BuildContext ctx, int j) {
                      return Text(user.chart[j].ch_timestamp);
                    },
                  ),
                ],
              ),
            ),
          ).toList(),
        ),
);

    happy coding…

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

Back To Top
Search