Flutter自定义弹窗提示插件custom_alert_snackbar的使用
Flutter 自定义弹窗提示插件 custom_alert_snackbar 的使用
Custom_Alert_Snackbar 是一个简单且优雅的方式来生成个性化的提示。
它只需要在函数内调用，并传递四个参数值
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum',
textAlign: TextAlign.left,
alignCenter: false
);
}, child: const Text("model 0"))
一切都可以自定义，从颜色、图标、渐变、水印、字体样式等
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum',
backgrounds: Colors.amber,
color: Colors.amber,
titleColor: Colors.black,
textColor: Colors.black,
icons: Icons.error,
iconColor: Colors.black,
backgroundImage: false,
degradeIcon: false,
assetsImage: "assets/01.png"
);
}, child: const Text("model 2")),
一些可以实现的图片效果
示例代码
import 'package:custom_alert_snackbar/custom_alert_snackbar.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum',
textAlign: TextAlign.left,
alignCenter: false
);
}, child: const Text("model 0")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum',
titleColor: Colors.white
);
}, child: const Text("model 1")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum',
backgrounds: Colors.amber,
color: Colors.amber,
titleColor: Colors.black,
textColor: Colors.black,
icons: Icons.error,
iconColor: Colors.black,
degradeIcon: false,
assetsImage: "assets/01.png"
);
}, child: const Text("model 2")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survive',
backgrounds: const Color.fromARGB(255, 255, 179, 0),
color: const Color.fromARGB(255, 252, 130, 0),
titleColor: Colors.black,
textColor: Colors.black,
icons: Icons.error,
iconColor: Colors.black,
alignCenter: false,
textAlign: TextAlign.left
);
}, child: const Text("model 3")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survive',
backgrounds: Colors.amber,
color: Colors.amber,
titleColor: Colors.black,
textColor: Colors.black,
icons: Icons.error,
iconColor: Colors.black,
backgroundImage: false,
degradeIcon: false
);
}, child: const Text("model 4")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survive',
backgrounds: Colors.amber,
color: Colors.amber,
titleColor: Colors.black,
textColor: Colors.black,
icons: Icons.error,
iconColor: Colors.black,
backgroundImage: false,
round: false
);
}, child: const Text("model 5")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survive',
backgrounds: Colors.amber,
color: const Color.fromARGB(255, 0, 148, 5),
titleColor: Colors.white,
textColor: Colors.white,
icons: Icons.error,
iconColor: Colors.white,
round: false,
assetsImage: "assets/02.png"
);
}, child: const Text("model 6")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survive',
backgrounds: Colors.green,
color: const Color.fromARGB(255, 0, 148, 5),
titleColor: Colors.white,
textColor: Colors.white,
icons: Icons.error,
iconColor: Colors.white,
round: false,
assetsImage: "assets/03.png"
);
}, child: const Text("model 7")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survive',
backgrounds: Colors.green,
color: const Color.fromARGB(255, 0, 148, 5),
titleColor: Colors.white,
textColor: Colors.white,
icons: Icons.error,
iconColor: Colors.white,
round: false,
assetsImage: "assets/05.png"
);
}, child: const Text("model 8")),
ElevatedButton(onPressed: (){
CustomAlertSnack.init(
context,
size: MediaQuery.sizeOf(context),
title: 'MEU TESTE',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survive',
backgrounds: Colors.amber,
color: Colors.amber,
titleColor: Colors.white,
textColor: Colors.white,
icons: Icons.error,
iconColor: Colors.white,
round: false,
assetsImage: "assets/06.png"
);
}, child: const Text("model 9")),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
},
child: const Icon(Icons.navigation),
)
);
}
}
更多关于Flutter自定义弹窗提示插件custom_alert_snackbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义弹窗提示插件custom_alert_snackbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用custom_alert_snackbar插件的示例代码。这个插件允许你创建自定义的弹窗提示，可以替代Flutter默认的Snackbar。
首先，确保你已经在pubspec.yaml文件中添加了custom_alert_snackbar依赖：
dependencies:
flutter:
sdk: flutter
custom_alert_snackbar: ^x.y.z # 请使用最新版本号替换x.y.z
然后，运行以下命令以安装依赖：
flutter pub get
接下来，你可以在代码中使用CustomAlertSnackbar来显示自定义的弹窗提示。以下是一个完整的示例：
import 'package:flutter/material.dart';
import 'package:custom_alert_snackbar/custom_alert_snackbar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Alert Snackbar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void showCustomAlertSnackbar() {
CustomAlertSnackbar.show(
context: context,
title: "Title",
subTitle: "This is a custom alert snackbar!",
duration: Duration(seconds: 3), // 显示时长
backgroundColor: Colors.blue.withOpacity(0.9),
textColor: Colors.white,
buttonText: "OK",
onButtonPressed: () {
// 按钮点击回调
print("Button pressed!");
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Custom Alert Snackbar Demo"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You can tap the button to show a custom alert snackbar!',
),
SizedBox(height: 20),
ElevatedButton(
onPressed: showCustomAlertSnackbar,
child: Text('Show Custom Alert Snackbar'),
),
],
),
),
);
}
}
在这个示例中，我们定义了一个简单的Flutter应用，包含一个按钮。当按钮被点击时，会调用showCustomAlertSnackbar方法，显示一个自定义的弹窗提示。
CustomAlertSnackbar.show方法接受多个参数，允许你自定义标题、子标题、显示时长、背景颜色、文本颜色以及按钮文本和按钮点击回调。
确保你使用了正确的custom_alert_snackbar版本，并根据需要进行调整。这样你就可以在你的Flutter项目中轻松地使用自定义弹窗提示了。
