flutter_pagewise 0.4.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new80

flutter_pagewise

A library for widgets that load their content one page (or batch) at a time (also known as lazy-loading).

Installation

See the installation instructions on pub.

How to use

The library provides three widgets:

 PagewiseGridView(
   pageSize: 10,
   totalCount: 40,
   crossAxisCount: 2,
   mainAxisSpacing: 8.0,
   crossAxisSpacing: 8.0,
   childAspectRatio: 0.555,
   padding: EdgeInsets.all(15.0),
   itemBuilder: (context, entry) {
     // return a widget that displays the entry's data
   },
   pageFuture: (pageIndex) {
     // return a Future that resolves to a list containing the page's data
   },
 );
 PagewiseListView(
   pageSize: 10,
   totalCount: 40,
   padding: EdgeInsets.all(15.0),
   itemBuilder: (BuildContext context, entry) {
     // return a widget that displays the entry's data
   },
   pageFuture: (pageIndex) {
     // return a Future that resolves to a list containing the page's data
   }
 );

Check the documentation for more details.

If you don't want to use PagewiseGridView or PagewiseListView, you can implement your own pagewise widget, by extending Pagewise class and implementing the buildWidget function, which takes a page (a list of data) and returns a widget that displays this data. For example, to implement a PagewiseColumn:

@override
Widget buildPage(BuildContext context, List page) {
  return Column(
    children: page.map((entry) => this.itemBuilder(context, entry)).toList();
  );
}

Note that in the code above I'm assuming that your implementation uses an itemBuilder function to build a widget for each entry. This, of course, is not necessary.

0.1.0 - 29/07/2018.

  • Provided basic functionality for Pagewise class, PagewiseGridView class and PagewiseListView class.

0.1.1 - 29/07/2018.

  • Small fix to README.

0.1.2 - 29/07/2018.

  • Add gif to README.

0.2.0 - 31/07/2018.

  • Replace loadingWidget with a loadingBuilder that accepts a BuildContext and returns a widget.
  • Fix environment constraints in pubspec.yaml
  • Make the example better looking, and the demo as well
  • Mention lazy-loading in the README.
  • Reformat the code using flutter format

0.3.0 - 04/08/2018.

0.4.0 - 11/08/2018

  • Make future final in _FutureBuilderWrapper
  • Remove unneeded _pages data structure and operations
  • Provide ItemListBuilder for cases where we want to build a list of widgets for each data entry
  • Provide controller property to allow custom ScrollController

0.4.1 - 17/08/2018

  • Decrease size of GIF in README to make it load faster

example/lib/main.dart

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_pagewise/flutter_pagewise.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Pagewise Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(
                text: 'PagewiseListView',
              ),
              Tab(
                text: 'PagewiseGridView'
              )
            ]
          ),
        ),
        body: TabBarView(
          children: [
            PagewiseListViewExample(),
            PagewiseGridViewExample()
          ],
        )
      ),
    );
  }
}

class PagewiseGridViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PagewiseGridView(
      pageSize: 6,
      totalCount: 40,
      crossAxisCount: 2,
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 8.0,
      childAspectRatio: 0.555,
      padding: EdgeInsets.all(15.0),
      itemBuilder: this._itemBuilder,
      pageFuture: BackendService.getPage,
    );
  }

  Widget _itemBuilder(context, entry) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey[600]),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey[200],
                image: DecorationImage(
                  image: AssetImage('assets/images/flutter.png'),
                  fit: BoxFit.fill
                )
              ),
            ),
          ),
          SizedBox(height: 8.0),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(
              entry['name'],
              style: TextStyle(
                fontSize: 18.0
              )
            )
          ),
          SizedBox(height: 8.0),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(
              '\$' + entry['price'].toString(),
              style: TextStyle(
                fontWeight: FontWeight.bold
              ),
            ),
          ),
          SizedBox(height: 8.0)
        ]
      )
    );
  }
}

class PagewiseListViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PagewiseListView(
      pageSize: 6,
      totalCount: 40,
      padding: EdgeInsets.all(15.0),
      itemListBuilder: this._itemListBuilder,
      pageFuture: BackendService.getPage
    );
  }

  List<Widget> _itemListBuilder(context, entry) {
    return [
      ListTile(
        leading: Icon(
          Icons.shopping_cart,
          color: Colors.brown[200],
        ),
        title: Text(entry['name']),
        subtitle: Text('\$' + entry['price'].toString()),
      ),
      Divider()
    ];
  }
}

class BackendService {
  static Future<List> getPage(pageIndex) async {
    int size = 6;
    var rng = Random();
    List list = List.generate(pageIndex < 6 ? size : 5, (index) {
      int dataNumber = index + pageIndex * size;
      return {
        'name': 'product' + dataNumber.toString(),
        'price': rng.nextInt(100)
      };
    });
    // The second page will take 3 seconds to load, while the rest of the pages will take 2
    // This is useful to test cases where later pages might be fetched before earlier pages
    await Future.delayed(Duration(seconds: pageIndex == 1? 3: 2));
    return list;
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_pagewise: ^0.4.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_pagewise/flutter_pagewise.dart';
  
Version Uploaded Documentation Archive
0.4.1 Aug 17, 2018 Go to the documentation of flutter_pagewise 0.4.1 Download flutter_pagewise 0.4.1 archive
0.4.0 Aug 11, 2018 Go to the documentation of flutter_pagewise 0.4.0 Download flutter_pagewise 0.4.0 archive
0.3.0 Aug 3, 2018 Go to the documentation of flutter_pagewise 0.3.0 Download flutter_pagewise 0.3.0 archive
0.2.0 Jul 30, 2018 Go to the documentation of flutter_pagewise 0.2.0 Download flutter_pagewise 0.2.0 archive
0.1.2 Jul 29, 2018 Go to the documentation of flutter_pagewise 0.1.2 Download flutter_pagewise 0.1.2 archive
0.1.1 Jul 29, 2018 Go to the documentation of flutter_pagewise 0.1.1 Download flutter_pagewise 0.1.1 archive
0.1.0 Jul 29, 2018 Go to the documentation of flutter_pagewise 0.1.0 Download flutter_pagewise 0.1.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
59
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]
80
Learn more about scoring.

We analyzed this package on Aug 17, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.11.8
  • Flutter: 0.5.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

Package is pre-v1 release.

While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction of the API.

Format lib/flutter_pagewise.dart.

Run flutter format to format lib/flutter_pagewise.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.11
meta 1.1.5 1.1.6
sky_engine 0.0.99
typed_data 1.1.5 1.1.6
vector_math 2.0.6 2.0.8
Dev dependencies
flutter_test