Open In App

Flutter - FlutterLogo Widget

Last Updated : 14 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

FlutterLogo 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:

PropertyDescription
sizeA double value that controls the size of the Flutter logo.
textColorA Color that sets the color of the "Flutter" text when the logo style includes text.
styleA FlutterLogoStyle value that determines the layout of the logo and text (markOnly, horizontal, or stacked).
durationA Duration object that defines how long the animation lasts when logo properties change.
curveA Curve that specifies the type of animation curve (e.g., easeIn, linear, fastOutSlowIn).


Example 1: Basic Usage

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:

FlutterLogo_Widget


Explanation:

  • In the AppBar, the FlutterLogo is placed inside a Container with a white background. Even though the size is set to 7, the AppBar limits how big the logo can appear.
  • For the body, I’ve increased the logo size to a generous 300 pixels. I've chosen a stacked style, which means the Flutter mark sits right above the "Flutter" text, and the text color is a vibrant blue. This creates a nice, eye-catching presentation!


Example 2: With Animation

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: 1),
              curve: Curves.easeIn,
              textColor: Colors.amber,
              style: FlutterLogoStyle.stacked,
            ), //FlutterLogo
          ), //Container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}


Output:


Explanation:

  • This example showcases an animated FlutterLogo implemented with a StatefulWidget.
  • When the logo is tapped, it alternates between two sizes: 100 and 200 pixels.
  • The animation duration is set to 500 milliseconds and features an ease-in curve, providing a smooth and natural transition.
  • Additionally, the text color is set to amber.

Article Tags :

Similar Reads