Table of contents

foreword

今天在查看Flutter源码的时候，发现了一个有意思的组件FlutterLogo.顺便调用了一下发现挺有意思的，代码以及实现比较简单，新手阅读源码的话，可以看下这个Widget的内部实现，用它练练手。

1. Introduction to FlutterLogo

The document's introduction to this widget is relatively simple: Flutter is a widget used to display the Flutter logo. This Widget follows IconTheme.

Two, FlutterLogo usage

By default, the size of the FlutterLogo is 24.

We can see the effect of the default display through the code. For example, we use the following code to display a centered FlutterLogo. The rendering is shown in Figure 1:

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FlutterLogo'),
      ),
      body: const Center(
        child: FlutterLogo(),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Figure 1. The FlutterLogo displayed in the center

By default, the size of FlutterLogo is 24, and the size of FlutterLogo is changed by changing the size to change the size of FlutterLogo.

FlutterLogo also has a textColor attribute. We can change the color of the text by changing the textColor attribute. Of course, by default, only changing the textColor will not see the text, because FlutterLogo also has a style attribute to control the display style of FlutterLogo. By default, Flutter only displays icons but not text. By default, the attribute value of style is makeOnly, and only the icon is displayed at this time. When we set the style to horizontal, the Flutter icon is displayed on the left and the text is displayed on the right. When the style is set to stacked, the Flutter logo is displayed on the top, and the Flutter text is displayed on the bottom. Write a demo below to show the display effect of Flutter after changing the style attribute.

Figure 2. Change the display effect of FlutterLogo text and icons by setting style

When we set the style attribute to horizontal or stacked, set textColor again, and the text color will take effect.

Flutterlogo also supports animation effects, the duration attribute controls the animation duration, and the curve attribute controls the animation curve. By default, duration is 0.75 seconds, and the default value of curve is Curves.fastOutSlowIn. If you are interested, you can change the values of these two properties to see the display effect.

FlutterLogo component in Flutter

foreword

1. Introduction to FlutterLogo

Two, FlutterLogo usage

Guess you like