“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

📝 [Flutter] learning to form a record, [programmer essential knowledge]

📔 — Basic components of Flutter [06] Icon!

1. Write at the front

The Image component of Flutter was introduced in the previous article. Today we will continue learning about the Icon component of the basic component of Flutter.

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

[02] Container

[03] Scaffold

[04] Row/Column

The base component of Flutter [05] Image

2. Icon

A Material Design icon

A graphical icon widget drawn using the glyphs of the fonts described in IconData, such as the predefined IconData of the material in Icons.

  • Take a look at an official code example
void main() {
  runApp(
    MaterialApp(
      home: Container(
          color: Colors.white,
          child:Row(
            children:const <Widget>[
              Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              Icon(
                Icons.audiotrack,
                color: Colors.green,
                size: 30.0,
              ),
              Icon(
                Icons.beach_access,
                color: Colors.blue,
                size: 36.0[() [() [() [() [() [() }Copy the code
  • Running effect

2.1 type Icon

  • IconButton, for interactive ICONS.
  • Icons, a list of Icons available for this class (this is an icon that cannot be interacted with).
  • IconTheme, which provides environment configuration for ICONS.
  • ImageIcon, used to display ICONS from AssetImages or other ImageProvider.

2.2 Basic Attributes

  • color

    • Type: Color
    • Description: Icon color

  • icon

    • Type: IconData
    • Description: Display icon

  • semanticLabel

    • Type: String
    • Description: Semantic label, this label will not be displayed in the UI

  • size

    • Type: double
    • Description: Icon size

  • textDirection

    • Type: TextDirection
    • Description: The user renders the text direction of the icon

2.3 Icon for

The following example 👇 shows the IconButton using the Material icon “volume_up” to increase the volume

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: constCenter( child: MyStatefulWidget(), ), ), ); }}double _volume = 0.0;

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.volume_up),
          tooltip: 'Increase volume by 10',
          onPressed: () {
            setState(() {
              _volume += 10;
            });
          },
        ),
        Text('Volume : $_volume')],); }}Copy the code
  • So it looks something like this

Icons provide many small Icons for everyday use, almost any icon you can think of.

More content in this 👉 API. Flutter. Dev/flutter/wid…

3. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹