# Widgets 09 | FlutterLogo

## 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.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class FlutterLogoPage extends StatefulWidget {
  @override
  _FlutterLogoState createState() => _FlutterLogoState();
}

class _FlutterLogoState extends State<FlutterLogoPage> {
  @override
  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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWptoIhfEM6owQBdtR8%2F-LWpupRo6MX7TKgZVW3y%2Fflutter-logo-01.png?alt=media\&token=f6eb525d-20cb-45c9-a24a-302e872b7f70)

## Simple Use

If you want to use the FlutterLogo, just add it as follows.

```dart
FlutterLogo(size: 100,),
```

It will show like this, it shows just a logo of the flutter.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWptoIhfEM6owQBdtR8%2F-LWpvWJLffHCAOvxkabf%2Fflutter-logo-02.png?alt=media\&token=36eca4c4-d734-43be-a207-7a8bd221cd83)

## Constructor

As common as we do before, I will let you know the constructor of the `FlutterLogo`.

```dart
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 a`MaterialColor`. So let's use it.

```dart
 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,
                  ),
                ],
              ),
            ),
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWptoIhfEM6owQBdtR8%2F-LWpy04B3hn65SIjrSKP%2Fflutter-logo-03.png?alt=media\&token=7a683f69-abda-498c-ba59-70f9d35952e7)

## style

When we look at its definition, you can see this as below.

```dart
  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.

```dart
 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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWptoIhfEM6owQBdtR8%2F-LWq03v6EiN5nq3HZW8K%2Fflutter-logo-04.png?alt=media\&token=ca2eb395-1e7e-47dc-8564-f6555ab09f5b)

## 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.

```dart
  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.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWptoIhfEM6owQBdtR8%2F-LWq5jWiJ425kEzLKGxI%2Fflutter_logo.gif?alt=media\&token=f30bdd2f-a1b4-445f-8997-c5c95944093b)

## 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](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | Medium                                        |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |