Flutter丰富界面组件插件awesome_widgets的使用
Flutter丰富界面组件插件awesome_widgets的使用
自定义的小部件和组件,可直接在您的项目中使用!
安装
在 pubspec.yaml
文件中添加以下依赖:
dependencies:
awesome_widgets: ^<最新版本>
小部件
1. Awesome Snackbar🔥
AwesomeSnackbar.style1(
duration: Duration(seconds: 10), // 持续时间
context: context, // 当前上下文
primaryColor: Colors.blue, // 主颜色
title: "Demo snackbar", // 标题
subTitle: "Demo description", // 子标题
titleTextstyle: TextStyle(color: KConstantColors.bgColor), // 标题样式
subtitleTextstyle: TextStyle(color: KConstantColors.bgColor, fontSize: 13), // 子标题样式
backgroundColor: Colors.white, // 背景颜色
iconData: Icons.check, // 图标
iconColor: Colors.white); // 图标颜色
2. Awesome TextField🔥
AwesomeTextfield.filled(
hintText: "Title", // 提示文本
textEditingController: textEditingController, // 文本控制器
fillColor: Colors.grey, // 填充颜色
),
3. Awesome Buttons🔥
AwesomeButton.roundedIconButton(
onTap: () { // 点击事件
// 执行操作
},
title: 'Create', // 按钮文本
),
更多关于Flutter丰富界面组件插件awesome_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter丰富界面组件插件awesome_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,awesome_widgets
是一个 Flutter 插件库,提供了许多丰富的界面组件,可以帮助开发者快速构建漂亮且功能强大的应用。以下是一些常见组件的使用示例代码。
1. AwesomeAlert
AwesomeAlert
是一个高度可定制的对话框组件。
import 'package:awesome_widgets/awesome_widgets.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Awesome Widgets Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
AwesomeAlert(
context: context,
animType: "slideFromTop",
title: "Alert",
desc: "This is an awesome alert!",
closeFunction: () {},
)..show();
},
child: Text('Show Alert'),
),
),
),
);
}
}
2. AwesomeButton
AwesomeButton
是一个具有多种风格的按钮组件。
import 'package:awesome_widgets/awesome_widgets.dart';
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Awesome Widgets Demo'),
),
body: Center(
child: AwesomeButton(
text: 'Click Me',
color: Colors.blue,
onPressed: () {
print('Button Clicked!');
},
borderColor: Colors.white,
borderWidth: 2.0,
borderRadius: 15.0,
elevation: 5.0,
shadowColor: Colors.black.withOpacity(0.3),
icon: Icons.thumb_up,
iconPosition: IconPosition.right,
iconPadding: EdgeInsets.only(right: 10.0),
size: Size(200, 50),
),
),
),
);
}
}
3. AwesomeList
AwesomeList
是一个带有动画效果的列表组件。
import 'package:awesome_widgets/awesome_widgets.dart';
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Awesome Widgets Demo'),
),
body: AwesomeList(
list: List.generate(
20,
(index) => 'Item $index',
),
itemBuilder: (context, index, data) {
return ListTile(
title: Text(data),
trailing: Icon(Icons.arrow_forward),
);
},
),
),
);
}
}
4. AwesomeProgressIndicator
AwesomeProgressIndicator
是一个自定义的进度指示器组件。
import 'package:awesome_widgets/awesome_widgets.dart';
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Awesome Widgets Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(), // Default Flutter progress indicator
SizedBox(height: 20),
AwesomeProgressIndicator(
progress: 0.75, // 75% progress
text: 'Loading...',
textStyle: TextStyle(fontSize: 18),
color: Colors.blue,
),
],
),
),
),
);
}
}
5. AwesomeSlidable
AwesomeSlidable
是一个滑动删除或操作的组件。
import 'package:awesome_widgets/awesome_widgets.dart';
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Awesome Widgets Demo'),
),
body: SlidableListView(
items: List.generate(
20,
(index) => 'Item $index',
),
itemBuilder: (context, index, data) {
return Slidable(
actionPane: SlidableDrawerActionPane(),
actions: <Widget>[
IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () {
print('$data archived!');
},
),
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () {
print('$data deleted!');
},
),
],
secondaryActions: <Widget>[
IconSlideAction(
caption: 'More',
color: Colors.grey,
icon: Icons.more_horiz,
onTap: () {
print('More options for $data!');
},
),
],
child: ListTile(
title: Text(data),
),
);
},
),
),
);
}
}
这些示例代码展示了如何使用 awesome_widgets
提供的不同组件来构建用户界面。根据具体需求,你可以进一步自定义这些组件的样式和行为。