ready_view

Description:

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
copied to clipboard
Usage #
1. Change Code #
When Stateless Widget
// replace
StatelessWidget => ReadyStatelessWidget

build(BuildContext context) => buildWhenReady(BuildContext context)
copied to clipboard
Stateful Widget
// replace
extends State<.. => extends ReadyState<..

build(BuildContext context) => buildWhenReady(BuildContext context)
copied to clipboard
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));
};
}
copied to clipboard
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,
)));
}
copied to clipboard
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(),
));
}
copied to clipboard
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(),
));
}
copied to clipboard