Flutter – Widget FlutterLogo

El widget FlutterLogo es tan simple como parece, es solo el logotipo de Flutter en forma de ícono. Este widget también viene integrado con flutter SDK . Este widget puede encontrar su uso como marcador de posición para una imagen o icono. A continuación veremos su implementación con todas sus propiedades y constructor.

Constructor de la clase FlutterLogo:

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

Propiedades del widget FlutterLogo:

• curve: Esta propiedad toma la clase Curve como el objeto. Controla el tipo de animación si otras propiedades están cambiando.
• duración: la propiedad de duración toma la clase Duration como el objeto para controlar el tiempo durante el cual ocurrirá la animación.
• tamaño: esta propiedad toma un valor doble para controlar el tamaño del logotipo de flutter.
• estilo: esta propiedad toma FlutterLogoStyle como el objeto. Controla el estilo y la posición del texto ‘Flutter’.
• textColor: esta propiedad toma la clase Color como el objeto para determinar el color del texto ‘ Flutter’ .

Ejemplo 1:

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

Producción:

Explicación: en el widget AppBar de esta aplicación flutter, la propiedad principal contiene un widget FlutterLogo como elemento secundario del widget Container (proporciona un fondo blanco al logotipo). En el widget FlutterLogo, el tamaño es de 10 px (ahora, algo a tener en cuenta es que incluso si aumentamos el tamaño a 100 px, el logotipo tendrá el mismo tamaño que el que está limitado por la barra de aplicaciones. 

En el cuerpo de la aplicación, FlutterLogo es nuevamente un elemento secundario del widget Container . Aquí, el tamaño del logotipo es de 300 píxeles, el color del texto es azul y el estilo está apilado , lo que hace que el logotipo de flutter se apile sobre el texto ‘Flutter’.

Al ser un widget muy simple, puede encontrar su aplicación temporal en muchos lugares, como hemos visto anteriormente.

Ejemplo 2:

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

Producción:

Explicación: En este ejemplo, agregamos una pequeña animación al FlutterLogo en el cuerpo de la aplicación. Aquí, la propiedad de duración se establece en medio segundo, lo que significa que la animación estará en acción en ese momento. Y con la aplicación de la propiedad Curva , el efecto de animación se configura para facilitar, que en el momento de la apertura de la aplicación, proyecta la imagen como si estuviera floreciendo una flor. Y al final, textColor se establece en ámbar.

Al ser un widget muy simple, puede encontrar su aplicación temporal en muchos lugares, como hemos visto anteriormente.