showModalBottomSheet не предоставляет стилей и украшений. Я хочу создать что-то вроде сводной таблицы задач Google.
Как создать модальный нижний лист с круговыми углами в Flutter?
Ответ 1
Это необходимая функция 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.
Ответ 2
ОБНОВЛЕНО 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) => ???,
);
Ответ 3
Теперь вы можете просто установить аргумент shape
. Пример:
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
context: context,
builder: (context) => MyBottomSheet(),
);
Ответ 4
Собрав воедино все ответы, я смог добиться наилучшего (на мой взгляд) результата для этого.
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');
},
),
],
);
});
Ответ 5
Или просто установите
backgroundColor
Параметр для прозрачного
void _modalBottomSheetMenu() {
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (builder) {
return new Container(
height: 200,
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"),
));
});
}
}