Cómo usar degradados en Flutter con BoxDecoration y GradientAppBar

Introducción

Los degradados de color toman un color y una posición iniciales y un color y una posición finales. Luego, realizan una transición entre los colores. Si se tiene en cuenta la teoría del color, pueden hacer que una aplicación sea visualmente más interesante que un diseño simple.

En este artículo, utilizará el paquete BoxDecoration‘s LinearGradient y ‘ para aplicar degradados a una aplicación Flutter.gradient_app_bar

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este tutorial fue verificado con Flutter v1.22.2, Android SDK v30.0.2 y Android Studio v4.1.

Paso 1: Configuración del proyecto

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create flutter_gradient_example

Navegue hasta el nuevo directorio del proyecto:

cd flutter_gradient_example

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Paso 2 — UsoLinearGradient

Ábralo main.dartcon su editor de código y modifique el código para agregar un BoxDecoration:

lib/main.dart

import 'package:flutter/material.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,        visualDensity: VisualDensity.adaptivePlatformDensity,      ),      home: MyHomePage(),    );  }}class MyHomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Flutter Gradient Example'),      ),      body: Center(        child: Container(          decoration: BoxDecoration(            gradient: LinearGradient(              begin: Alignment.topRight,              end: Alignment.bottomLeft,              colors: [                Colors.blue,                Colors.red,              ],            )          ),          child: Center(            child: Text(              'Hello Gradient!',              style: TextStyle(                fontSize: 48.0,                fontWeight: FontWeight.bold,                color: Colors.white,              ),            ),          ),        ),      ),    );  }}

La clave para esto es la adición de un decorationy BoxDecorational Containerwidget. Esto le permite definir un LinearGradientque puede ser dado colors, así como un beginy end Alignment.

Compila tu código y ejecútalo en un emulador:

Esto crea un degradado lineal que comienza en la parte superior de la pantalla con azul y gradualmente pasa a rojo en la parte inferior de la pantalla.

Paso 3 — Uso stopsconLinearGradient

También es posible tener colores adicionales y un control más preciso sobre dónde en la pantalla debe tener efecto la transición de color.

Vuelva main.darta visitar su editor de código y agregue stops:

lib/main.dart

class MyHomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Flutter Gradient Example'),      ),      body: Center(        child: Container(          decoration: BoxDecoration(            gradient: LinearGradient(              begin: Alignment.topRight,              end: Alignment.bottomLeft,              stops: [                0.1,                0.4,                0.6,                0.9,              ],              colors: [                Colors.yellow,                Colors.red,                Colors.indigo,                Colors.teal,              ],            )          ),          child: Center(            child: Text(              'Hello Gradient!',              style: TextStyle(                fontSize: 48.0,                fontWeight: FontWeight.bold,                color: Colors.white,              ),            ),          ),        ),      ),    );  }}

Compila tu código y ejecútalo en un emulador:

Esto crea un degradado lineal que comienza en 0.0la parte inferior de la pantalla con amarillo, luego en 0.4la parte inferior de la pantalla pasa a rojo, luego en 0.6la parte inferior de la pantalla pasa a índigo, luego en 1.0la parte inferior de la pantalla pasa a verde azulado.

Paso 4 — UsoGradientAppBar

BoxDecorationNo se aplica a AppBar. Sin embargo, es posible utilizar el GradientAppBarpaquete para agregar degradados de color a AppBar.

Abra pubspec.yamlsu editor de código y agregue gradient_app_bar:

archivo pubspec.yaml

dependencies:  flutter:    sdk: flutter  gradient_app_bar: ^0.1.3

Luego, vuelva a visitar main.darty agregue la importación para gradient_app_bar:

lib/main.dart

import 'package:flutter/material.dart';import 'package:gradient_app_bar/gradient_app_bar.dart';

Por último, puedes sustituir el AppBarpor el GradientAppBary los colores siguientes:

lib/main.dart

appBar: GradientAppBar(  title: Text('Flutter Gradient Example'),  gradient: LinearGradient(    colors: [      Colors.cyan,      Colors.indigo,    ],  ),),

En este ejemplo se utilizará un color LinearGradientcon cian e índigo.

Nota:GradientAppBar Se utilizó una versión anterior backgroundColorStarty backgroundColorEndquedó obsoleta a partir de la versión 0.1.0.

Compila tu código y ejecútalo en un emulador:

Esto crea un degradado lineal que comienza en la izquierda de la pantalla con cian y pasa gradualmente a índigo en la derecha de la pantalla.

Conclusión

En este artículo, utilizó LinearGradienty GradientAppBarpara aplicar degradados a una aplicación Flutter.

Si desea obtener más información sobre Flutter, consulte nuestra página de temas de Flutter para ver ejercicios y proyectos de programación.