Flutter 基础 widgets -- Icon 和 Color

常用 Icon

Flutter 集成了 MaterialApp的图标库

用法：Icon(Icons.具体名称)

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Demo'),
        // 单色 Icon
        leading: const Icon(Icons.arrow_back_ios_new),
        actions: const [
          Icon(Icons.more_horiz),
          Icon(Icons.share),
        ],
      ),
      body: Row(
        children: const [
          // 自定义 Icon 样式
          Icon(
            Icons.favorite,
            color: Colors.pink,
            size: 24,
            semanticLabel: 'Text to announce',
          ),
          Icon(
            Icons.audiotrack,
            color: Colors.green,
            size: 30,
          ),
          Icon(
            Icons.beach_access,
            color: Colors.blue,
            size: 36,
          )
        ],
      ),
    );
  }
}

 

 

常用 Color

 

Color(自定义颜色)

Flutter 中通过 ARGB 来声明颜色

Color(0xFF42A5F5); // 16进制的ARGB = 透明度 + 六位十六进制颜色

Color.fromARGB(int a, int r, int g, int b);

  const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);

  const Color.fromARGB(255, 66, 165, 245);

Color.fromRGBO(int r, int g, int b, double opacity);

  const Color.fromRGBO(66, 165, 255, 1.0);

Colors.(英文字母声明的颜色)

来自于 Material Design 提供的颜色

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Color'),
      ),
      body: Center(
          child: Text.rich(TextSpan(
        children: <TextSpan>[
          const TextSpan(
            text: '问道诗',
            style: TextStyle(
              color: Color.fromRGBO(35, 225, 125, 1.0),
              fontSize: 36,
            ),
          ),
          const TextSpan(
            text: '练得身形似鹤形',
            style: TextStyle(
              color: Color(0xFFFF9000),
              fontSize: 16,
            ),
          ),
          const TextSpan(
            text: '千株松下两涵经',
            style: TextStyle(
              color: Color.fromARGB(0xFF, 0x00, 0xFF, 0xFF),
              fontSize: 18,
            ),
          ),
          const TextSpan(
            text: '我来问道无余说',
            style: TextStyle(
              color: Color.fromARGB(66, 255, 0, 0),
              fontSize: 20,
            ),
          ),
          TextSpan(
            text: '云在青天水在瓶',
            style: TextStyle(
              color: Colors.amber[300],
              fontSize: 22,
            ),
          ),
        ],
      ))),
    );
  }
}