Flutter视图准备插件ready_view的使用

Motivation

在使用Flutter进行开发时，通常需要处理从网络或数据库获取信息时的异步操作。在这种情况下，我们需要在页面上包含加载小部件，跟踪加载完成情况，并在加载完成后显示原始视图。如果直接在视图代码中包含这些操作，可能会使代码变得复杂且混乱。

因此，ready_view库提供了一个简单优雅的解决方案来处理异步操作。

Installation

首先，在你的pubspec.yaml文件中添加ready_view依赖：

flutter pub add ready_view

Usage

1. 修改代码

当使用Stateless Widget时

将StatelessWidget替换为ReadyStatelessWidget，并将build方法替换为buildWhenReady方法：

// 替换为
StatelessWidget => ReadyStatelessWidget

build(BuildContext context) => buildWhenReady(BuildContext context)

当使用Stateful Widget时

将State<...>替换为ReadyState<...>，并将build方法替换为buildWhenReady方法：

// 替换为
extends State<... => extends ReadyState<...

build(BuildContext context) => buildWhenReady(BuildContext context)

2. 添加 readyState（可选）

当需要执行异步操作时，你可以重写readyState()方法来执行必要的任务：

// 在这里处理异步操作
[@override](/user/override)
Function? readyState(BuildContext context) {
  return () async {
    // 你的异步代码
    await Future.delayed(const Duration(seconds: 2));
  };
}

3. 自定义加载小部件（可选）

如果你想要自定义加载小部件，可以重写loadingWidget()方法：

// 如果需要，自定义加载小部件
[@override](/user/override)
Widget loadingWidget() {
  return Scaffold(
      body: Center(
          child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  )));
}

Example

Stateless Widget 示例

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

class StatelessExample extends ReadyStatelessWidget {
  const StatelessExample({super.key});

  // 在这里处理异步操作
  [@override](/user/override)
  Function? readyState(BuildContext context) {
    return () async {
      await Future.delayed(const Duration(seconds: 2));
    };
  }

  // 如果需要，自定义加载小部件
  // [@override](/user/override)
  // Widget loadingWidget() {
  //   return Scaffold(
  //       body: Center(
  //           child: Container(
  //     width: 100,
  //     height: 100,
  //     color: Colors.red,
  //   )));
  // }

  [@override](/user/override)
  Widget buildWhenReady(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StatelessExample'),
      ),
      body: const Center(
        child: Text('Content is ready!'),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(
    home: StatelessExample(),
  ));
}

Stateful Widget 示例

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

class StatefulExample extends StatefulWidget {
  const StatefulExample({super.key});

  [@override](/user/override)
  ReadyState<StatefulExample> createState() => _StatefulExampleState();
}

class _StatefulExampleState extends ReadyState<StatefulExample> {
  
  // 在这里处理异步操作
  [@override](/user/override)
  Function? readyState(BuildContext context) {
    return () async {
      await Future.delayed(const Duration(seconds: 2));
    };
  }

  // 如果需要，自定义加载小部件
  // [@override](/user/override)
  // Widget loadingWidget() {
  //   return Scaffold(
  //       body: Center(
  //           child: Container(
  //     width: 100,
  //     height: 100,
  //     color: Colors.red,
  //   )));
  // }

  [@override](/user/override)
  Widget buildWhenReady(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StatefulExample'),
      ),
      body: const Center(
        child: Text('Content is ready!'),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(
    home: StatefulExample(),
  ));
}

完整示例Demo

import 'package:example/stateful_example.dart';
import 'package:example/stateless_example.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Builder(
          builder: (context) => Material(
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        PageRouteBuilder(
                          pageBuilder: (context, animation1, animation2) => const StatefulExample(),
                          transitionDuration: const Duration(seconds: 0),
                        ),
                      );
                    },
                    child: const Text('Go to Stateful Example'),
                  ),
                  const SizedBox(height: 16),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        PageRouteBuilder(
                          pageBuilder: (context, animation1, animation2) => const StatelessExample(),
                          transitionDuration: const Duration(seconds: 0),
                        ),
                      );
                    },
                    child: const Text('Go to Stateless Example'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}