loader 0.3.3

  • Readme
  • Changelog
  • Example
  • Installing
  • new72

Loader #

Sometimes you need to load some data before building your widget. Because initState doesn't support asynchronous loading you need to find another way to load your data. The most common way of loading data is using a FutureBuilder but FutureBuilders are tedious. Another way is using flags to rebuild the widget after all the loading is done.

Loader uses the flag method.

LoadingMixin #

The LoadingMixin adds all the necessary flags to your stateful widget's state to turn it to a FutureBuilder like widget.

their are two flags:

  1. loading : true if the load function is still running
  2. hasError: true if the load function has thrown an exception.

the exception text is stored in the error variable.

class DataRow extends StatefulWidget {
  
  final int index;
  
  DataRow({Key key, this.index}) : super(key: key);
  
  @override
  _DataRowState createState() => _DataRowState();
}

class _DataRowState extends State<DataRow> with LoadingMixin<DataRow>{
  
  String data;
  
  @override
    Future<void> load() async{
      data = await DataProvider.getData();
    }
  
  @override
  Widget build(BuildContext context) {
    if(loading) return Container();
    if(hasError) return Text(error);
    return Text(data);
  }
}

StatelessLoadingMixin #

For this mixin to work, you need to delete the build method and use the futureBuild method instead.

class FutureText extends StatelessWidget with StatelessLoadingMixin {
  final Future<String> futureText;
  final TextStyle style;

  FutureText(this.futureText, {this.style});

  String text;

  @override
  Future<void> load() async {
    text = await futureText;
  }

  @override
  Widget futureBuild(BuildContext context) {
    return Text(
      text,
      style: style,
    );
  }
}

Loader #

Loader is a widget which uses the LoadingMixin mixin.

This widget will run it's builder method, only after the load function is done.

The builder will get the value returned in the load function as the value parameter.

class Banner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Loader<String>(
          load: () async{
            return await retriveBannerText();
          },
          builder: (context, value){
            return Text(value);
          },
          errorBuilder: (error) => Text(error, style: TextStyle(color: Colors.red),),
        ),
      ),
    );
  }
}

[0.3.0]

  • load() is now called after initState and before didChangeDependencies
  • you can now use inherited widgets in load

[0.2.0]

  • added StatelessLoadingMixin

[0.1.0]

  • better readme
  • added an example

[0.0.1]

  • added LoadingMixin
  • added Loader

example/main.dart

import 'package:flutter/material.dart';
import 'package:loader/src/loadingMixin.dart';
import 'package:loader/src/loadingStatelessWidget.dart';

main() => runApp(LoaderApp());

class LoaderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(kToolbarHeight),
        child: UserAppBar(),
      ),
      body: PostsPage(),
    );
  }
}

class UserAppBar extends StatefulWidget {
  @override
  _UserAppBarState createState() => _UserAppBarState();
}

class _UserAppBarState extends State<UserAppBar> with LoadingMixin<UserAppBar> {
  String _username;

  @override
  Future<void> load() async {
    _username = await getUsername();
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(loading ? '...' : hasError ? 'error' : _username),
    );
  }
}

class PostsPage extends StatefulWidget {
  @override
  _PostsPageState createState() => _PostsPageState();
}

class _PostsPageState extends State<PostsPage> with LoadingMixin<PostsPage> {
  List<Post> _posts;

  @override
  Future<void> load() async {
    _posts = await getPosts();
  }

  @override
  Widget build(BuildContext context) {
    if (loading) return Center(child: Text('loading...'));
    if (hasError) return Text('an error accured: $error');
    return ListView(
      children: _posts
          .map(
            (post) => ListTile(
              title: Text(post.title),
            ),
          )
          .toList(),
    );
  }
}

class FutureText extends StatelessWidget with StatelessLoadingMixin {
  final Future<String> futureText;
  final TextStyle style;

  FutureText(this.futureText, {this.style});

  String text;

  @override
  Future<void> load() async {
    text = await futureText;
  }

  @override
  Widget futureBuild(BuildContext context) {
    return Text(
      text,
      style: style,
    );
  }
}

class Post {
  final String title;

  Post(this.title);
}

Future<List<Post>> getPosts() async {
  return await Future.delayed(
      Duration(milliseconds: 3800),
      () => [
            Post('Flutter 1.12 released!'),
            Post('Dart 2.7 released!'),
            Post('Flutter 1.9 released!'),
            Post('Flutter 1.8 released!'),
            Post('Flutter 1.1 released!'),
            Post('Flutter 1.0 released!'),
          ]);
}

Future<String> getUsername() async {
  return await Future.delayed(Duration(seconds: 2), () => 'Aligator');
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  loader: ^0.3.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:loader/loader.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
45
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
72
Learn more about scoring.

We analyzed this package on Jan 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Format lib/src/loader.dart.

Run flutter format to format lib/src/loader.dart.

Format lib/src/loadingStatelessWidget.dart.

Run flutter format to format lib/src/loadingStatelessWidget.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8