Flutter List UI #

A collection of beautiful and reusable Flutter UI components with modern design patterns.

Features #

• Flexible info card system with customizable headers and lists
• Built-in Riverpod integration
• Modern design with Material You support
• Highly customizable components

Getting started #

Add the package to your pubspec.yaml:

dependencies:
  flutter_list_ui: ^1.1.4
  flutter_riverpod: ^2.5.1  # Required for InfoCardWithRiverpod

Or run the following command:

flutter pub add flutter_list_ui
flutter pub add flutter_riverpod  # Required for InfoCardWithRiverpod

Usage #

Basic Usage #

Info(
  card: InfoCard(
    header: InfoHeader(
      title: 'My Header',
      subtitle: 'Optional subtitle',
      backgroundColor: Colors.white,
    ),
    body: InfoList<String>(
      items: ['Item 1', 'Item 2', 'Item 3'],
      buildItem: (item) => ListTile(title: Text(item)),
    ),
    backgroundColor: Colors.white,
    isRound: true,
    showBorder: true,
  ),
)

Riverpod Integration #

First, wrap your app with ProviderScope:

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

Then use InfoCardWithRiverpod:

InfoWithRiverpod(
  card: InfoCardWithRiverpod(
    header: InfoHeader(
      title: 'Riverpod Example',
    ),
    body: InfoList<String>(
      items: ref.watch(itemsProvider),
      buildItem: (item) => ListTile(title: Text(item)),
    ),
  ),
)

Custom Header Implementation #

You can create your own header by extending the InfoHeaderBase class:

class CustomHeader extends InfoHeaderBase {
  const CustomHeader({
    required this.title,
    required this.searchBar,
    super.key,
  });

  final String title;
  final Widget searchBar;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title, style: Theme.of(context).textTheme.titleLarge),
          const SizedBox(height: 8),
          searchBar,
        ],
      ),
    );
  }
}

// Usage
InfoCard(
  header: CustomHeader(
    title: 'Search',
    searchBar: SearchBar(),
  ),
  body: InfoList(...),
)

Additional information #

For more examples and detailed documentation, visit our GitHub repository.

Contributing #

Feel free to file issues and PRs! We welcome all contributions.