es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El color predeterminado de las aplicaciones de Flutter.

05 Aug, 2023 Programación

Estoy creando una Pantalla de Bienvenida que tiene dos TextButtons, cada uno envuelto en un Container.
uno para crear una cuenta y otro para iniciar sesión
(ambos tienen una sombra debajo de ellos)
enter image description here

Logré hacer ambos contenedores en Flutter, pero me di cuenta de que el color de fondo de la aplicación no es blanco puro (#FFFFFF), lo cual significa que si establezco el color del contenedor de inicio de sesión en Colors.white, no se verá como el color de fondo de la aplicación como en la imagen de arriba.

Entonces necesito una forma de establecer el color del contenedor de inicio de sesión al mismo color que la aplicación.
Evitemos el uso de código duro, no quiero determinar el color de fondo con una herramienta externa y luego establecerlo en el botón.
Estaba pensando en tomar el mismo color que el padre o algo así, pero no sé si eso existe.

main.dart

WelcomeScreen.dart

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para establecer el color del contenedor de inicio de sesión para que coincida con el color de fondo de la aplicación, en lugar de codificar el valor del color, puedes usar el widget Theme y establecer el color del contenedor con el color de fondo definido en el tema de la aplicación.

    Primero, define el color de fondo en el tema de tu aplicación:

    MaterialApp(
  theme: ThemeData(
    backgroundColor: Colors.white, // reemplaza con el color de fondo deseado
    // otras propiedades del tema...
  ),
  // otras propiedades de la aplicación...
)

    Luego, envuelve tu widget WelcomeScreen con un widget Theme que establezca el color del contenedor con el color de fondo de la aplicación:

    class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final backgroundColor = Theme.of(context).backgroundColor;

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 2,
                  blurRadius: 5,
                  offset: Offset(0, 3),
                ),
              ],
              color: backgroundColor, // establece el color con el color de fondo de la aplicación
              borderRadius: BorderRadius.circular(10),
            ),
            child: TextButton(
              onPressed: () {},
              child: Text('Crear una cuenta'),
            ),
          ),
          SizedBox(height: 16),
          Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 2,
                  blurRadius: 5,
                  offset: Offset(0, 3),
                ),
              ],
              color: backgroundColor, // establece el color con el color de fondo de la aplicación
              borderRadius: BorderRadius.circular(10),
            ),
            child: TextButton(
              onPressed: () {},
              child: Text('Iniciar sesión'),
            ),
          ),
        ],
      ),
    );
  }
}

    Al utilizar el widget Theme y acceder al color de fondo desde el tema de la aplicación, puedes asegurarte de que el color del contenedor de inicio de sesión coincida con el color de fondo de la aplicación sin codificarlo directamente.

Comments are closed.