ready_view

ready_view

Motivation

When developing with Flutter, it is often necessary to use asynchronous operations when fetching information from networks or databases. In such cases, we need to include loading widgets on our pages, track the completion of loading, and display the original view once the loading is complete. Including this series of code can make the view code quite complex and messy.

Therefore, the ready_view library offers a simple and elegant solution for handling asynchronous actions.

Installation

flutter pub add ready_view

Usage

1. Change Code

When Stateless Widget

// replace
StatelessWidget => ReadyStatelessWidget

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

Stateful Widget

// replace
extends State<.. => extends ReadyState<..

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

2. Add readyState(Optional)

When asynchronous actions are required, you can override the readyState() to perform the necessary tasks.

// handle async operation here if needed
@override
Function? readyState(BuildContext context) {
  return () async {
    // your async code here
    await Future.delayed(const Duration(seconds: 2));
  };
}

3. Custom Loading Widget(Optional)

You can customize the loading widget by overriding the loadingWidget() if you want.

  // custom loading widget if needed
  @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});

  // handle async operation here if needed
  @override
  Function? readyState(BuildContext context) {
    return () async {
      await Future.delayed(const Duration(seconds: 2));
    };
  }

  // custom loading widget if needed
  // @override
  // Widget loadingWidget() {
  //   return Scaffold(
  //       body: Center(
  //           child: Container(
  //     width: 100,
  //     height: 100,
  //     color: Colors.red,
  //   )));
  // }

  @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
  ReadyState<StatefulExample> createState() => _StatefulExampleState();
}

class _StatefulExampleState extends ReadyState<StatefulExample> {
  
  // handle async operation here if needed
  @override
  Function? readyState(BuildContext context) {
    return () async {
      await Future.delayed(const Duration(seconds: 2));
    };
  }

  // custom loading widget if needed
  // @override
  // Widget loadingWidget() {
  //   return Scaffold(
  //       body: Center(
  //           child: Container(
  //     width: 100,
  //     height: 100,
  //     color: Colors.red,
  //   )));
  // }

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

Comparison with FutureBuilder

Although similar to FutureBuilder, using FutureBuilder asynchronously when the view is first created requires setting up related state, including calling asynchronous functions in initState, and placing the FutureBuilder in the build function along with a separate loading widget. In contrast, ready_view allows you to keep your existing code as it is, while providing a cleaner and more intuitive way to handle asynchronous actions by separately calling the readyState and loadingWidget functions when needed.