Flutter – FlutterLogo 小工具

FlutterLogo小部件很简单，因为它的声音，它只是在图标的形式flutter标志。这个小部件还内置了flutter SDK 。此小部件可以用作图像或图标的占位符。下面我们将看到它的所有属性和构造函数的实现。

FlutterLogo 类的构造函数：

const FlutterLogo(
{Key key,
double size,
Color textColor: const Color(0xFF757575),
FlutterLogoStyle style: FlutterLogoStyle.markOnly,
Duration duration: const Duration(milliseconds: 750),
Curve curve: Curves.fastOutSlowIn}
)

FlutterLogo 小部件的属性：

• 曲线：该属性以曲线类为对象。如果其他属性发生变化，它会控制动画的类型。
• duration： duration属性以Duration类为对象来控制动画发生的时间。
• size：这个属性需要一个double值来控制flutter logo的大小。
• style：该属性以FlutterLogoStyle作为对象。它控制“Flutter”文本的样式和位置。
• textColor：该属性以Color类为对象来确定文本 ‘ Flutter’的颜色。

示例 1：

Dart

import 'package:flutter/material.dart';
 
//Material design library
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: Container(
            color: Colors.white,
            padding: EdgeInsets.all(3),
            /** FlutterLogo Widget **/
            child: FlutterLogo(
              size: 10,
            ), //FlutterLogo
          ), //Container
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          child: Container(
            /** FlutterLogo Widget **/
            child: FlutterLogo(
              size: 300,
              textColor: Colors.blue,
              style: FlutterLogoStyle.stacked,
            ), //FlutterLogo
          ), //Container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

输出：

说明：在这种flutter应用的AppBar控件，全球领先的财产是持有FlutterLogo widget作为容器的子控件(它提供了一个白色背景的标志)。在 FlutterLogo 小部件中，大小为 10 像素，(现在需要注意的是，即使我们将大小增加到 100 像素，徽标的大小也将与 AppBar 约束的大小相同。

在应用程序的主体中， FlutterLogo再次是Container小部件的子项。在这里，logo 的大小为300像素，文本颜色为蓝色，样式为stack ，这使得flutter logo 堆叠在文本 ‘ Flutter’ 之上。

作为一个非常简单的小部件，正如我们在上面看到的那样，它可以在许多地方找到它的临时应用程序。

示例 2：

Dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
 //imported the flutter widget
 //and material design packages
 
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: Container(
            color: Colors.white,
            padding: EdgeInsets.all(3),
            /** FlutterLogo Widget **/
            child: FlutterLogo(
              size: 10,
            ), //FlutterLogo
          ), //Container
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          child: Container(
            /** FlutterLogo Widget **/
            child: FlutterLogo(
              size: 100,
              duration: Duration(seconds: 0.5),
              curve: Curves.easeIn,
              textColor: Colors.amber,
              style: FlutterLogoStyle.stacked,
            ), //FlutterLogo
          ), //Container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

输出：

说明：在这个例子中，我们在应用主体的FlutterLogo中添加了一个小动画。在这里， duration属性设置为半秒，这意味着动画将在那个时间运行。并且通过Curve属性的应用，将动画效果设置为easeIn，在app打开的时候，投射出一朵朵盛开的画面。最后， textColor设置为琥珀色。

作为一个非常简单的小部件，正如我们在上面看到的那样，它可以在许多地方找到它的临时应用程序。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！