¿Cómo establecer el color de fondo de un Flutter OutlineButton?

Esta cuestión se puede resolver de diversas maneras, por lo tanto te enseñamos la respuesta más completa en nuestra opinión.

Solución:

Para modificar el color de fondo de un botón de esquema, puede usar un widget DecoratedBox y Theme. Al final de esta respuesta encontrará un ejemplo rápido.

De todos modos, todavía recomendar simplemente usando el FlatButton con su color attribute en lugar de.

envuelve tu OutlinedButton dentro de una DecoratedBox. Selecciona el shape de tu DecoratedBox a la misma forma tu OutlinedButton. Ahora puedes usar el color attribute de tu DecoratedBox para cambiar el color. El resultado seguirá teniendo un pequeño relleno alrededor del OutlinedButton. Para eliminar esto, puede envolver el DecoratedBox dentro de una Theme en el que se ajusta el ButtonTheme. Dentro de ButtonTheme quieres configurar materialTapTargetSize: MaterialTapTargetSize.shrinkWrap.

El relleno se agrega dentro de Flutter, para aumentar el área de toque alrededor del botón a un tamaño mínimo de 48×48 (fuente). Ajuste materialTapTargetSize para MaterialTapTargetSize.shrinkWrap elimina este tamaño mínimo.

---

FlatButton ejemplo:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FlatButton(
            color: Colors.pinkAccent,
            shape: CircleBorder(),
            onPressed: () => ,
            child: Text('A'),
          ),
        ),
      ),
    );
  

---

OutlinedButton ejemplo:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  


class MyButton extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return DecoratedBox(
      decoration:
          ShapeDecoration(shape: CircleBorder(), color: Colors.pinkAccent),
      child: Theme(
        data: Theme.of(context).copyWith(
            buttonTheme: ButtonTheme.of(context).copyWith(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap)),
        child: OutlineButton(
          shape: CircleBorder(),
          child: Text('A'),
          onPressed: () => ,
        ),
      ),
    );
  

OutlineButton ha quedado en desuso y ha sido reemplazado por OutlinedButton. (Observe la “d”.)

OutlinedButtonLa documentación de me ayudó a entender cómo usarlo. Aquí hay un ejemplo con estos estados: Deshabilitado (Gris) –> Normal (Azul) –> Presionado (Rojo)

   return Container(
      width: double.infinity,
      height: 48,
      child: OutlinedButton(
        child: Text(
          "This is an Outline"d"Button. (Not OutlineButton)",
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => print("Tapped"),
        //onPressed: null, //Uncomment this statement to check disabled state.
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith((states) 
            if (states.contains(MaterialState.disabled)) 
              return Colors.grey[100];
            
            return Colors.blue;
          ),
          overlayColor: MaterialStateProperty.resolveWith((states) 
            if (states.contains(MaterialState.pressed)) 
              return Colors.red;
            
            return Colors.transparent;
          ),
          side: MaterialStateProperty.resolveWith((states) 
            Color _borderColor;

            if (states.contains(MaterialState.disabled)) 
              _borderColor = Colors.greenAccent;
             else if (states.contains(MaterialState.pressed)) 
              _borderColor = Colors.yellow;
             else 
              _borderColor = Colors.pinkAccent;
            

            return BorderSide(color: _borderColor, width: 5);
          ),
          shape: MaterialStateProperty.resolveWith((_) 
            return RoundedRectangleBorder(borderRadius: BorderRadius.circular(16));
          ),
        ),
      ),
    );

Flutter reemplazó los 3 tipos de botones anteriores (FlatButton, RaisedButton y OutlineButton) con nuevos tipos de botones (TextButton, ElevatedButton y OutlinedButton) para permanecer en sincronía con el diseño de materiales y también porque usar MaterialStateProperty proporciona la máxima flexibilidad para lograr cualquier interfaz de usuario específica del estado que uno necesite. Puedes leer más sobre esto aquí.

Tienes la opción de añadir valor a nuestra información añadiendo tu experiencia en las críticas.

---

---

Utiliza Nuestro Buscador