ListView growing to big

user_2286764 0
Viewed 266

I try to lay out some widgets including one ListView. I want the ListView fills the available space. If the ListView content is to bigger it should be scrollable. At the moment the ListView gets too big and the widgets growing out of the screen.

...
body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
        Card(
          child: Padding(
            padding: const EdgeInsets.all(2.0),
            child: Column(children: [
              Text('Text'),
              ListView.builder(
                shrinkWrap: true,
                physics: ClampingScrollPhysics(),
                itemBuilder: (BuildContext context, int index) => actionWidgetList[index],
                itemCount: actionList.length,
              ),
            ]),
          ),
        ),
        rangeInitialized
            ? Container(
                alignment: Alignment.bottomCenter,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width,
                child: another.widget,
              )
            : SizedBox(),
      ]),
flutter-layout flutter
1 Answers

If it's small widget, part of the bigger layout you probably you know the max height of the ListView

Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Card(
        child: Padding(
          padding: const EdgeInsets.all(2.0),
          child: Column(
            children: [
              Text('Text'),
              ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: 100
                ),
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: ClampingScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) =>
                      actionWidgetList[index],
                  itemCount: actionList.length,
                ),
              ),
            ],
          ),
        ),
      ),
      rangeInitialized
        ? Container(
            alignment: Alignment.bottomCenter,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.width,
            child: another.widget,
          )
        : SizedBox(),
    ],
  );
}

If the layout need to fill the whole screen you can use flexible widgets

   Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Flexible(
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(2.0),
            child: Column(
              children: [
                Text('Text'),
                Flexible(
                  child: ListView.builder(
                    // shrinkWrap: true,
                    physics: ClampingScrollPhysics(),
                    itemBuilder: (BuildContext context, int index) =>
                        actionWidgetList[index],
                    itemCount: actionList.length,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      rangeInitialized
        ? Container(
            alignment: Alignment.bottomCenter,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.width,
            child: another.widget,
          )
        : SizedBox(),
    ],
  );
}
user_55415230
Related