当前位置：网站首页>Fluent icon demo

Fluent icon demo

2022-07-02 03:58:00 【Snow pine】

Catalog

Sketch Map ：

Program entrance ：C:\Users\user\StudioProjects\myflutter\lib\main.dart

Icon usage example ：C:\Users\user\StudioProjects\myflutter\lib\basic\1\icon.dart

Program execution effect ：

Sketch Map ：

Program entrance ：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 = ' home page ';

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

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

  @override
  Widget build(BuildContext context) {
    // 1. First , Program entry  flutter  Top level components of 
    return MaterialApp(
        title: "hello myflatter", //  Title Applied in task manager ;
        //  The global theme style of the application 
        theme: ThemeData(
          primarySwatch: Colors.blueGrey,
          // fontFamily: 'Zhi_Mang_Xing', //  Global font settings 
        ),
        home: my_flutter(title: mytitle), //  The main content of the application 
        debugShowCheckedModeBanner: false //  Whether the application displays the main upper corner debugging mark 
        );
  }
}

// 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. secondly , Program entry  flutter  Scaffold components 
    return Scaffold(
      //  The head component of the application 
      appBar: AppBar(
        //  The middle header of the application 
        title: Text(title),
        // leading  It is the icon in the upper corner of the main 
        leading: IconButton(
          onPressed: () {
            print('This is home!');
          },
          icon: const Icon(Icons.view_headline),
        ),
        //  The icon group on the right side of the application header （ Multiple icons ）
        actions: [
          //  Icon 1
          IconButton(
            onPressed: () {
              print('This is share!');
            },
            icon: const Icon(Icons.share),
          ),
          //  Icon 2
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 0),
            child: IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('This is search!');
              },
            ),
          ),
          //  Icon 3
          IconButton(
            onPressed: () {
              print('This is more!');
            },
            icon: const Icon(Icons.more_vert),
          )
        ],
      ),
      // 3. This is the main component entry of the entire application content ！！
      body: const IconDemo(),
    );
  }
}

Icon usage example ：C:\Users\user\StudioProjects\myflutter\lib\basic\1\icon.dart

import 'package:flutter/material.dart';

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

  /// Icon  Icon components 
  ///     Flutter  Icon Library in 
  ///     Icon（Icons. Specific name ）
  ///
  ///  Icon address ：https://fonts.google.com/icons?selected=Material+Icons

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