Flutter flexible alert dialog list

Question

I'm trying to create a dialog which has a scrollable list in it.

My issues are

1. When too few items the dialog doesn't shrink to fit.
2. When the list is too large the buttons are overflown.
3. The list somehow doesn't scroll freely and keep moving to its initial position.

Code:

  show(){
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
            elevation: constants.dElevation,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(constants.dRadius),
            ),
            title: Text("title"),
            content: getAllSelectedShipments());
      },
    );
  }

  Widget getAllSelectedShipments() {

    return Container(
        width: 300.0, // Change as per your requirement
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            UtilUI.getColorScaffold(
              constants,
              constants.transparent,
              ListView.separated(
                shrinkWrap: true,
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    leading: Icon(Icons.location_on),
                    title: Text("title $index"),
                    subtitle: Text("subtitle $index"),,
                    onTap: () async {},
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider();
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                UtilUI.getButtonSmall(context, constants, Icons.cancel,
                    constants.sCancel, (constants) => null),
                UtilUI.getButtonSmall(context, constants, Icons.check,
                    constants.sDone, (constants) => null),
              ],
            )
          ],
        ));
  }

When too few items

When too many items

Answer 1

Use Center and give width and height to double.infinity then give margin to your need. Use Expanded on list-view to give it max height.

By doing that center will take all height and width given by your container. Then you don't have to worry about pixels overflowing.

 Widget getAllSelectedShipments() {
    return Center(
        child: Container(
          height: double.infinity,
          width: double.infinity,
          margin: EdgeInsets.fromLTRB(20, 50, 20, 50),
          child: Scaffold(
              body: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Expanded(
                        child: ListView.separated(
                          shrinkWrap: true,
                          itemCount: 10,
                          itemBuilder: (BuildContext context, int index) {
                            return ListTile(
                              leading: Icon(Icons.location_on),
                              title: Text("title $index"),
                              subtitle: Text("subtitle $index"),
                              onTap: () async {},
                            );
                          },
                          separatorBuilder: (context, index) {
                            return Divider();
                          },
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Icon(Icons.cancel),
                          Icon(Icons.check),
                        ],
                      )
                    ],
                  ))),
        ));
  }

Don't use content in AlertDialog instead use Scaffold to give customized view.

 showDialog(
                context: context,
                builder: (BuildContext context) {
                  return getAllSelectedShipments();
                },
              ); 

Answer 2

Try these !

add mainAxisSize:MainAxisSize.min, to Column widget

and wrap ListView with Flexible

and wrap Row children with Expanded