Flutter速来系列6-1: Flutter的字体图标和Material Design

276 阅读2分钟

字体图标

字体图标是一种利用字体文件中的特定字符来表示图标的技术。它们使用了字体的可缩放性和矢量性质,使得图标可以以任意大小和颜色进行渲染,而不会失去清晰度。

在移动应用和Web开发中,字体图标已经成为一种流行的选择。相比于使用图片图标,使用字体图标有以下几个优势:

    1. 可扩展性:由于字体图标是矢量图形,可以在不失真的情况下进行放大或缩小。
    1. 颜色控制:字体图标可以通过更改文本颜色来改变图标的颜色,使得图标的样式和主题可以轻松地调整。

Flutter的字体图标 自带的

颜色在Material Design中扮演了重要的角色。Material Design是由Google提出的一套设计准则,用于创建直观、一致和美观的移动应用界面。在Material Design中,颜色被广泛应用于不同的元素,包括字体图标。

在Flutter中,可以使用Icons类来访问内置的字体图标。Icons类提供了大量的预定义图标,如adddeletehome等。这些图标是基于Material Design规范的,并且可以轻松地与其他Flutter组件进行集成。

要改变字体图标的颜色,可以通过使用Icon组件的color属性来指定颜色。例如,要将一个home图标设置为红色,可以使用以下代码:

dartCopy code
Icon(Icons.home, color: Colors.red)

除了指定固定的颜色,Flutter还提供了许多颜色常量,如Colors.redColors.blue等。此外,还可以使用Color类的其他方法和属性来创建自定义颜色。

使用字体图标和颜色可以为应用程序的用户界面带来一致性和美观性。通过调整字体图标的大小和颜色,可以创建各种视觉效果,以满足应用程序的设计需求。字体图标和颜色的结合使用使得应用程序的图标在各种设备和分辨率下保持清晰,并提供更好的自定义和样式控制。

来个代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: IconPage(),
  ));
}

class IconPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Icon Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.home,
              color: Colors.blue,
              size: 48.0,
            ),
            SizedBox(height: 16.0),
            Icon(
              Icons.favorite,
              color: Colors.red,
              size: 48.0,
            ),
            SizedBox(height: 16.0),
            Icon(
              Icons.star,
              color: Colors.orange,
              size: 48.0,
            ),
          ],
        ),
      ),
    );
  }
}

image.png


在Android Studio的帮助之下,还是很方便的。

图标可以预览。 image.png

这个网址,可以比较全面地,看下图标。 api.flutter.dev/flutter/mat…