flutter-plugins/example/lib/pages/home/widgets/home_app_bar.dart

import 'package:flutter/material.dart';
import 'package:flutter_example_packages/widgets/base/export.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

enum PlatformFilter {
  disable,
  dependent,
  independent,
}

class HomeAppBar extends AppStatefulWidget implements PreferredSizeWidget {
  const HomeAppBar({
    super.key,
    required this.onChangeSearch,
    required this.onChangeFilter,
  });

  final void Function(String) onChangeSearch;
  final void Function(PlatformFilter) onChangeFilter;

  @override
  State<HomeAppBar> createState() => _HomeAppBarState();

  @override
  Size get preferredSize => const Size.fromHeight(60.0);
}

class _HomeAppBarState extends AppState<HomeAppBar> {
  bool _enableSearch = false;
  PlatformFilter _filter = PlatformFilter.disable;
  final TextEditingController _searchController = TextEditingController();
  final FocusNode _searchFocus = FocusNode();

  @override
  Widget buildWide(
    BuildContext context,
    MediaQueryData media,
    AppLocalizations l10n,
  ) {
    final theme = Theme.of(context);
    return AppBar(
      centerTitle: true,
      shape: const Border(bottom: BorderSide(width: 0)),
      leading: _enableSearch
          ? Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipOval(
                child: Material(
                  color: Colors.blueGrey,
                  child: IconButton(
                    icon: const Icon(Icons.close),
                    tooltip: l10n.homeSearch,
                    onPressed: () {
                      setState(() {
                        widget.onChangeSearch.call("");
                        _searchController.clear();
                        _enableSearch = false;
                      });
                    },
                  ),
                ),
              ),
            )
          : null,
      title: _enableSearch
          ? TextField(
              focusNode: _searchFocus,
              controller: _searchController,
              style: theme.textTheme.titleLarge?.copyWith(color: Colors.white),
              cursorColor: Colors.white,
              decoration: InputDecoration(
                hintText: l10n.homeSearchTitle,
                hintStyle:
                    theme.textTheme.titleLarge?.copyWith(color: Colors.white54),
                border: InputBorder.none,
                contentPadding: const EdgeInsets.all(0),
              ),
              onChanged: (value) {
                widget.onChangeSearch.call(value);
              },
            )
          : null,
      actions: [
        if (!_enableSearch)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: SizedBox(
              width: 40,
              height: 40,
              child: ClipOval(
                child: Material(
                  color: Colors.blueGrey,
                  child: IconButton(
                    icon: const Icon(Icons.search),
                    tooltip: l10n.homeSearch,
                    onPressed: () {
                      setState(() {
                        _enableSearch = true;
                        _searchFocus.requestFocus();
                      });
                    },
                  ),
                ),
              ),
            ),
          ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SizedBox(
            width: 40,
            height: 40,
            child: ClipOval(
              child: Material(
                color: () {
                  switch (_filter) {
                    case PlatformFilter.disable:
                      return Colors.blueGrey;
                    case PlatformFilter.dependent:
                      return Colors.deepOrangeAccent;
                    case PlatformFilter.independent:
                      return Colors.blueAccent;
                  }
                }.call(),
                child: IconButton(
                  icon: () {
                    switch (_filter) {
                      case PlatformFilter.disable:
                        return const Icon(Icons.filter_list_off);
                      case PlatformFilter.dependent:
                        return const Icon(Icons.filter_list);
                      case PlatformFilter.independent:
                        return const Icon(Icons.filter_list);
                    }
                  }.call(),
                  tooltip: l10n.homeFilter,
                  onPressed: () {
                    setState(() {
                      switch (_filter) {
                        case PlatformFilter.disable:
                          _filter = PlatformFilter.dependent;
                          widget.onChangeFilter.call(_filter);
                          break;
                        case PlatformFilter.dependent:
                          _filter = PlatformFilter.independent;
                          widget.onChangeFilter.call(_filter);
                          break;
                        case PlatformFilter.independent:
                          _filter = PlatformFilter.disable;
                          widget.onChangeFilter.call(_filter);
                          break;
                      }
                    });
                  },
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}