前言

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

一、FlutterLogo简介

文档对这个widget的介绍比较简单：Flutter是一个widget，用来展示Flutter的logo。这个Widget遵循IconTheme。

二、FlutterLogo用法

默认情况下,FlutterLogo的尺寸是大小是24。

我们可以通过代码看下默认显示的效果。例如我们通过下面的代码展示一个居中的FlutterLogo.效果图如图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.
    );
  }
}

图1.居中显示的FlutterLogo

默认情况下FlutterLogo的大小为24，FlutterLogo的大小是通过改变size来改变FlutterLogo的大小。

FlutterLogo还有一个textColor属性，我们可以通过改变textColor属性，来改变文字的颜色，当然默认情况下只改变textColor是看不到文字的，因为FlutterLogo还有一个style属性，来控制FlutterLogo的显示样式的。默认情况下，Flutter是只显示图标不显示文字的。默认情况下，style的属性值是makeOnly，这个时候只显示图标，当我们把style设置成horizontal的时候，左边显示Flutter的图标，右边显示文字。当style设置成stacked的时候，上面显示Flutter的logo,下方显示Flutter文字。下面写一个Demo，展示了更改style属性之后Flutter的显示效果。

图2.通过设置style改变FlutterLogo文字和图标的显示效果

当我们把style的属性设置成horizontal或者stacked的时候，再次设置textColor,文字颜色就生效了。

Flutterlogo也是支持动画效果的，duration属性控制动画时长，curve属性控制动画效果的曲线。默认情况下duration是0.75秒，curve的默认值是Curves.fastOutSlowIn。有兴趣的话，可以改变下这两个属性的值看下显示效果。

Flutter中的FlutterLogo组件

前言

一、FlutterLogo简介

二、FlutterLogo用法

猜你喜欢