Flutter 图标

2025年3月17日 | 阅读 3 分钟

图标是代表应用程序或任何特定实体的图形图像，包含对用户的意义。它既可以选择也可以不选择。例如，公司的徽标是不可选择的。有时它也包含一个超链接，可以转到另一个页面。它也充当详细解释实际实体的标志。

Flutter 提供了 Icon Widget 在我们的应用程序中创建图标。我们可以使用内置图标或自定义图标在 Flutter 中创建图标。Flutter 在 Icons 类中提供了所有图标的列表。在本文中，我们将学习如何在应用程序中使用 Flutter 图标。

Icon Widget 属性

Flutter 图标小部件具有不同的属性用于自定义图标。这些属性解释如下

属性	描述
icon	它用于指定要在应用程序中显示的图标名称。通常，Flutter 使用 Material Design 图标，这些图标是常用操作和项目的符号。
color	它用于指定图标的颜色。
大小	它用于以像素为单位指定图标的大小。通常，图标具有相同的高度和宽度。
textDirection	它用于指定图标将呈现的方向。

让我们使用不同的示例来理解 Flutter 图标。

示例 1

在这个例子中，我们将看到具有默认值的基本图标小部件。首先，在 IDE 中创建一个项目，导航到 lib 文件夹，然后打开 main.dart 文件。现在，替换 main.dart 文件中的以下代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyIconPage(),
    );
  }
}

class MyIconPage extends StatefulWidget {
  @override
  _MyIconPageState createState() => _MyIconPageState();
}

class _MyIconPageState extends State<MyIconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Tutorial'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Icon(Icons.camera_enhance),
            Icon(Icons.camera_front),
            Icon(Icons.camera_rear),
      ]),
    );
  }
}

输出

当我们运行此项目时，它将显示类似于我们在模拟器或设备中使用的以下屏幕截图的 UI

示例 2

在这个例子中，我们将看到如何自定义图标。在这里，我们将使用 size 属性 来根据我们的需要调整图标大小。我们还将看到 color 属性 来更改图标的默认颜色。所以，打开 main.dart 文件并将其替换为以下代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyIconPage(),
    );
  }
}

class MyIconPage extends StatefulWidget {
  @override
  _MyIconPageState createState() => _MyIconPageState();
}

class _MyIconPageState extends State<MyIconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Tutorial'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Icon(
              Icons.camera_enhance,
              size: 70,
              color:Colors.green
            ),
            Icon(
              Icons.camera_front,
              size: 70,
              color:Colors.orange
            ),
            Icon(
              Icons.camera_rear,
              size: 70,
              color:Colors.black
            ),
      ]),
    );
  }
}

输出

当我们运行此项目时，它将显示类似于我们在模拟器或设备中使用的以下屏幕截图的 UI

示例 3

大多数时候，我们已经看到图标在我们的应用程序中总是在其下方包含一个文本。在这个例子中，我们将看到如何将 Text 小部件 与 Icons 小部件一起使用。所以，打开 main.dart 文件并将其替换为以下代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyIconPage(),
    );
  }
}

class MyIconPage extends StatefulWidget {
  @override
  _MyIconPageState createState() => _MyIconPageState();
}

class _MyIconPageState extends State<MyIconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Tutorial'),
      ),
      body: Column(children: <Widget>[
        //icon with label below it
        Container(
          padding: EdgeInsets.all(30),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Column(children: <Widget>[
                  Icon(
                    Icons.camera_front,
                    size: 70
                  ),
                  Text('Front Camera'),
                ]),
                Column(children: <Widget>[
                  Icon(
                      Icons.camera_enhance,
                      size: 70
                  ),
                  Text('Camera'),
                ]),
                Column(children: <Widget>[
                  Icon(
                      Icons.camera_rear,
                      size: 70
                  ),
                  Text('Rear Camera'),
                ]),
              ]
            ),
          )
        ],
      )
    );
  }
}

输出

当我们运行此项目时，它将显示类似于我们在模拟器或设备中使用的以下屏幕截图的 UI

下一主题Flutter 图像

Flutter 图标

Icon Widget 属性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 图标

Icon Widget 属性

相关帖子

Flutter 进度条

Flutter Scaffold

Flutter GridView

Flutter 行和列

Flutter 卡片

Flutter Container

Flutter 弹窗

Flutter 复选框

Flutter 表格

Flutter 单选按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器