显示 Flutter中的所有的 Icons

显示 Flutter中的所有的 Icons

Flutter中提供了一些 Material风格的图标,但是具体有哪些图标,不是很清楚,而且Flutter的官方文档,有时候访问还不太稳定。可以通过爬虫从Flutter官网把所有的Flutter的图标,下载下来。用Flutter创建了一个应用来显示所有的图标。

效果图

获取的图标的代码已经放在了 Github上了,欢迎自取 Flutter Material Icons,实现了两种风格的界面,

  • GridView 风格

GridView

应用的核心代码

class _MyHomePageState extends State<MyHomePage> {
  bool isListView = false;
  Color listColor = Color(0xff006a71);
  Color gridColor = Color(0xffe8505b);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Flutter Icons",
        ),
      ),
      body: isListView
          ? ListView.builder(
              itemCount: icons.length,
              itemBuilder: (context, index) {
                return Container(
                  height: 60.0,
                  margin: const EdgeInsets.symmetric(
                    horizontal: 10.0,
                    vertical: 4.0,
                  ),
                  padding: const EdgeInsets.symmetric(
                    horizontal: 20.0,
                  ),
                  decoration: BoxDecoration(
                    color: listColor,
                    borderRadius: BorderRadius.circular(6.0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Icon(
                        icons[index].icon,
                        color: Colors.white,
                        size: 30.0,
                      ),
                      Text(
                        icons[index].name,
                        style: TextStyle(color: Colors.white, fontSize: 18.0),
                      ),
                    ],
                  ),
                );
              },
            )
          : GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4,
                  mainAxisSpacing: 4.0,
                  crossAxisSpacing: 4.0),
              itemCount: icons.length,
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    color: gridColor,
                    borderRadius: BorderRadius.circular(6.0),
                  ),
                  child: Tooltip(
                    preferBelow: false,
                    message: icons[index].name,
                    child: Icon(
                      icons[index].icon,
                      size: 30.0,
                    ),
                  ),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: isListView ? gridColor : listColor,
        onPressed: () {
          setState(() {
            isListView = !isListView;
          });
        },
        child: Icon(
          Icons.all_inclusive,
        ),
      ),
    );
  }
}
  • ListView 风格

应用源码-Github