FlutterLogo and Attributes

FlutterLogo and Attributes

ยท

2 min read

In the world of Flutter development, presenting a brand's identity is essential for creating visually cohesive and recognizable applications. The FlutterLogo widget is a built-in tool designed specifically for displaying the official Flutter logo effortlessly. In this blog post, we'll delve into the FlutterLogo widget, explore its key attributes, and provide a complete example to illustrate its usage.

The FlutterLogo widget is a part of the Flutter framework that simplifies the integration of the official Flutter logo into your application. It allows developers to showcase the Flutter brand identity seamlessly and is highly customizable to fit various design requirements.

Attributes of FlutterLogo:

  1. size:

    • Specifies the size of the FlutterLogo.
  2. colors:

    • Determines the color scheme of the FlutterLogo. This can be a single color or a FlutterLogoColorScheme object for more customization.
  3. style:

    • Defines the style of the FlutterLogo, such as horizontal or stacked.
  4. textColor:

    • Sets the color of the "Flutter" text when the FlutterLogo style includes text.
  5. duration:

    • Specifies the duration of the animation when the FlutterLogo is pressed.
  6. curve:

    • Determines the curve of the animation when the FlutterLogo is pressed.

Example: Let's create a simple Flutter app that includes the FlutterLogo widget, demonstrating how to customize its attributes.

// main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterLogo Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterLogo Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Default FlutterLogo
            FlutterLogo(),

            SizedBox(height: 20.0),

            // Customized FlutterLogo
            FlutterLogo(
              size: 100.0,
              colors: FlutterLogoColorScheme.dark,
              style: FlutterLogoStyle.horizontal,
              textColor: Colors.blue,
              duration: Duration(seconds: 1),
              curve: Curves.bounceInOut,
            ),
          ],
        ),
      ),
    );
  }
}

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย