Filter by Widgets


FlutterLogo Widget

This Tutorials is posted by niebin312 at 04-03-2019 05:13:04



In this tutorial, I will tell you how to use the FlutterLogo in the flutter.

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 code
SizedBox(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.

Whole code in GitHub,star to support.


0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Recent articles

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.