flutter 图标演示

目录

示意图：

程序入口：C:\Users\user\StudioProjects\myflutter\lib\main.dart

图标使用示例：C:\Users\user\StudioProjects\myflutter\lib\basic\1\icon.dart

程序执行效果：

---

示意图：

程序入口：C:\Users\user\StudioProjects\myflutter\lib\main.dart

import 'package:flutter/material.dart';
// import 'basic/1/text.dart';
import 'basic/1/icon.dart';

String mytitle = '首页';

void main(List args) {
  return runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // 1.首先，程序进入 flutter 的顶级组件
    return MaterialApp(
        title: "hello myflatter", // 应用在任务管理器中的标题；
        // 应用程序的全局主题样式
        theme: ThemeData(
          primarySwatch: Colors.blueGrey,
          // fontFamily: 'Zhi_Mang_Xing', // 全局字体设置
        ),
        home: my_flutter(title: mytitle), // 应用程序的主内容
        debugShowCheckedModeBanner: false // 应用是否显示主上角调试标记
        );
  }
}

// ignore: camel_case_types
class my_flutter extends StatelessWidget {
  const my_flutter({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    // 2.其次，程序进入 flutter 的脚手架组件
    return Scaffold(
      // 应用程序的头部组件
      appBar: AppBar(
        // 应用程序的头部中间标题
        title: Text(title),
        // leading 是主上角的图标
        leading: IconButton(
          onPressed: () {
            print('This is home!');
          },
          icon: const Icon(Icons.view_headline),
        ),
        // 应用程序的头部右边图标组（多个图标）
        actions: [
          // 图标1
          IconButton(
            onPressed: () {
              print('This is share!');
            },
            icon: const Icon(Icons.share),
          ),
          // 图标2
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 0),
            child: IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('This is search!');
              },
            ),
          ),
          // 图标3
          IconButton(
            onPressed: () {
              print('This is more!');
            },
            icon: const Icon(Icons.more_vert),
          )
        ],
      ),
      // 3.这是整个应用程序内容的主体组件入口！！
      body: const IconDemo(),
    );
  }
}

图标使用示例：C:\Users\user\StudioProjects\myflutter\lib\basic\icon.dart

import 'package:flutter/material.dart';

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

  /// Icon 图标组件
  ///     Flutter 中的图标库
  ///     Icon（Icons.具体名称）
  ///
  /// 图标地址：https://fonts.google.com/icons?selected=Material+Icons

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: const [
          Text(
            'Icon 图标',
            style: TextStyle(
              fontSize: 30,
              color: Colors.deepOrange,
            ),
          ),
          Icon(Icons.home), // 图标
          Icon(Icons.settings), // 图标
          Icon(Icons.favorite), // 图标
        ],
      ),
    );
  }
}

程序执行效果：

Flutter 中文网提供了在线书籍，学习 Flutter 不需要买书学习，传送门：

Summary | 《Flutter实战·第二版》- Preview (flutterchina.club)https://book.flutterchina.club/