envolviendo Scaffold con Container para fondo degradado, ¿Cómo configurar el degradado para el fondo del contenedor en aleteo?

Esta división ha sido analizado por nuestros especialistas para asegurar la veracidad de esta reseña.

Solución:

También puede agregar un degradado a la AppBar como esto,

new Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Awesome AppBar')),
        flexibleSpace: Container(
          decoration: new BoxDecoration(
            gradient: new LinearGradient(
                colors: [
                  const Color(0xFF3366FF),
                  const Color(0xFF00CCFF),
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
        ),
      ),
      body: ...,
    );

Parámetros de gradiente lineal:

• colors: un array de los colores a utilizar en el degradado, en este caso, dos tonos de azul.
• begin, end: posición del primer color y del último color, en este caso,
• FractionalOffset nos permite tratar las coordenadas como un rango de 0 a 1 tanto para x como para y. Como queremos un gradiente horizontal, usamos la misma Y para ambas medidas, y la x cambia de 0.0 (izquierda) a 1.0 (derecha).
• stops: este array debe tener el mismo tamaño que los colores. Define cómo se distribuirán los colores. [0.0, 1.0] lo llenará de izquierda a derecha. [0.0, 0.5] llenará los colores desde la izquierda hasta la mitad de la barra, etc.
• tileMode: qué hacer si las paradas no llenan toda el área. En este caso, agregamos abrazadera (reutilizará el último color utilizado), pero como nuestro degradado va de 0.0 a 1.0, no es realmente necesario.

Espero que esto ayude.

En su código – Bajo Scaffold agregar – backgroundColor: Colors.transparent,

child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
        ..

Simplemente agregue FlexibleSpace en AppBar y Decorar el recipiente. Luego, la barra de la aplicación es un degradado en el fondo.

appBar: AppBar(

      title: Text('Flutter Demo'),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              Colors.red,
              Colors.blue
            ],
          ),
        ),
      ),
    ),

Comentarios y puntuaciones de la guía

Agradecemos que quieras añadir valor a nuestra información colaborando tu veteranía en las críticas.

---

---

Utiliza Nuestro Buscador