Flatter гибкий список диалогов

Question

Я пытаюсь создать диалог, в котором есть прокручиваемый список.

Мои проблемы:

1. Когда слишком мало элементов, диалоговое окно не уменьшается в размерах.
2. Когда список слишком велик, кнопки переполняются.
3. Список почему-то не прокручивается свободно и продолжает перемещаться в исходное положение.

Код:

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

Когда слишком мало элементов

Когда слишком много предметов

Answer 1

Попробуйте это!

добавьте mainAxisSize:MainAxisSize.min, к Column виджету

и оберните ListView с Flexible

и оберните Row детей с Expanded

Answer 2

Используйте Center и задайте ширину и высоту double.infinity, а затем задайте поле для ваших потребностей. Используйте Expanded для list-view, чтобы задать максимальную высоту.

При этом центр будет принимать всю высоту и ширину, заданную вашим контейнером. Тогда вам не нужно беспокоиться о переполнении пикселей.

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

Не используйте содержимое в AlertDialog, вместо этого используйте Scaffold, чтобы настроить изображение.

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