1、AlertDialog
1、属性
AlertDialog AlertDialog({
Key? key,
Widget? icon, //图标
EdgeInsetsGeometry? iconPadding, //图标 padding
Color? iconColor, //图标颜色
Widget? title, //对话框标题组件
EdgeInsetsGeometry? titlePadding, // 标题填充
TextStyle? titleTextStyle, //标题文本样式
Widget? content, // 对话框内容组件
EdgeInsetsGeometry? contentPadding, //内容的填充
TextStyle? contentTextStyle, // 内容文本样式
List<Widget>? actions, // 对话框操作按钮组
EdgeInsetsGeometry? actionsPadding, //事件子控件间距，默认为 EdgeInsets.zero,
MainAxisAlignment? actionsAlignment, //事件子控件对齐方式
OverflowBarAlignment? actionsOverflowAlignment, //事件子控件垂直排列时对齐方式
VerticalDirection? actionsOverflowDirection, //事件过多时，竖向展示顺序，只有正向和反向，默认为 VerticalDirection.down
double? actionsOverflowButtonSpacing, //事件过多时，竖向展示时，子控件间距
EdgeInsetsGeometry? buttonPadding, //actions 中每个按钮边缘填充距离，默认左右各 8.0
Color? backgroundColor, // 对话框背景色
double? elevation, // 对话框的阴影
Color? shadowColor, //阴影颜色
Color? surfaceTintColor, //背景色
String? semanticLabel, //对话框语义化标签(用于读屏软件)
EdgeInsets insetPadding = _defaultInsetPadding, //对话框距离屏幕边缘间距，默认为 EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0)
Clip clipBehavior = Clip.none, //超出部分剪切方式，Clip.none
ShapeBorder? shape, // 对话框外形
AlignmentGeometry? alignment, //子控件对齐方式
bool scrollable = false, //是否可以滚动，默认为 false
})
2、使用示例
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("弹框"),
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
const SizedBox(
height: 30,
),
//显示 AlertDialog 弹框
OutlinedButton(
onPressed: () {
_alertDialog(context);
},
child: const Text("AlertDialog")),
const SizedBox(
height: 30,
),
],
),
),
);
}
}
///AlertDialog 弹框
void _alertDialog(BuildContext context) async {
var result = await showDialog(
barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return AlertDialog(
// backgroundColor: Colors.green,
icon: const Icon(Icons.home),
iconColor: Colors.green,
title: const Text("提示信息!"),
content: const Text("您确定要删除吗?"),
// contentTextStyle: const TextStyle(color: Colors.grey),
actions: <Widget>[
TextButton(
child: const Text("取消"),
onPressed: () {
Navigator.pop(context, 'Cancle');
},
),
TextButton(
child: const Text("确定"),
onPressed: () {
Navigator.pop(context, "Ok");
},
)
],
);
});
print(result);
}
2、SimpleDialog、SimpleDialogOption
1、属性
SimpleDialog SimpleDialog({
Key? key,
Widget? title, //标题
EdgeInsetsGeometry titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0), //标题内边距
TextStyle? titleTextStyle, //标题样式
List<Widget>? children, //子节点
EdgeInsetsGeometry contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0), //内容内边距
Color? backgroundColor, //背景色
double? elevation, //阴影
Color? shadowColor, //阴影颜色
Color? surfaceTintColor, //背景色
String? semanticLabel, //对话框语义化标签(用于读屏软件)
EdgeInsets insetPadding = _defaultInsetPadding,
Clip clipBehavior = Clip.none, //超出部分剪切方式，Clip.none
ShapeBorder? shape, //形状
AlignmentGeometry? alignment, //子控件对齐方式
})
SimpleDialogOption SimpleDialogOption({
Key? key,
void Function()? onPressed, //点击事件
EdgeInsets? padding, //内边距
Widget? child, //子节点
})
2、使用
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("弹框"),
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
const SizedBox(
height: 50,
),
//显示 SimpleDialog 弹框
OutlinedButton(onPressed: () {
_simpleDialog(context);
}, child: const Text("SimpleDialog")),
const SizedBox(
height: 30,
),
],
),
),
);
}
}
///SimpleDialog 弹框
void _simpleDialog(BuildContext context) async {
var result = await showDialog(
barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return SimpleDialog(
title: const Text("请选择内容"),
children: <Widget>[
SimpleDialogOption(
child: const Text("Option A"),
onPressed: () {
Navigator.pop(context, "A");
},
),
const Divider(),
SimpleDialogOption(
child: const Text("Option B"),
onPressed: () {
Navigator.pop(context, "B");
},
),
const Divider(),
SimpleDialogOption(
child: const Text("Option C"),
onPressed: () {
Navigator.pop(context, "C");
},
),
],
);
});
print(result);
}
3、底部弹框（showModalBottomSheet）
1、属性
Future<T?> showModalBottomSheet<T>({
required BuildContext context, //上下文
required Widget Function(BuildContext) builder, //构造内容
Color? backgroundColor, //背景颜色指的是显示内容下面的颜色，要设置圆角弹窗，该项使用null，默认是灰白色，根据系统主题
double? elevation, //阴影高度
ShapeBorder? shape, //边线，可以指定单边或者多边，还可以是圆形的，ShapeBorder的子类都可以，还可以设置圆角
Clip? clipBehavior, //widget 剪裁模式，分 none、hardEdge、antiAlias、antiAliasWithSaveLayer，效率依次降低，效果依次提高
BoxConstraints? constraints, //宽高约束
Color? barrierColor, //蒙版颜色，就是遮住原页面内容的半透明黑色，默认是Colors.black54
bool isScrollControlled = false, //是否可滚动，用于调整内容部分的高度的模式
bool useRootNavigator = false, //是否使用跟路由
bool isDismissible = true, //点击外部区域是否关闭弹窗，默认true
bool enableDrag = true, //启用拖拽功能，拖动弹窗关闭，默认true
bool? showDragHandle, //是否显示顶部的拖动条
bool useSafeArea = false, //是否使用用安全区
RouteSettings? routeSettings, //设置路由
AnimationController? transitionAnimationController, //动画控制器
Offset? anchorPoint, //锚点 可以使整个弹出框位置发生偏移
})
2、使用示例
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("弹框"),
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
const SizedBox(
height: 50,
),
//显示 showModalBottomSheet 弹框
OutlinedButton(
onPressed: () {
_modelBottomSheet(context);
},
child: const Text("showModalBottomSheet")),
const SizedBox(
height: 30,
),
],
),
),
);
}
}
///底部弹框 showModalBottomSheet
void _modelBottomSheet(BuildContext context) async {
var result = await showModalBottomSheet(
context: context,
builder: (context) {
return SizedBox(
height: 300,
child: Column(
children: [
const SizedBox(
height: 50,
child: Center(
child: Text("分享",style: TextStyle(fontSize: 30,color: Colors.black),),
),
),
const Divider(),
ListTile(
title: const Text("A"),
onTap: () {
Navigator.pop(context, "A");
},
),
const Divider(),
ListTile(
title: const Text("B"),
onTap: () {
Navigator.pop(context, "B");
},
),
const Divider(),
ListTile(
title: const Text("C"),
onTap: () {
Navigator.pop(context, "C");
},
),
const Divider(),
],
),
);
});
print(result);
}
4、CupertinoAlertDialog IOS 风格对话框
CupertinoAlertDialog 和 AlertDialog 在使用上没有什么区别，需要注意的是使用 IOS 风格的 actions 时也得使用 IOS 风格的 CupertinoDialogAction 组件。
1、属性
CupertinoAlertDialog CupertinoAlertDialog({
Key? key,
Widget? title, //组件的标题
Widget? content, //标题的内容
List<Widget> actions = const <Widget>[], //组件中包含的操作组件，不能为空
ScrollController? scrollController, //内容滚动控制器
ScrollController? actionScrollController, //操作组件滚动控制器
Duration insetAnimationDuration = const Duration(milliseconds: 100), //动画时长
Curve insetAnimationCurve = Curves.decelerate, //动画显示的曲线
})
2、使用示例
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("弹框"),
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
const SizedBox(
height: 50,
),
///CupertinoAlertDialog
OutlinedButton(
onPressed: () {
_showCupertinoAlertDialog(context);
},
child: const Text("CupertinoAlertDialog")),
const SizedBox(
height: 30,
),
],
),
),
);
}
}
///CupertinoAlertDialog
void _showCupertinoAlertDialog(BuildContext context) async {
var result = await showDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: const Text("iOS 风格的对话框"),
content: const Column(
children: <Widget>[
SizedBox(
height: 10,
),
Align(
alignment: Alignment(0, 0),
child: Text("你确定不关注我吗？"),
),
],
),
actions: <Widget>[
CupertinoDialogAction(
child: const Text("取消"),
onPressed: () {
Navigator.pop(context, "取消");
},
),
CupertinoDialogAction(
child: const Text("确定"),
onPressed: () {
Navigator.pop(context, "确定");
},
),
],
);
});
print(result);
}
5、LinearProgressIndicator 条形进度条
LinearProgressIndicator 本身不能设置高度，但可以通过一层父容器设置高度来间接设置。
1、属性
LinearProgressIndicator LinearProgressIndicator({
Key? key,
double? value, //0~1的浮点数，用来表示进度值;如果 value 为 null 或空，则显示一个动画，否则显示一个定值
Color? backgroundColor, //背景颜色
Color? color, //
Animation<Color?>? valueColor, //用来设定进度值的颜色，默认为主题色
double? minHeight, //高度
String? semanticsLabel, //可用于标识此进度条的目的,以用于屏幕阅读软件
String? semanticsValue, //属性可用于确定进度指示器,指示已取得多少进度。
})
2、使用示例
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("弹框"),
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
const SizedBox(
height: 50,
),
///LinearProgressIndicator 进度条
const SizedBox(
height: 8.0,
width: 200,
child: LinearProgressIndicator(
//背景颜色
backgroundColor: Colors.yellow,
//进度颜色
valueColor: AlwaysStoppedAnimation<Color>(Colors.red)),
),
const SizedBox(
height: 30,
),
],
),
),
);
}
}
6、CircularProgressIndicator 圆形进度条
CircularProgressIndicator 本身不能设置高度，可以通过一层父容器设置高度来间接设置。
1、属性
(const) CircularProgressIndicator CircularProgressIndicator({
Key? key,
double? value, //0~1的浮点数，用来表示进度值;如果 value 为 null 或空，则显示一个动画，否则显示一个定值
Color? backgroundColor, //背景颜色
Color? color, //
Animation<Color?>? valueColor, //animation类型的参数，用来设定进度值的颜色，默认为主题色
double strokeWidth = 4.0, //可设置进度Bar 宽度
String? semanticsLabel, //可用于标识此进度条的目的,以用于屏幕阅读软件
String? semanticsValue, ///属性可用于确定进度指示器,指示已取得多少进度。
})
2、使用示例
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("弹框"),
backgroundColor: Colors.green,
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
const SizedBox(
height: 50,
),
///CircularProgressIndicator
const SizedBox(
//限制进度条的高度
height: 40.0,
//限制进度条的宽度
width: 40,
child: CircularProgressIndicator(
strokeWidth: 3,
//背景颜色
backgroundColor: Colors.yellow,
//进度颜色
valueColor: AlwaysStoppedAnimation<Color>(Colors.red)),
),
const SizedBox(
height: 30,
),
],
),
),
);
}
}
7、Toast
1、fluttertoast 使用
1、使用第三方 fluttertoast。fluttertoast >>>
2、在 pubspec.yaml 中的 dependencies: 中导入版本号：fluttertoast: ^8.0.9，然后点击 command+s 保存（会自动下载）。
3、在使用地方导入头文件
import 'package:fluttertoast/fluttertoast.dart';
4、使用
OutlinedButton(
onPressed: () {
Fluttertoast.showToast(
msg: "提示信息",
toastLength: Toast
.LENGTH_SHORT, //显示时间,只用在安卓平台,LENGTH_SHORT~1s,LENGTH_LONG~5s
gravity: ToastGravity.BOTTOM, //显示位置
timeInSecForIosWeb: 1, //显示时间,只在 ios 和 web
backgroundColor: Colors.black, //背景色
textColor: Colors.white, //文本颜色
fontSize: 16.0 //字体大小
);
},
child: const Text("Toast")),
2、ftoast
1、ftoast >>>
2、在 pubspec.yaml 中的 dependencies: 中导入版本号：ftoast: ^2.0.0，然后点击 command+s 保存（会自动下载）。
3、在使用地方导入头文件
import 'package:ftoast/ftoast.dart';
4、使用
OutlinedButton(
onPressed: () {
FToast.toast(
context,
msg: "This is Msg",
subMsg: "Welcome to use FToast. This is subMsg!",
subMsgStyle:
const TextStyle(color: Colors.white, fontSize: 13),
);
},
child: const Text("Toast")),
