Flutter列表详情基础插件list_detail_base的使用

标题

Flutter列表详情基础插件list_detail_base的使用

内容

This README describes the package. If you publish this package to pub.dev, this README’s contents appear on the landing page for your package.

For information about how to write a good package README, see the guide for writing package pages.

For general information about developing packages, see the Dart guide for creating packages and the Flutter guide for developing packages and plugins.

ListDetailBase #

A template package for List-Detail or Master-Detail layouts #

Features #

• Buildss for large or small screens in one simple widget.
• Easily modifiable.
• Handles all state management with no dependencies and no fuss.
• Inherited lookup of controller ListDetail<T>.of(context)
• Simple package. Look at the code. There's not much complexity.

Getting started #

Add package

flutter pub add list_detail_base

Usage #

Import

import 'package:list_detail_base/list_detail_base.dart';

Example (explore example code in the example app - it's short).

/// Example of ListDetailBase
class _MyHomePageState extends State<MyHomePage> {
/// Make a controller with the same type as your list.
/// [ColorEtymology] is an example data class
late final ListDetailController<ColorEtymology> controller;
@override
void initState() {
super.initState();
/// 5 second delay for show. Transform turns JSON list into a
/// list of your model
controller = ListDetailController(
fetch: () => Future.delayed(const Duration(seconds: 5), () => Future.value(colorMapList)),
transform: ColorEtymology.fromMap,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: ListDetailLayout(
controller: controller,
listBuilder: (context, items, isSplitScreen) => ListView.builder(
itemCount: items.length,
// [Item] is an example view - a ListTile
itemBuilder: (context, index) => Item(
colorModel: items[index],
isSplitScreen: isSplitScreen,
onSelect: (value) => controller.select = value,
),
),
detailBuilder: (context, item, isSplitScreen) => item == null
? Container()
// [ColorModelDetail] is an example view - a Card
: ColorModelDetail(
colorModel: item,
isSplitScreen: isSplitScreen,
colorModelListenable: controller.selectedItem,
),
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}

Additional information #

This is a quick helper package I put together based on other work I was doing. If you find it useful or want to add some feature please let me know.

示例代码

// ignore_for_file: public_member_api_docs, sort_constructors_first

import 'package:example/views/example_views.dart';
import 'package:flutter/material.dart';
import 'package:list_detail_base/list_detail_base.dart';

import 'data/example_data.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Color Etymology'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

/// Example of ListDetailBase
class _MyHomePageState extends State<MyHomePage> {
  /// Make a controller with the same type as your list
  late final ListDetailController<ColorEtymology> controller;

  // final GlobalKey<ListDetailLayoutState> layoutKey = GlobalKey();

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = ListDetailController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final list = List<ColorEtymology>.from(
      colorMapList.map(ColorEtymology.fromMap),
    );
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: ListDetail<ColorEtymology>(
        controller: controller,
        child: Builder(builder: (innerContext) {
          return ListDetailLayout(
            // key: layoutKey,
            controller: ListDetail.of<ColorEtymology>(innerContext).controller,
            listBuilder: (innerContext) => ColorList(list: list),
            detailBuilder: (innerContext) => const ColorDetail(),
          });
        }),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}