Bogotá, Colombia
hola@jairofernandez.me

AppBar con carousel — Parte 1

Blog personal

También podemos crear AppBars personalizados, y plasmar los diseños que nos soliciten nuestros diseñadores.

El objetivo es crear una barra de navegación con un carousel incorporado. (gracias @anncode)

Manos a la obra!

Dividiremos la creación de este widget en dos post para poder tener una referencia de consulta, aprenderemos acerca del widget Stack, Container entre otros.

  1. Tenemos una barra de navegación de color azul con un gradiente linear, “GradientBack”
  2. Crearemos un componente para mostrar el carousel, “CardImageList”.
  3. Luego uniremos los componentes anteriores en uno solo que denominaremos “HeaderAppbar”.

Componente GradientBack

Nuestro componente será un StatelessWidget, ya que el usuario no tendrá una interacción directa

Usaremos el widget Container, que seria como el equivalente de un “div” en HTML

https://docs.flutter.io/flutter/widgets/Container-class.html
Ejemplo de un Container

Para entender de una manera simple este widget, te recomiendo leer https://flutter.io/docs/get-started/flutter-for/web-devs también está la misma introducción para otros lenguajes 😍

La propiedad `decoration`que usaremos será `BoxDecoration`

# gradient_back.dart
class GradientBack extends StatelessWidget{
  final String title;
  GradientBack(this.title);

  @override
  Widget build(BuildContext context){
    return Container(
      height: 250.0,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(0xFF4268D3),
            Color(0xFF584CD1)
          ],
          begin: FractionalOffset(0.2, 0.0),
          end: FractionalOffset(1.0, 0.6),
          stops: [0.0,0.6],
          tileMode: TileMode.clamp
        )
      ),
      child: Text(
        title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
          fontFamily: "Lato",
          fontWeight: FontWeight.bold
        )
      ),
      alignment: Alignment(-0.9, -0.6),
    );
  }
}
Resultado de gradient_back.dart

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.