【Flutter3.8x】flutter从入门到实战基础教程(五):Material Icons图标的使用

风清云淡_A2025-08-03 15:01

flutter给我们内置准备了很多图标，这些图标可以使我们在没有设计师的前提下，也能做出自己满意的app

icon网站

https://material.io/tools/icons/

进入网站后，点击我们需要的图标，然后滑动找到flutter的tab选项，就可以看到在fluuter中的图标名字了，很方便

实战效果

代码实现

dart 复制代码

import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图标'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.add_circle_outline),
            Icon(Icons.add_circle_outlined),
            Icon(Icons.add_circle_outlined,size: 50,),
            Icon(Icons.add_circle_outlined,color: Colors.red,size: 50,),
            Icon(Icons.shop,size: 60,color: Color(0xff72b236),),
            Icon(MdiIcons.outdoorLamp),
            Icon(Icons.perm_scan_wifi),
            Icon(Icons.power_settings_new),
            Icon(Icons.output),
            Icon(Icons.hourglass_full)
          ],
        ),
      )
    );
  }
}

第三方插件的使用

如果有自己喜欢的第三方图标，也可以拿过来用

配置依赖

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  material_design_icons_flutter: ^5.0.5955-rc.1

安装

bash 复制代码

flutter pub get

页面引入

这样就可以在我们的页面中使用第三方图标了