Flutter 交互组件
1.Flutter 交互组件
2.Flutter Andriod打包发布和更新前言
现在主流的交互方式是Toast和Dialog。细分下来就是
- message
- info
- success
- error
- warning
- loading
- confrim
- input
- select
这么多组件,纯自己手写肯定是不可能的,我个人的学习逻辑是能用框架就用框架。
fluttertoast 8.2.5
fluttertoast 8.2.5:https://pub.dev/packages/fluttertoast
FlutterToast只是一个简单的消息提示,实现的功能实在是太少了
flutter_smart_dialog
flutter_smart_dialog:https://pub.dev/packages/flutter_smart_dialog
flutter_smart_dialog
是一个国人开发的组件,文档还是挺详细的
这一次,解决Flutter Dialog的各种痛点!:https://juejin.cn/post/7026150456673959943
flutter_smart_dialog 文档:https://xdd666t.github.io/flutter_use/web/index.html#/smartDialog
但是我用的时候不知道为什么,不能自动导包,重启了好几次都不行,很奇怪
快速开始
引入
dependencies:
flutter_smart_dialog: ^4.9.3+2
初始化
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage,
// here
navigatorObservers: [FlutterSmartDialog.observer],
// here
builder: FlutterSmartDialog.init(),
);
}
}
使用
SmartDialog.showToast('test toast');
但是我用了一下,发现它没有把Confrim,Select,Input这三个常用的进行封装,所以我们还得用一下别的组件
Flutter 原生组件
Flutter-Dialog组件详解:https://juejin.cn/post/7036915754607837192
这部分我就之间上代码了,我这里用了异步封装了一下
import 'package:flutter/material.dart';
class MessageHelper {
static Future<bool> Confrim(
BuildContext context, String title, String message) async {
var result = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text(title),
content: Text(message),
actions: <Widget>[
TextButton(
child: Text(
'取消',
style: TextStyle(color: Colors.grey),
),
onPressed: () {
Navigator.pop(context, false);
}),
TextButton(
child: Text(
'确定',
style: TextStyle(color: Colors.blue),
),
onPressed: () {
Navigator.pop(context, true);
},
),
],
);
});
result ??= false;
return result as bool;
}
static Future<int> Select(
BuildContext context, String title, List<String> choices) async {
var children = <Widget>[];
for(var i = 0;i < choices.length;i++){
children.add(
SimpleDialogOption(
child: Text(choices[i]),
onPressed: () {
Navigator.pop(context, i);
},
),
);
if(i != choices.length -1){
children.add(Divider());
}
}
var result = await showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text(title),
children:children,
);
});
result ??= -1;
return result as int;
}
}
总结
Flutter 的生态还是很多的,感觉还行,写代码的时候,编译通过了,一般不会出现什么异常的错误,还能接受。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库