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

Question

showModalBottomSheet не предоставляет стилизации или оформления.Я хочу создать что-то вроде нижнего листа Google Tasks.

Answer 1

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

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

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

-

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

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

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

Answer 2

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

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

Answer 3

Это необходимая функция 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 на прозрачный, как показано ниже.

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

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