Degradado en Flutter

Como crear un degradado en Flutter dentro de un container

VIDEO Como crear un degradado en Flutter dentro de un container

Para obtener un degradado de dos colores usamos boxdecoration que tiene muchos parámetros para configurar un diseño apropiado.


Degradado en Flutter

Como crear un degradado en Flutter dentro de un container

Para obtener un degradado de dos colores usamos boxdecoration que tiene muchos parámetros para configurar un diseño apropiado.

Usar un degradado en una aplicación móvil depende del diseño que se ha establecido y la combinación de colores, Flutter tiene la particularidad de manejar diseño desde el código, es por ello que resulta simple crear un degradado con estilos.

Gradientes en Flutter

CODIGO DART EN FLUTTER PARA OBTENER UN DEGRADADO

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        decoration: new BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.yellow,Colors.orange,Colors.red],
            stops: [0.5,0.5,0.8],
            begin: FractionalOffset.topCenter,
            end: FractionalOffset.bottomCenter
          )
        ),

        child: Center(
          child:RaisedButton(
              child: Text("botón"),
              onPressed: (){}
          ),
        )
      )
    );
  }
}

Como vemos debemos declarar un caja de decoración BoxDecoration, la cual contiene el atributo gradiente, este atributo nos permite configurar el degradado

Los atributos permiten valores array es por ello que en colors: podemos agregar mas de dos colores, e igualmente en stops: nos permite obtener algunos efectos visuales cambiando los valores  decimales.

Espero sea de ayuda, hasta un próximo video.

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Degradado en Flutter?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 912 veces | Publicado hace 9 meses

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019