CODEWITHSUNDEEP
flutterflutter-layout
BHuelse
BHuelse

Reputation: 2981

ListView growing to big

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(),
      ]),

Upvotes: 2

Views: 634

Answers (1)

Kherel
Kherel

Reputation: 16187

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(),
    ],
  );
}

Upvotes: 3

Related Questions