fl_select 0.12.2

A Flutter package for building selection UIs (e.g. filter bar) on a composable architecture of entry points, delegates and layouts, A2UI-ready, with search, theming, and i18n.

example/lib/main.dart

import 'package:example/generated/l10n/app_localizations.dart';
import 'package:fl_select/fl_select.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'bar_example.dart';
import 'bottom_sheet_example.dart';
import 'button_example.dart';
import 'dialog_example.dart';
import 'theme_mode.dart';
import 'view_example.dart';

void main() {
  if (kReleaseMode) {
    debugPrint = (String? message, {int? wrapWidth}) {};
  }
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ValueNotifier<ThemeMode> _themeModeController =
      ValueNotifier<ThemeMode>(ThemeMode.system);

  @override
  void dispose() {
    _themeModeController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const seedColor = Colors.deepPurple;
    final lightTheme = ThemeData(
      colorScheme: ColorScheme.fromSeed(
        seedColor: seedColor,
        brightness: Brightness.light,
      ),
      useMaterial3: true,
    );
    final darkTheme = ThemeData(
      colorScheme: ColorScheme.fromSeed(
        seedColor: seedColor,
        brightness: Brightness.dark,
      ),
      useMaterial3: true,
    );
    return ThemeModeScope(
      controller: _themeModeController,
      child: ValueListenableBuilder<ThemeMode>(
        valueListenable: _themeModeController,
        builder: (context, themeMode, _) {
          return MaterialApp(
            onGenerateTitle: (context) => 'Select Example',
            theme: lightTheme,
            darkTheme: darkTheme,
            themeMode: themeMode,
            localizationsDelegates: const [
              AppLocalizations.delegate,
              GlobalMaterialLocalizations.delegate,
              GlobalWidgetsLocalizations.delegate,
              GlobalCupertinoLocalizations.delegate,
              SelectLocalizationsDelegate(),
            ],
            supportedLocales: AppLocalizations.supportedLocales,
            builder: (context, child) {
              final baseTheme = Theme.of(context);
              final theme = baseTheme.copyWith(
                extensions: <ThemeExtension<dynamic>>[
                  PopupSelectBarTheme(
                    overlayStyle: const SelectOverlayStyle(
                      barrierColor: Colors.black54,
                    ),
                    selectTheme: SelectThemeData(
                      baseTheme,
                      // actionBarTheme: SelectActionBarTheme(
                      //   backgroundColor: Colors.red,
                      // ),
                    ),
                  ),
                  PopupSelectButtonTheme(
                    overlayStyle: SelectOverlayStyle(
                      barrierColor: Colors.amber[100],
                    ),
                    selectTheme: SelectThemeData(
                      baseTheme,
                      actionBarTheme: SelectActionBarTheme(
                        backgroundColor: Colors.red,
                      ),
                    ),
                  )
                ],
              );
              return Theme(
                data: theme,
                child: child ?? const SizedBox.shrink(),
              );
            },
            home: const MyHomePage(),
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(l10n.appTitle),
        actions: const [ThemeModeButton()],
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const SelectViewExamplePage()),
                );
              },
              child: Text(l10n.selectViewExample),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const PopupSelectButtonExample()),
                );
              },
              child: Text(l10n.popupSelectButtonExample),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const PopupSelectBarExample()),
                );
              },
              child: Text(l10n.popupSelectBarExample),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const DialogExample()),
                );
              },
              child: Text(l10n.showSelectExample),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const BottomSheetExample()),
                );
              },
              child: Text(l10n.showModalBottomSelectExample),
            ),
          ],
        ),
      ),
    );
  }
}