BottomSheet介绍

BottomSheet 是底部弹出的一个组件，常用于单选、验证码二次校验弹窗等，GetX的BottomSheet底部弹出是自定义通过路由push的方法实现底部弹窗的一个效果。

BottomSheet使用

我们可以通过GetX很轻松的调用bottomSheet()，而且无需传入context，下面我给出一个例子，使用GetX弹出bottomSheet并很轻松的实现切换主题

第一步：应用程序入口设置

当我们导入依赖后，在应用程序顶层把GetMaterialApp 作为顶层，如下所示

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/DialogExample/DialogExample.dart';
import 'package:get/get.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(title: "GetX",home: DialogExample(),);}
}

第二步：调用BottomSheet

我们可以通过Get.bottomSheet() 来显示 BottomSheet ，如下所示

import 'package:flutter/material.dart';
import 'package:get/get.dart';class BottomSheetExample extends StatelessWidget {GlobalKey _navKey = GlobalKey();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GetX Title"),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [ElevatedButton(onPressed: () {Get.bottomSheet(Container(child: Wrap(children: [ListTile(leading: Icon(Icons.wb_sunny_outlined),title: Text("白天模式"),onTap: () {Get.changeTheme(ThemeData.light());},),ListTile(leading: Icon(Icons.wb_sunny),title: Text("黑夜模式"),onTap: () {Get.changeTheme(ThemeData.dark());},)],),));}, child: Text("Bottom Sheet"))],),),);}
}

效果展示

BottomSheet属性和说明