Flutter占位图插件flutter_empty_illustration的使用

空屏幕、无数据发现、无互联网连接屏幕的Flutter插件

本项目是一个Dart包的起点，该包包含可以轻松在多个Flutter或Dart项目中共享的库模块。

对于如何开始使用Flutter的帮助，您可以查看我们的在线文档，其中提供了教程、示例、移动开发指南以及完整的API参考。

flutter_empty_illustration

#### 开始使用

要开始使用`flutter_empty_illustration`插件，请按照以下步骤操作：

1. 在`pubspec.yaml`文件中添加依赖项。
2. 导入所需的包。
3. 使用插件提供的组件。

##### 步骤1: 添加依赖项

在`pubspec.yaml`文件中添加`flutter_empty_illustration`插件的依赖项：

```yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_empty_illustration: ^1.0.0

然后运行flutter pub get来获取新的依赖项。

步骤2: 导入所需的包

在你的Dart文件中导入所需的包：

import 'package:flutter/material.dart';
import 'package:flutter_empty_illustration/flutter_empty_illustration.dart';
import 'package:lottie/lottie.dart';

步骤3: 使用插件提供的组件

下面是一个完整的示例，展示了如何使用flutter_empty_illustration插件来创建一个简单的Flutter应用，其中包括无网络连接和无数据发现的界面。

import 'package:flutter/material.dart';
import 'package:flutter_empty_illustration/flutter_empty_illustration.dart';
import 'package:lottie/lottie.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 Illustration Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  // 这个小部件是您的应用的首页。它是有状态的，意味着它有一个状态对象（定义在下面），该状态对象包含影响其外观的字段。
  // 这个类是状态的配置。它保存了由父级（在这个例子中是App小部件）提供的值（在这里是标题）并用于状态的构建方法。小部件子类中的字段总是标记为“final”。

  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(
          // 这里我们从MyHomePage对象中取值，该对象是由App.build方法创建的，并用它来设置我们的appbar标题。
          title: Text(widget.title!),
        ),
        body: ListView(
          physics: PageScrollPhysics(),
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          children: [
            NoInternetWidget(), // 无网络连接的占位图
            CustomNoInternetWidget(
              imageWidget: Lottie.asset(
                  'assets/no_internet_connection_wifi.json', // 动画资源文件路径
                  width: 400,
                  fit: BoxFit.cover), // 设置动画大小和填充方式
              textWidget: Text(
                "Internet Disconnected", // 显示的文字信息
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22.0,
                    color: Colors.black54,
                    fontWeight: FontWeight.bold), // 文字样式
              ),
            ),
            NoDataFoundWidget() // 无数据发现的占位图
          ],
        )
        // 这个尾随逗号使自动格式化更美观。
        );
  }
}