cupertino_lists

cupertino_lists is an implementation of iOS-style lists (grouped and inset grouped).

Warning: This package probably will not be maintained after #78732 gets merged.

The left side is native, and the right side is cupertino_lists.

Getting Started

Add the package to your pubspec.yaml:

cupertino_lists: ^1.0.1

Import the library:

import 'package:cupertino_lists/cupertino_lists.dart';

In order to create a modern inset grouped iOS-style list, you need to use the CupertinoListSection.insetGrouped() widget and CupertinoListTile.notched() as its children:

  // Code from the reminders app example above.
  @override
  Widget build(BuildContext context) {
    return CupertinoListSection.insetGrouped(
      header: const Text('My Lists'),
      children: const <CupertinoListTile>[
        CupertinoListTile.notched(
          title: Text('Reminders'),
          leading: _DummyIcon(
            color: CupertinoColors.activeBlue,
            icon: CupertinoIcons.list_bullet,
          ),
          additionalInfo: Text('4'),
          trailing: CupertinoListTileChevron(),
        ),
        CupertinoListTile.notched(
          title: Text('Old Reminders'),
          leading: _DummyIcon(
            color: CupertinoColors.systemYellow,
            icon: CupertinoIcons.list_bullet,
          ),
          additionalInfo: Text('42'),
          trailing: CupertinoListTileChevron(),
        ),
        CupertinoListTile.notched(
          title: Text('Important'),
          leading: _DummyIcon(
            color: CupertinoColors.systemRed,
            icon: CupertinoIcons.list_bullet,
          ),
          additionalInfo: Text('2'),
          trailing: CupertinoListTileChevron(),
        ),
      ],
    );
  }

CupertinoListTileChevron() is a convenience widget that can be used to display an iOS-style chevron on the trailing side of a CupertinoListTile.

If you need old edge-to-edge style, simply use base constructors for CupertinoListSection and CupertinoListTile.

Features, bugs and contributions

Feel free to contribute to this project.

Please file feature requests and bugs at the issue tracker. If you fixed a bug or implemented a feature by yourself, feel free to send a pull request.

GitHub

View Github