A Flutter Data List Page Package Project

Usage

import 'package:devaloop_data_list_page/data_list_page.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final List<DataItem> db = List.generate(
        25,
        (index) => DataItem(
            title: 'Data ${index + 1}', subtitle: 'Data ${index + 1}'));

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: DataListPage(
        title: 'Product Inventory',
        subtitle: 'Product Inventory',
        wrapper: Future(() async {
          await Future.delayed(const Duration(seconds: 2));
          return Wrapper(total: db.length, data: db.take(10).toList());
        }),
        showMore: (wrapper) => Future<Wrapper>(() async {
          await Future.delayed(const Duration(seconds: 2));
          return Wrapper(
              total: db.length,
              data: db.take(wrapper.data.length + 10).toList());
        }),
        add: Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          return Wrapper(total: db.length, data: db.take(10).toList());
        }),
        search: Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          var searchKeyWord = [
            KeyWord(
              name: 'name',
              label: 'Name',
              hiddenValue: 'Data',
              showedValue: 'Data',
            ),
            KeyWord(
              name: 'detail',
              label: 'Detail',
              hiddenValue: 'Data',
              showedValue: 'Data',
            ),
          ];
          return MapEntry(
              searchKeyWord,
              SearchWrapper(
                searchResult: Wrapper(total: 20, data: db.take(10).toList()),
                showSearchResultMore: (wrapper, searchKeyWord) => Future(() {
                  return MapEntry(searchKeyWord,
                      Wrapper(total: 20, data: db.take(20).toList()));
                }),
              ));
        }),
        refresh: Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          return Wrapper(total: db.length, data: db.take(10).toList());
        }),
      ),
    );
  }
}

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add devaloop_data_list_page

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  devaloop_data_list_page: ^0.0.1

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

Import it

Now in your Dart code, you can use:

import 'package:devaloop_data_list_page/data_list_page.dart';

example/lib/main.dart

import 'package:devaloop_data_list_page/data_list_page.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final List<DataItem> db = List.generate(
        25,
        (index) => DataItem(
            title: 'Data ${index + 1}', subtitle: 'Data ${index + 1}'));

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: DataListPage(
        title: 'Product Inventory',
        subtitle: 'Product Inventory',
        wrapper: Future(() async {
          await Future.delayed(const Duration(seconds: 2));
          return Wrapper(total: db.length, data: db.take(10).toList());
        }),
        showMore: (wrapper) => Future<Wrapper>(() async {
          await Future.delayed(const Duration(seconds: 2));
          return Wrapper(
              total: db.length,
              data: db.take(wrapper.data.length + 10).toList());
        }),
        add: Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          return Wrapper(total: db.length, data: db.take(10).toList());
        }),
        search: Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          var searchKeyWord = [
            KeyWord(
              name: 'name',
              label: 'Name',
              hiddenValue: 'Data',
              showedValue: 'Data',
            ),
            KeyWord(
              name: 'detail',
              label: 'Detail',
              hiddenValue: 'Data',
              showedValue: 'Data',
            ),
          ];
          return MapEntry(
              searchKeyWord,
              SearchWrapper(
                searchResult: Wrapper(total: 20, data: db.take(10).toList()),
                showSearchResultMore: (wrapper, searchKeyWord) => Future(() {
                  return MapEntry(searchKeyWord,
                      Wrapper(total: 20, data: db.take(20).toList()));
                }),
              ));
        }),
        refresh: Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          return Wrapper(total: db.length, data: db.take(10).toList());
        }),
      ),
    );
  }
}

Download details:

Author: devaloop

Source: https://github.com/devaloop/data_list_page

#flutter #big-data #data