yx_icon_fonts_flutter/example/lib/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:yx_icon_fonts_example/icons.dart';

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

/// YX Icon Fonts 图标库展示应用
class YXIconFontsGalleryApp extends StatelessWidget {
  const YXIconFontsGalleryApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YX Icon Fonts Gallery',
      theme: ThemeData.light().copyWith(
        iconTheme: const IconThemeData(size: 36.0, color: Colors.black87),
        textTheme: const TextTheme(
          bodyMedium: TextStyle(fontSize: 16.0, color: Colors.black87),
        ),
      ),
      home: const YXIconFontsGalleryHome(),
    );
  }
}

/// 主页面
class YXIconFontsGalleryHome extends StatefulWidget {
  const YXIconFontsGalleryHome({super.key});

  @override
  State<StatefulWidget> createState() => _YXIconFontsGalleryHomeState();
}

class _YXIconFontsGalleryHomeState extends State<YXIconFontsGalleryHome> {
  var _searchTerm = '';
  var _isSearching = false;

  @override
  Widget build(BuildContext context) {
    final filteredIcons = icons
        .where(
          (icon) =>
              _searchTerm.isEmpty ||
              icon.title.toLowerCase().contains(_searchTerm.toLowerCase()),
        )
        .toList();

    return Scaffold(
      appBar: _isSearching ? _searchBar(context) : _titleBar(),
      body: Scrollbar(
        thumbVisibility: kIsWeb,
        child: GridView.builder(
          itemCount: filteredIcons.length,
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 180,
          ),
          itemBuilder: (context, index) {
            final icon = filteredIcons[index];

            return InkWell(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute<void>(
                    builder: (BuildContext context) {
                      return GestureDetector(
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                        child: Container(
                          color: Colors.white,
                          alignment: Alignment.center,
                          child: Hero(
                            tag: icon,
                            child: Icon(
                              icon.iconData,
                              size: 100,
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                );
              },
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Hero(tag: icon, child: Icon(icon.iconData)),
                  Container(
                    padding: const EdgeInsets.only(top: 16.0),
                    child: Text(
                      icon.title,
                      style: Theme.of(context).textTheme.labelSmall?.copyWith(
                            color: Colors.black,
                          ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isSearching = !_isSearching;
            if (!_isSearching) _searchTerm = '';
          });
        },
        child: Icon(_isSearching ? Icons.close : Icons.search),
      ),
    );
  }

  PreferredSizeWidget _titleBar() {
    return AppBar(
      title: const Text('YX Icon Fonts Gallery'),
    );
  }

  PreferredSizeWidget _searchBar(BuildContext context) {
    return AppBar(
      title: TextField(
        autofocus: true,
        decoration: const InputDecoration(hintText: '搜索图标...'),
        onChanged: (value) {
          setState(() {
            _searchTerm = value;
          });
        },
      ),
      leading: IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () {
          setState(() {
            _isSearching = false;
            _searchTerm = '';
          });
        },
      ),
    );
  }
}