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作为对象。它控制“Futter”文本的样式和位置。
- textColor:该属性以Color类为对象来确定文本 ‘ Flutter’的颜色。
示例 1:
Dart
import 'package:flutter/material.dart';
//Material design liberary
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
);
}
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
);
}
输出:
说明:在这个 futter 应用的AppBar小部件中,领先的属性是持有一个FlutterLogo小部件作为容器小部件的子部件(它为徽标提供白色背景)。在 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设置为琥珀色。
作为一个非常简单的小部件,正如我们在上面看到的那样,它可以在许多地方找到它的临时应用程序。