Flutter占位符插件empty_widget的使用
Flutter占位符插件empty_widget的使用
Empty Widget
Custom_Empty widget 是一个 Flutter 自定义组件,用于通知用户某些事件。
Screenshots
截图 |
---|
Getting Started
1. 添加库到你的 pubspec.yaml
文件
dependencies:
empty_widget: ^0.0.3
2. 在 Dart 文件中导入库
import 'package:empty_widget/empty_widget.dart';
3. 使用 EmptyWidget
EmptyWidget(
image: null,
packageImage: PackageImage.Image_1,
title: 'No Notification',
subTitle: 'No notification available yet',
titleTextStyle: TextStyle(
fontSize: 22,
color: Color(0xff9da9c7),
fontWeight: FontWeight.w500,
),
subtitleTextStyle: TextStyle(
fontSize: 14,
color: Color(0xffabb8d6),
),
);
示例
import 'package:empty_widget/empty_widget.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Empty widget demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title}) : super(key: key);
final String? title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title!),
),
body: Container(
alignment: Alignment.center,
child: EmptyWidget(
// Image from project assets
image: "assets/images/im_emptyIcon_1.png",
/// Image from package assets
/// Uncomment below line to use package assets
packageImage: PackageImage.Image_1,
title: 'No Notification',
subTitle: 'No notification available yet',
titleTextStyle: TextStyle(
fontSize: 22,
color: Color(0xff9da9c7),
fontWeight: FontWeight.w500,
),
subtitleTextStyle: TextStyle(
fontSize: 14,
color: Color(0xffabb8d6),
),
// Uncomment below statement to hide background animation
// hideBackgroundAnimation: true,
),
),
);
}
}
更多关于Flutter占位符插件empty_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter占位符插件empty_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用empty_widget
插件的示例代码。empty_widget
是一个轻量级的Flutter包,用于在UI中显示占位符,通常在数据尚未加载时显示。
首先,确保你已经在pubspec.yaml
文件中添加了empty_widget
依赖:
dependencies:
flutter:
sdk: flutter
empty_widget: ^0.0.3 # 请注意版本号,这里使用的是示例版本号,实际使用时请检查最新版本
然后,运行flutter pub get
来安装依赖。
接下来,在你的Flutter项目中,你可以这样使用EmptyWidget
:
import 'package:flutter/material.dart';
import 'package:empty_widget/empty_widget.dart'; // 导入empty_widget包
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool hasData = false; // 模拟数据加载状态
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Empty Widget Demo'),
),
body: Center(
child: hasData
? ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
)
: EmptyWidget(
image: AssetImage('assets/placeholder.png'), // 使用占位符图片
title: Text('No Data'),
subTitle: Text('Please wait while we load the data...'),
// 可选:添加自定义按钮
// button: FlatButton(
// child: Text('Refresh'),
// onPressed: () {
// // 刷新数据的逻辑
// setState(() {
// hasData = true; // 模拟数据加载完成
// });
// },
// ),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 模拟数据加载
Future.delayed(Duration(seconds: 2), () {
setState(() {
hasData = true;
});
});
},
tooltip: 'Load Data',
child: Icon(Icons.add),
),
);
}
}
在这个示例中:
- 我们创建了一个简单的Flutter应用,包含一个主页面
MyHomePage
。 - 在
MyHomePage
中,我们用一个布尔变量hasData
来模拟数据的加载状态。 - 当
hasData
为false
时,显示EmptyWidget
作为占位符。EmptyWidget
接受几个参数,包括一个占位符图片、一个标题和一个副标题。 - 点击浮动操作按钮(FAB)时,模拟数据加载,2秒后将
hasData
设置为true
,并显示一个包含10个项目的ListView
。
注意:
AssetImage('assets/placeholder.png')
中的图片路径需要根据你的项目资源进行调整。确保在pubspec.yaml
中声明了相应的资源。EmptyWidget
的button
参数是可选的,你可以根据需要添加自定义按钮来实现刷新或其他功能。
这个示例展示了如何在Flutter应用中使用empty_widget
插件来优雅地显示占位符,提升用户体验。