Before start
The is a small widget, just show a flutter logo. But It is very interesting. Before telling its detail, let's create an empty page to contain our tutorial code.
import "package:flutter/material.dart";import 'package:flutter_widgets/const/_const.dart';class FlutterLogoPage extends StatefulWidget {_FlutterLogoState createState() => _FlutterLogoState();}class _FlutterLogoState extends State<FlutterLogoPage> {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(PageName.FLUTTER_LOGO),),body: SingleChildScrollView(child: Column(children: <Widget>[//our codeSizedBox(height: 600)],),),);}}
It shows nothing, but with a title as follows.
Simple Use
If you want to use the FlutterLogo, just add it as follows.
FlutterLogo(size: 100,),
It will show like this, it shows just a logo of the flutter.
Constructor
As common as we do before, I will let you know the constructor of the FlutterLogo
.
const FlutterLogo({Key key,this.size,this.colors,this.textColor = const Color(0xFF616161),this.style = FlutterLogoStyle.markOnly,this.duration = const Duration(milliseconds: 750),this.curve = Curves.fastOutSlowIn,})
We have learned the size parameter, this parameter controls the size of the FlutterLogo
. So Let's look at the other parameter.
colors
As the name we have seen, it is about the color, but you should know the parameter is aMaterialColor
. So let's use it.
Container(constraints: BoxConstraints.expand(height: 100),child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[FlutterLogo(colors: Colors.red,size: 100,),FlutterLogo(colors: Colors.green,size: 100,),FlutterLogo(colors: Colors.yellow,size: 100,),],),),
style
When we look at its definition, you can see this as below.
final FlutterLogoStyle style;
The FlutterLogoStyle
has three types, the markOnly
only show the logo, the horizontal
show logo and label in the horizontal direction, the stacked
show both but vertical direction. Let's look at the codes.
Widget _styleLogo() => Column(children: <Widget>[Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[Text("markOnly",style: TextStyle(color: Colors.blueAccent, fontSize: 30),),Text("horizontal",style: TextStyle(color: Colors.orangeAccent, fontSize: 30),),Text("stacked",style: TextStyle(color: Colors.purpleAccent, fontSize: 30),)],),Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[FlutterLogo(size: 100,colors: Colors.blue,style: FlutterLogoStyle.markOnly,),FlutterLogo(size: 100,colors: Colors.orange,style: FlutterLogoStyle.horizontal,),FlutterLogo(size: 100,colors: Colors.purple,style: FlutterLogoStyle.stacked,),],),],);
It will show like this.
duration & curve
If the properties of the FlutterLogo
have changed, such as color, style, and size, then there will be an animation occur. So the duration
parameter controls the time of the animation. The curve
controls the type of animation. Let's see an example.
Widget _durLogo() => Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[FlutterLogo(size: _size,colors: Colors.blue,duration: Duration(seconds: 2),curve: Curves.bounceOut,),Container(width: 100,height: 100,child: RaisedButton(padding: EdgeInsets.all(10),color: GREEN,child: Text("Change\nSize",style: TextStyle(color: TEXT_BLACK,fontSize: 20,),textAlign: TextAlign.center,),onPressed: () {setState(() {_size += 50;if (_size > 200) {_size = 50.0;}});},shape: CircleBorder(side: BorderSide(color: RED, width: 10)),),)],);
Then it will show as follows and If you click the button, it will change the size of the logo, so you can see the animation with our setting.
Conclusion
The FlutterLogo
is a simple widget, it is easy to use, we mainly use its size,colors,style and animation. But you should code it, then you will learn more detail about the widgets.
Thanks for your reading!
The end.