FlutterLogo Widget – Flutter Widget Guide By Flutter Agency

· 4 min read

What is FlutterLogo?

The FlutterLogo Widget, in the widget form. This widget respects the IconTheme.

The constructor of FlutterLogo Widget will look like below :

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,
  });

In Above Constructor all fields marked with @required must not be empty.

How to use AnimatedDefaultTextStyle Widget in Flutter?

The following code snippet tells us how to implement AnimatedDefaultTextStyle Widget in Flutter.

 FlutterLogo(
              size: 200,
            ),

The FlutterLogo Widget will look like below :

Logo

FlutterLogo Widget

 Properties :

  • colors: As the name, we have seen, it is about the color, but you should know the parameter is a MaterialColor. Code Snippet will look like below :
colors: Colors.red,

The complete Source Code will look like below :

 FlutterLogo(
              colors: Colors.red,
              size: 200,
            ),

We will get output like below:

Flutter-Logo

Flutter Color

  • 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 understand this with example.
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,
            ),
          ],
        ),

We will get output like below:

flutter-logo-Style

FlutterLogo Style

If the properties of the FlutterLogo have changed, such as color, style, and size, then there will be an animation that occurs. So the duration parameter controls the time of the animation. The curve controls the type of animation.

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: Colors.green,
                child: Text(
                  "Change\nSize",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                ),
                onPressed: () {
                  setState(() {
                    _size += 50;
                    if (_size > 200) {
                      _size = 50.0;
                    }
                  });
                },
                shape: CircleBorder(
                  side: BorderSide(
                    color: Colors.red,
                    width: 10,
                  ),
                ),
              ),
            )
          ],
        ),

In the above code, we have used a Container Widget. We will get output like below:

Flutter Logo

Flutter Logo

Conclusion:

In this article, we have been through What is FlutterLogo Widget in Flutter along with how to implement it in a Flutter.

Still, need more assistance?

We are happy to help you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply