Flutter状态展示插件fancy_states的使用

Fancy States简介

Fancy States 是一个用于 Flutter 的状态展示小部件库，它包含了多种可完全自定义的错误状态，并可以根据需求进行扩展。使用该库可以轻松处理各种状态（如网络错误、数据加载失败等），无需额外编写复杂的逻辑。

安装

1. 添加依赖到 pubspec.yaml

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  fancy_states: <最新版本>

2. 安装依赖

通过命令行安装依赖：

$ flutter pub get

3. 导入库

在 Dart 文件中导入 fancy_states：

import 'package:fancy_states/fancy_states.dart';

截图

以下是 Fancy States 提供的一些默认状态展示效果：

使用方法

默认类型

使用默认状态（例如 States.internet）：

FancyState(
  state: States.internet, // 网络错误状态
),

Internet State

网络错误状态的示例：

FancyState(
  state: States.internet, // 网络错误状态
),

Data State

数据加载失败状态的示例：

FancyState(
  state: States.data, // 数据加载失败状态
),

Search State

搜索结果为空状态的示例：

FancyState(
  state: States.search, // 搜索结果为空状态
),

Server State

服务器错误状态的示例：

FancyState(
  state: States.server, // 服务器错误状态
),

自定义状态

可以通过传入自定义参数来自定义状态展示：

FancyState(
  state: States.internet, // 网络错误状态
  image: "assets/images/no_internet.png", // 自定义图片路径
  title: "无法连接到互联网", // 标题
  description: "请检查您的网络连接并重试。", // 描述
  imageHeight: 100, // 图片高度
  titleStyle: const TextStyle(
    fontFamily: 'Futura',
    fontSize: 16,
    fontWeight: FontWeight.w600,
    color: Colors.black,
  ),
  descriptionStyle: const TextStyle(
    fontFamily: 'Futura',
    fontSize: 12,
    fontWeight: FontWeight.w300,
    color: Color(0xFF8F8E8E),
  ),
)

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中集成和使用 fancy_states：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fancy States 示例"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 默认网络错误状态
            FancyState(
              state: States.internet,
            ),
            SizedBox(height: 20),
            // 自定义网络错误状态
            FancyState(
              state: States.internet,
              image: "assets/images/no_internet.png",
              title: "无法连接到互联网",
              description: "请检查您的网络连接并重试。",
              imageHeight: 100,
              titleStyle: const TextStyle(
                fontFamily: 'Futura',
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: Colors.black,
              ),
              descriptionStyle: const TextStyle(
                fontFamily: 'Futura',
                fontSize: 12,
                fontWeight: FontWeight.w300,
                color: Color(0xFF8F8E8E),
              ),
            ),
          ],
        ),
      ),
    );
  }
}