Flutter - класс BottomSheet
Нижний лист - один из популярных способов отображения различных параметров на экране. Это помогает пользователю переключиться на новый экран. Вы увидите этот нижний лист в большей части приложения, чтобы добавить данные или добавить некоторую информацию, такую как адрес или номер билета. В этой статье мы увидим, как реализовать Bottom Sheet в нашем приложении Flutter.
Конструктор класса BottomSheet:
BottomSheet ({Key key,
AnimationController animationController,
bool enableDrag: true,
BottomSheetDragStartHandler onDragStart,
BottomSheetDragEndHandler onDragEnd,
Цвет фона
двойное возвышение,
Форма границы,
Клип clipBehavior,
@требуется
VoidCallback при закрытии,
@требуется
WidgetBuilder builder})Свойства класса BottomSheet:
- backgroundColor: используется для придания цвета фона нижнему листу.
- Высота: используется для повышения нашего нижнего листа.
- Builder: он предоставляет построитель для содержимого листа.
- clipBehaviour: используется для обрезки содержимого листа, как указано.
- enableDrag: если true, нижний лист можно перетащить вверх и вниз и закрыть, проведя пальцем вниз.
- hashCode: представляет хэш-код объекта.
- ключ: он используется для обработки того, как один виджет заменяет другой виджет в дереве.
- onClosing: используется для назначения действия при закрытии нижнего листа.
- onDragEnd: вызывается, когда пользователь перестает перетаскивать нижний лист.
- onDragStart: вызывается, когда пользователь начинает перетаскивать нижний лист.
- runTimeType: представление типа среды выполнения объекта.
- shape: определяет форму нижнего листа.
Теперь давайте посмотрим на реализацию Bottom sheet. Чтобы реализовать нижний лист во Flutter, вам необходимо выполнить следующие шаги:
Шаг 1. Перейдите к файлу main.dart () и верните приложение Material ().
Сначала мы объявили MyApp () в runApp в основной функции. Затем мы создали StatefullWidget для MyApp, в котором вернули MaterialApp (). В этом MaterialApp () мы дали название нашему приложению, а затем объявили тему нашего приложения как темную тему. Затем мы разместили наш первый экран или приложение-слайдер дома: HomePage ()
Дротик
void main() { runApp(MyApp());} class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , title: 'Flutter Demo' , theme: ThemeData( primarySwatch: Colors.green, ), //First Screen of our App home: HomePage(), ); }} |
Создайте StatefulWidget ():
Создайте StatefulWidget, который предоставляет базовую структуру приложению, используя приведенный ниже код. В этом коде сначала мы создали StatefulWidget для HomePage (). И в этой HomePage () мы вернули виджет Scaffold ().
Шаг 2: Создайте нижний лист
В этом виджете Scaffold мы дали панель приложений, в которой мы дали название панели приложений . После этого в теле мы объявили Container (), который обернут центральным виджетом и получил образец текста как «Hello».
Дротик
class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState();} class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( //Appbar along with Title appBar: AppBar( title: Text( "Bottom Sheet" ), ), body:Center( //Sample Text Written in Center of Screen child: Container( child: Text( "Hello" ), ), ), ); }} |
Шаг 3. Создайте и добавьте кнопку FloatingAction
Теперь создайте Floating кнопку Действие, а затем мы назначили floatingactionButton и дали значок добавления на эту кнопку. А в методе on Pressed мы объявили showModalBottomSheet (). Затем мы предоставили в нем виджет-контейнер, который обернут в виджет SingleChildScrollView () . Которая используется для прокрутки содержимого нижнего листа. Мы снова объявили Контейнер () для нижнего листа, в котором мы задали радиус границы для верхнего правого и верхнего левого углов, чтобы сделать этот Контейнер круглым.
Дротик
//Floating Action Button floatingActionButton: FloatingActionButton( child: Icon(Icons.add, color: Colors.white), onPressed: (){ showModalBottomSheet(context: context, builder: (context){ //Scrolling given for content in Container() return SingleChildScrollView( child: Container( padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), child: Container( padding: EdgeInsets.all(20), decoration: BoxDecoration( borderRadius: BorderRadius.only( topRight: Radius.circular(20), topLeft: Radius.circular(20), ), ), |
Шаг 4. Создайте столбец для отображения содержимого
В этом Container () мы объявили виджет Column (), в котором мы дали его дочерним элементам. Сначала мы добавили текстовый заголовок в Container (). И после этого мы добавили TextField (). В этом TextField () мы дали InputDecoration (), который используется для объявления текста подсказки. Затем мы добавили границу как OutLineInputBorder (), которая используется для задания цвета стороны границы. Также мы можем сделать TextField круглым, добавив радиус границы в OutlineInputBorder (). После того, как мы предоставили RaisedButton (), в котором мы указали текст, написанный на кнопке, и цвет кнопки.
Дротик
//Create a Column to display it's content child: Column( children: [ Text( "Add Data" ,style: TextStyle(fontWeight: FontWeight.w600, color: Colors.green, fontSize: 20),), SizedBox(height: 10.0), // TextField for giving some Input TextField( decoration: InputDecoration( border: OutlineInputBorder( borderSide: BorderSide(color: Colors.green), ), hintText: "Add Item" , hintStyle: TextStyle(color: Colors.grey), ), ), SizedBox(height: 10), //Button for adding items RaisedButton( color: Colors.grey, child: Text( "ADD" ,style: TextStyle(color: Colors.white), ), ) ], ), |
Выход: