Flutter弹窗提示插件alerter的使用
Flutter弹窗提示插件alerter的使用
Alerter
Alerter 是一个 Flutter 插件,用于显示自定义的 Snackbar 或 Toast 提示。它高度可定制且易于集成。
使用方法
要在项目中使用 alerter
,首先需要在 pubspec.yaml
文件中添加依赖:
dependencies:
alerter: ^1.0.0
然后在 Dart 文件中导入 alerter
包:
import 'package:alerter/alerter.dart';
你可以通过以下方式使用 Alerter
:
void showAlerter() {
Alerter.show(
context,
title: 'This is title',
message: 'This is a message.',
icon: Icons.check_circle,
position: OverlayPosition.bottom,
);
}
示例代码
以下是一个完整的示例代码,展示了如何在不同的情况下使用 Alerter
:
import 'package:alerter/alerter.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const AlerterExample(),
);
}
}
class AlerterExample extends StatefulWidget {
const AlerterExample({super.key});
@override
State<AlerterExample> createState() => _AlerterExampleState();
}
class _AlerterExampleState extends State<AlerterExample> {
void showTopAlerter() {
Alerter.show(
context,
title: 'Top Alert',
message: 'This is a message.',
position: OverlayPosition.top,
icon: Icons.check_circle,
);
}
void showBottomAlerter() {
Alerter.show(
context,
position: OverlayPosition.bottom,
title: 'Bottom Alert',
message: 'This is a message.',
icon: Icons.check_circle,
);
}
void showTextOnlyAlerter() {
Alerter.show(
context,
title: 'Text Only Alert',
message: 'This is a message.',
);
}
void showMessageOnlyAlerter() {
Alerter.show(
context,
message: 'This is a message.',
);
}
void showColorfulAlerter() {
Alerter.show(
context,
title: 'Colorful Alert',
message: 'This is a message.',
icon: Icons.check_circle,
backgroundColor: Colors.green,
iconColor: Colors.black,
textColor: Colors.white,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Alerter Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: showTopAlerter,
child: const Text('Top Alerter'),
),
ElevatedButton(
onPressed: showBottomAlerter,
child: const Text('Bottom Alerter'),
),
ElevatedButton(
onPressed: showTextOnlyAlerter,
child: const Text('Text Only Alerter'),
),
ElevatedButton(
onPressed: showMessageOnlyAlerter,
child: const Text('Message Only Alerter'),
),
ElevatedButton(
onPressed: showColorfulAlerter,
child: const Text('Colorful Alerter'),
),
],
),
),
);
}
}
属性
属性 | 描述 | 默认值 |
---|---|---|
context | BuildContext | Required |
message | Alerter 消息 | Required |
title | Alerter 标题 | null |
backgroundColor | Alerter 背景颜色 | black87 |
textColor | Alerter 文本颜色 | white |
iconColor | Alerter 图标颜色 | white |
icon | Alerter 图标 | null |
iconSize | 图标大小(如果提供了图标) | 35 |
isIconAnimated | 图标是否动画 | true |
duration | Alerter 显示时长 | OverlayDuration.normal |
position | Alerter 位置 | OverlayPosition.bottom |
贡献
欢迎对 alerter
包进行贡献,例如提交 PR 或 Issues。
更多关于Flutter弹窗提示插件alerter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter弹窗提示插件alerter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter中使用alerter
插件来创建弹窗提示的示例代码。alerter
是一个流行的Flutter包,用于显示自定义的弹窗提示。
首先,确保你已经在pubspec.yaml
文件中添加了alerter
依赖:
dependencies:
flutter:
sdk: flutter
alerter: ^2.0.0 # 确保版本号是最新的
然后运行flutter pub get
来安装依赖。
接下来,你可以在你的Flutter应用中使用Alerter
控件来显示弹窗提示。以下是一个完整的示例,展示了如何使用alerter
:
import 'package:flutter/material.dart';
import 'package:alerter/alerter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Alerter Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final AlerterController _alerterController = AlerterController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Alerter Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
_showSuccessAlert(context);
},
child: Text('Show Success Alert'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showErrorAlert(context);
},
child: Text('Show Error Alert'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showInfoAlert(context);
},
child: Text('Show Info Alert'),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_alerterController.hideAll(); // Hide all alerts
},
tooltip: 'Hide All Alerts',
child: Icon(Icons.clear),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
_showCustomAlert(context);
},
),
],
),
),
),
);
}
void _showSuccessAlert(BuildContext context) {
Alerter.show(
context: context,
type: AlerterType.success,
title: 'Success',
desc: 'This is a success alert!',
duration: Duration(seconds: 3),
);
}
void _showErrorAlert(BuildContext context) {
Alerter.show(
context: context,
type: AlerterType.error,
title: 'Error',
desc: 'This is an error alert!',
duration: Duration(seconds: 3),
);
}
void _showInfoAlert(BuildContext context) {
Alerter.show(
context: context,
type: AlerterType.info,
title: 'Info',
desc: 'This is an info alert!',
duration: Duration(seconds: 3),
);
}
void _showCustomAlert(BuildContext context) {
Alerter.show(
context: context,
type: AlerterType.custom,
style: AlerterStyle(
backgroundColor: Colors.amber,
animationType: AlerterAnimationType.fromTop,
isDismissible: true,
duration: Duration(seconds: 3),
icon: Icon(Icons.star, color: Colors.black),
),
title: 'Custom',
desc: 'This is a custom alert!',
);
}
@override
void dispose() {
_alerterController.dispose();
super.dispose();
}
}
在这个示例中,我们创建了一个简单的Flutter应用,其中包含四个按钮,每个按钮都会显示不同类型的弹窗提示(成功、错误、信息和自定义)。
_showSuccessAlert
方法显示一个成功类型的弹窗提示。_showErrorAlert
方法显示一个错误类型的弹窗提示。_showInfoAlert
方法显示一个信息类型的弹窗提示。_showCustomAlert
方法显示一个自定义样式的弹窗提示。
我们还添加了一个浮动操作按钮(FAB),用于隐藏所有弹窗提示。
请注意,AlerterController
用于管理弹窗提示的生命周期,在dispose
方法中调用_alerterController.dispose()
来释放资源。
希望这个示例代码能帮助你理解如何在Flutter中使用alerter
插件来创建弹窗提示。