Flutter占位符插件empty_widget的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter占位符插件empty_widget的使用

Empty Widget

Custom_Empty widget 是一个 Flutter 自定义组件,用于通知用户某些事件。

Open Source Love GitHub last commit GitHub GitHub code size in bytes GitHub stars GitHub forks

pub package Likes Popularity Pub points

Hits

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),
      ),
    );
  }
}

在这个示例中:

  1. 我们创建了一个简单的Flutter应用,包含一个主页面MyHomePage
  2. MyHomePage中,我们用一个布尔变量hasData来模拟数据的加载状态。
  3. hasDatafalse时,显示EmptyWidget作为占位符。EmptyWidget接受几个参数,包括一个占位符图片、一个标题和一个副标题。
  4. 点击浮动操作按钮(FAB)时,模拟数据加载,2秒后将hasData设置为true,并显示一个包含10个项目的ListView

注意:

  • AssetImage('assets/placeholder.png')中的图片路径需要根据你的项目资源进行调整。确保在pubspec.yaml中声明了相应的资源。
  • EmptyWidgetbutton参数是可选的,你可以根据需要添加自定义按钮来实现刷新或其他功能。

这个示例展示了如何在Flutter应用中使用empty_widget插件来优雅地显示占位符,提升用户体验。

回到顶部