Flutter – FlutterLogo Widget

FlutterLogo widget is as simple as it sounds, it is just the flutter logo in the form of an icon. This widget also comes built-in with flutter SDK. This widget can found its use as a placeholder for an image or icon. Below we will see its implementation with all its properties and constructor.

Constructor of FlutterLogo Class:

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

Properties of FlutterLogo Widget:

• curve: This property takes in Curve class as the object. It controls the type of animation if other properties are changing.
• duration: The duration property takes in Duration class as the object to control the time for which the animation will occur.
• size: This property takes in a double value to control the size of the flutter logo.
• style: This property takes in FlutterLogoStyle as the object. It controls the style and position of the ‘Flutter’ text.
• textColor: This property takes in Color class as the object to determine the color of the text ‘Flutter’.

Example 1:

Dart

import 'package:flutter/material.dart';

//Material design library
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
  );
}

Output:

Explanation: In the AppBar widget of this flutter app, the leading property is holding a FlutterLogo widget as a child of Container widget ( it provides a white background to the logo). In the FlutterLogo widget, the size is 10 px,( now a thing to note is even if we increase the size to 100 px the logo will be of the same size as it is constrained by the AppBar. 

In the body of the app, the FlutterLogo is again a child of the Container widget. Here, the size of the logo is 300 pixels the color of the text is blue and the style is stacked, which is making the flutter logo to be stacked on top of the text ‘Flutter’.

Being a very simple widget it can find its temporary application in many places as we have seen above.

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

Output:

Explanation: In this example, we have added a little animation to the FlutterLogo in the body of the app. Here, the duration property is set to half-second, which means the animation will be in action at that time. And with the application of Curve property, the animation effect is set to easeIn, which at the instance of app opening, projects the image like a flower is blooming. And at the end, the textColor is set to amber.

Being a very simple widget it can find its temporary application in many places as we have seen above.