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小部件的属性:
- curve:此属性将Curve类作为对象。如果其他属性正在更改,则它控制动画的类型。
- duration: duration属性将Duration类作为对象来控制动画发生的时间。
- size:此属性采用双精度值来控制flutter徽标的大小。
- 样式:此属性将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 widget作为容器的子控件(它提供了一个白色背景的标志)。在FlutterLogo小部件中,大小为10像素(现在要注意的是,即使我们将大小增加到100像素,徽标的大小也将与受AppBar约束的大小相同。
在应用程序主体中, FlutterLogo再次是Container小部件的子级。在这里,徽标的大小为300像素,文本的颜色为蓝色,样式被堆叠,这使得flutter徽标被堆叠在文本’ 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,在应用程序打开的情况下,该动画效果像花朵盛开一样投射图像。最后,将textColor设置为琥珀色。
作为一个非常简单的小部件,它可以在我们上面看到的许多地方找到其临时应用程序。
想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处前往由我们的专家精心策划的指南,以使您立即做好行业准备!