设置应用程序入口
当我们导入依赖后,在应用程序顶层把 GetMaterialApp 作为顶层,如下所示
import 'package:flutter/material.dart'; import 'package:get/get.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: "GetX", home: Scaffold( appBar: AppBar( title: Text("GetX Title"), ), ), ); } }
Dialog弹框
Dialog属性和说明
调用defaultDialog
class GetxPage extends StatefulWidget { const GetxPage({super.key}); @override State<GetxPage> createState() => _GetxPageState(); } class _GetxPageState extends State<GetxPage> { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () { Get.defaultDialog( title: "提示信息", middleText: "你确定删除吗", confirm: ElevatedButton( onPressed: () { print("确定"); Get.back(); //返回 }, child: const Text("确定")), cancel: ElevatedButton( onPressed: () { print("取消"); Get.back(); //返回 }, child: const Text("取消"))); }, child: const Text("Getx defaultDialog")), ], ), ); } }
snackbar提示信息
Snackbar属性和说明
调用snackbar
Snackbar 和我们前面讲的toast有点相似, 如果想在应用程序中触发某些特定的事件后,需要弹出快
捷消息,那么使用 Snackbar 则是最佳的选择。
ElevatedButton( onPressed: () { Get.snackbar("Snackbar 标题", "欢迎使用Snackbar"); }, child: const Text("Getx snackbar")),
BottomSheet 改变主题
BottomSheet属性和说明
调用snackbar
我们可以通过 GetX 很轻松的调用 bottomSheet() ,而且无需传入 context ,下面我给出一个例子,
使用 GetX 弹出 bottomSheet 并很轻松的实现切换主题 。
我们可以通过 Get.bottomSheet() 来显示 BottomSheet ,通过 Get.back() 实现路由返回,通过
Get.changeTheme(ThemeData.dark()) 切换皮肤主题,通过Get.isDarkMode判断主题样式。
class GetxPage extends StatefulWidget { const GetxPage({super.key}); @override State<GetxPage> createState() => _GetxPageState(); } class _GetxPageState extends State<GetxPage> { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () { // 弹出底部菜单 Get.bottomSheet(Container( color: Get.isDarkMode ? Colors.black12 : Colors.white, height: 200, child: Column( children: [ // 白天模式列表项 ListTile( leading: Icon(Icons.wb_sunny_outlined, color: Get.isDarkMode ? Colors.white : Colors.black), title: Text("白天模式", style: TextStyle( color: Get.isDarkMode ? Colors.white : Colors.black)), onTap: () { // 切换为白天模式 Get.changeTheme(ThemeData.light()); // 关闭底部菜单 Get.back(); print("切换主题为白天模式"); }, ), // 晚上模式列表项 ListTile( leading: Icon(Icons.wb_sunny, color: Get.isDarkMode ? Colors.white : Colors.black), title: Text("黑夜模式", style: TextStyle( color: Get.isDarkMode ? Colors.white : Colors.black)), onTap: () { // 切换为晚上模式 Get.changeTheme(ThemeData.dark()); // 关闭底部菜单 Get.back(); print("切换主题为晚上模式"); }, ) ], ), )); }, child: const Text("使用 Getx.bottomSheet 切换主题")), Text("这是一个字"), ], ), ); } }
分类:
Flutter
, Flutter+GetX 状态管理
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!