ionicons_named #

目录 #

• 在线示例
• 介绍
• 使用方法

在线示例 #

• Web

介绍 #

这个库为所有基于 ionicons 的图标提供了自动生成功能，并且在 Flutter 中使用了 ionicons 包。

请注意，如果你包含此库，则 Flutter 在构建 Android 和 iOS 应用时会报错，提示无法树形摇动图标。你必须在构建时添加 --no-tree-shake-icons 标志。例如：

flutter build apk --release --no-tree-shake-icons

使用方法 #

import 'package:ionicons_named/ionicons_named.dart';
…
Icon(ionicons[‘boat_outline’]),
…

示例代码

// 导入必要的包
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:ionicons_named/ionicons_named.dart';
// 定义一个示例图标类
class ExampleIcon {
final IconData iconData;
final String title;
ExampleIcon(this.iconData, this.title);
}
void main() {
runApp(const MaterialIconGalleryApp());
}
class MaterialIconGalleryApp extends StatelessWidget {
const MaterialIconGalleryApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Ionicons 图标库’,
theme: ThemeData.light().copyWith(
iconTheme: const IconThemeData(
color: Colors.black87,
size: 36.0,
),
textTheme: const TextTheme(
bodyMedium: TextStyle(
color: Colors.black87,
fontSize: 16.0,
),
),
),
home: const MaterialIconGalleryHome(),
);
}
}
class MaterialIconGalleryHome extends StatefulWidget {
const MaterialIconGalleryHome({super.key});
@override
State<StatefulWidget> createState() => MaterialIconGalleryHomeState();
}
class MaterialIconGalleryHomeState extends State<MaterialIconGalleryHome> {
final List<ExampleIcon> icons = [];
@override
void initState() {
super.initState();
// 将所有的图标添加到列表中
for (var entry in ionicons.entries) {
  icons.add(ExampleIcon(entry.value, entry.key));
}
}
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: 300,
      ),
      itemBuilder: (context, index) {
        final icon = filteredIcons[index];

        return InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute&lt;void&gt;(
                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: &lt;Widget&gt;[
              Hero(tag: icon, child: Icon(icon.iconData)),
              Container(
                padding: const EdgeInsets.only(top: 16.0),
                child: Text(icon.title),
              )
            ],
          ),
        );
      },
    ),
  ),
);
}
AppBar _titleBar() {
return AppBar(
title: const Text(‘Ionicons 图标库’),
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {
ModalRoute.of(context)?.addLocalHistoryEntry(
LocalHistoryEntry(
onRemove: () {
setState(() {
_searchTerm = ‘’;
_isSearching = false;
});
},
),
);
          setState(() {
            _isSearching = true;
          });
        })
  ],
);
}
AppBar _searchBar(BuildContext context) {
return AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_left),
onPressed: () {
setState(
() {
Navigator.pop(context);
_isSearching = false;
_searchTerm = ‘’;
},
);
},
),
title: TextField(
onChanged: (text) => setState(() => _searchTerm = text),
autofocus: true,
style: const TextStyle(fontSize: 18.0),
decoration: const InputDecoration(border: InputBorder.none),
),
);
}
}