Flutter占位符插件empty_widget_fork的使用

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

Flutter占位符插件empty_widget_fork的使用

自定义空组件 EmptyWidget 是一个用于在 Flutter 应用程序中通知用户某些事件的自定义组件。

截图

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4
Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4

开始使用

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_fork的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter占位符插件empty_widget_fork的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用empty_widget_fork插件的示例代码。empty_widget_fork插件通常用于在应用程序中显示占位符内容,例如在没有数据或加载数据时显示一个占位符视图。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加empty_widget_fork依赖:

dependencies:
  flutter:
    sdk: flutter
  empty_widget_fork: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

2. 使用EmptyWidget

接下来,你可以在你的Flutter应用程序中使用EmptyWidget。下面是一个简单的示例,展示如何在列表视图中使用占位符。

import 'package:flutter/material.dart';
import 'package:empty_widget_fork/empty_widget_fork.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Empty Widget Fork Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool hasData = false; // 模拟数据加载状态
  List<String> items = []; // 模拟数据列表

  @override
  void initState() {
    super.initState();
    // 模拟数据加载
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        hasData = true;
        items = List.generate(20, (index) => 'Item $index');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Empty Widget Fork Demo'),
      ),
      body: hasData
          ? ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index]),
                );
              },
            )
          : EmptyWidget(
              image: AssetImage('assets/placeholder_image.png'), // 占位符图片路径
              title: Text('No Data'),
              subTitle: Text('Loading... Please wait.'),
              button: ElevatedButton(
                onPressed: () {},
                child: Text('Refresh'),
              ),
            ),
    );
  }
}

3. 添加占位符图片资源

在上面的代码中,我们使用了AssetImage('assets/placeholder_image.png')作为占位符图片。你需要在pubspec.yaml文件中声明这个图片资源,并在项目的assets文件夹中放置实际的图片文件。

flutter:
  assets:
    - assets/placeholder_image.png

确保你的图片文件命名为placeholder_image.png并放置在assets文件夹中。

4. 运行应用程序

现在你可以运行你的Flutter应用程序,在数据加载之前你会看到一个占位符视图,加载完成后占位符会被实际的数据列表替换。

这个示例展示了如何使用empty_widget_fork插件来在Flutter应用中方便地显示占位符内容。你可以根据需要自定义占位符的样式和行为。

回到顶部