Início / coding / Perguntas / 78527963
Accepted
Giulia Santoiemma
Asked: 2024-05-24 18:29:17 +0800 CST

Como aplicar estilos diferentes ao ElevatedButton com ou sem ícones

  • 772

Na minha aplicação tenho muitos ElevatedButtons, que estilizo no tema principal. Preciso estilizar aqueles com ícone de maneira diferente daqueles sem ícone.

Aqui está o código com apenas uma propriedade, que no entanto se aplica a todos ElevatedButtons, como posso selecionar aqueles com o ícone e dar-lhes um diferente borderRadius?

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
      ),
    ),
  );
}
flutter

1 respostas

  1. Best Answer

    Para conseguir isso, sugiro criar um widget personalizado como wrapper para o botão elevado. Exemplo:

    class CustomButton extends StatelessWidget {
  final Icon? icon;
  final VoidCallback? onPressed;
  final Widget child;

  const CustomButton({
    super.key,
    required this.child,
    this.icon,
    this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    final style = ButtonStyle(
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          // Set the different border radius here
          borderRadius: BorderRadius.circular(icon != null ? 50.0 : 10.0),
        ),
      ),
    );

    return icon != null
        ? ElevatedButton.icon(
            onPressed: onPressed,
            icon: icon!,
            label: child,
            style: style,
          )
        : ElevatedButton(
            onPressed: onPressed,
            style: style,
            child: child,
          );
  }
}

    O iconparâmetro é anulável (opcional), se estiver definido, deverá construir um ElevatedButton.iconcom seu estilo especificado. Caso contrário, ele constrói um padrão com seu estilo (que deve ser diferente do ElevatedButton.icondo ').

    Saída:

    Sem ícone:

    CustomButton(
    onPressed: () {},
    child: const Text('Elevated Button'),
),

    insira a descrição da imagem aqui

    Com ícone:

    CustomButton(
    icon: const Icon(Icons.add),
    onPressed: () {},
    child: const Text('Icon Elevated Button'),
),

    insira a descrição da imagem aqui

    Observe que você pode se livrar do stylebotão padrão (sem ícone) se quiser manter o estilo no ThemeDatawidget principal do aplicativo. No entanto, eu não recomendo isso, pois haverá um widget explícito para lidar com a aparência dos botões elevados.

    • 1

relate perguntas