Как создать модальный нижний лист с круглыми углами во Flutter?

Это необходимая функция modalBottomSheet.

    void _modalBottomSheetMenu(){
        showModalBottomSheet(
            context: context,
            builder: (builder){
              return new Container(
                height: 350.0,
                color: Colors.transparent, //could change this to Color(0xFF737373), 
                           //so you don't have to change MaterialApp canvasColor
                child: new Container(
                    decoration: new BoxDecoration(
                        color: Colors.white,
                        borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(10.0),
                            topRight: const Radius.circular(10.0))),
                    child: new Center(
                      child: new Text("This is a modal sheet"),
                    )),
              );
            }
        );
      }

Также наиболее важной частью правильной работы является то, что в MaterialApp установите для свойства canvasColor значение transparent, как показано ниже.

return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tasks',
      theme: new ThemeData(
        primarySwatch: Colors.teal,
        canvasColor: Colors.transparent,
      ),
      home: new TasksHomePage(),
    );
  }

Я протестировал код, и он отлично работает, так как я также делал клон приложения Google Tasks, исходный код которого будет открыт в моем github < / а>.

ОБНОВЛЕНО 2019-08-05

Теперь вы можете сделать это, используя метод showModalBottomSheet по умолчанию, который теперь поддерживает добавление ShapeBorder, а также backgroundColor!

showModalBottomSheet(
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10.0),
  ),
  backgroundColor: Colors.white,
  ...
);

--

Вместо того, чтобы переопределить всю тему приложения (что вызывало проблемы в различных частях моего приложения), как было предложено другими ответами, я решил взглянуть на реализацию для showModalBottomSheet и сам найти проблему. Оказывается, все, что было нужно, - это обернуть основной код модального окна в виджет Theme, содержащий трюк canvasColor: Colors.transparent. Я также упростил настройку радиуса, а также цвета самого модального окна.

Вы можете использовать либо пакет в pub, либо gist, содержащий тот же код. Не забудьте импортировать нужный пакет / файл.

showRoundedModalBottomSheet(
    context: context,
    radius: 20.0,  // This is the default
    color: Colors.white,  // Also default
    builder: (context) => ???,
);

Я думаю, что лучший способ сделать модальное окно с закругленными углами - использовать RoundedRectangleBorder с вертикальным BorderRadius, установив только его свойство top:

showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
        ),
        builder: (BuildContext context) {
          // return your layout
        });

Использование отдельных радиусов для верхнего левого и верхнего правого угла может быть более подробным и подверженным ошибкам.

Теперь вы можете просто установить аргумент shape. Пример:

showModalBottomSheet(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
  context: context,
  builder: (context) => MyBottomSheet(),
);

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

showBottomSheet(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(20),
            ),
          ),
          context: context,
          builder: (context) => Container(
                height: 250,

                child: new Container(
                    decoration: new BoxDecoration(
                        color: Theme.of(context).primaryColor,
                        borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(20.0),
                            topRight: const Radius.circular(20.0))),
                    child: new Center(
                      child: new Text("This is a modal sheet"),
                    )),
              ))

Собрав все ответы воедино, я смог добиться для этого наилучшего, на мой взгляд, результата.

showModalBottomSheet(
        context: context,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[     
              ListTile(
                leading: Icon(Icons.email),
                title: Text('Send email'),
                onTap: () {
                  print('Send email');
                },
              ),
              ListTile(
                leading: Icon(Icons.phone),
                title: Text('Call phone'),
                 onTap: () {
                    print('Call phone');
                  },
               ),                  
            ],
          );
        });

Вы можете добавить виджет RoundedRectangleBorder внутри showModalBottomSheet:

showModalBottomSheet<void>(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0)
        ),
    ),
)

Только что ответил на связанный вопрос

Вы можете добавить углы к вашему bottomSheet и расширить bottomSheet в соответствии с содержимым, присутствующим внутри него (не ограничиваясь половиной размера экрана)

ознакомьтесь с ответом здесь

https://stackoverflow.com/a/59541927/9236994

Вы также можете указать borderRadius в контейнере украшения.

 showModalBottomSheet(
                context: context,
                builder: (builder){
                  return  Container(
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                                topLeft: const Radius.circular(15.0),
                                topRight: const Radius.circular(15.0))),
                        child: Center(
                          child: Text("This is a modal sheet"),
                        ),
                  );
                }
            );