Detalhes do pacotev1.2.0

gradient_elevated_button

Botão personalizado do Flutter com fundo em gradiente para interface visualmente atraente.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 338
Curtidas: 15
Pontos Pub: 150

Instalar pacote

flutter pub add gradient_elevated_button

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um botão personalizável do Flutter com fundo em gradiente, projetado para aprimorar a estética da interface. Ele estende o ElevatedButton padrão com preenchimento suave em gradiente, efeitos de sombra e feedback responsivo. Ideal para interfaces modernas de aplicativos que exigem botões visualmente envolventes sem sacrificar funcionalidade. O pacote oferece suporte a todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, garantindo aparência consistente entre dispositivos.

Casos de uso

Criando botões de chamada para ação chamativos
Melhorando telas de login ou cadastro
Design de interfaces móveis e web modernas
Adicionando estilo visual a formulários e painéis
Melhorando o engajamento do usuário por meio de visualizações dinâmicas

Principais recursos

Suporte de fundo gradiente
efeitos de elevação e sombra embutidos
Cores e paradas personalizáveis
Feedback de toque responsivo
Compatibilidade multiplataforma
Integração simples com código Flutter existente

Indicado para

Designers de interface procurando acabamento visual
Desenvolvedores de aplicativos modernos
Projetos com foco na aparência estética
Aplicativos direcionados a múltiplas plataformas
Equipes usando Flutter para desenvolvimento full-stack

Considerações

Pode exigir estilos adicionais para acessibilidade
Impacto no desempenho em gradientes complexos
Personalização limitada além do gradiente e elevação
Não adequado para padrões de design minimalistas
Melhor usado com texto contrastante para legibilidade

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

GradientElevatedButton

A customizable elevated button with gradient support for your Flutter applications. This package allows you to create buttons with gradient backgrounds, custom foreground colors, and various other customizable properties using the GradientElevatedButton widget.

Features

Gradient Background: Easily apply gradients to your button backgrounds.
Customizable Style: Customize text color, shape, padding, and more.
Integration with Theme: Use GradientButtonThemeExtension (via ThemeExtension) to apply a consistent style across your app. (Old: GradientButtonThemeData is deprecated)

Demo

Usage

1. Theming with ThemeExtension (Recommended)

The recommended way to theme all gradient buttons is to use GradientButtonThemeExtension with ThemeData.extensions:

MaterialApp(
  theme: ThemeData(
    extensions: <ThemeExtension<dynamic>>[
      GradientButtonThemeExtension(
        style: GradientElevatedButton.styleFrom(
          backgroundGradient: const LinearGradient(
            colors: [Colors.blue, Colors.green],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          foregroundColor: Colors.black,
        ),
      ),
    ],
  ),
  home: ...,
)

Then use GradientElevatedButton as usual:

GradientElevatedButton(
  onPressed: () {},
  child: Text('Themed Gradient Button'),
)

2. [DEPRECATED] Using GradientButtonThemeData

GradientButtonThemeData is deprecated and will be removed in a future release. Migrate to ThemeExtension as shown above.

// Deprecated usage:
GradientButtonThemeData(
  data: GradientElevatedButton.styleFrom(
    backgroundGradient: const LinearGradient(
      colors: [Colors.blue, Colors.green],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ),
    foregroundColor: Colors.black,
  ),
  child: MaterialApp(
    // ...
  ),
)

3. Using GradientElevatedButton.styleFrom

Alternatively, you can style the GradientElevatedButton directly using GradientElevatedButton.styleFrom to define the button's gradient, shape, and other properties:


Widget gradientWidget = GradientElevatedButton(
  onPressed: () {

  },
  style: GradientElevatedButton.styleFrom(
    gradient: const LinearGradient(colors: [
      Color.fromARGB(255, 166, 206, 57),
      Color.fromARGB(255, 0, 175, 173),
    ],
      disabledGradient: const LinearGradient(colors: [
        Colors.grey.withAlpha(200),
        Colors.grey,
        Colors.grey.withAlpha(200),
      ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    ),
  ),
  child: const Text("This is Gradient Elevated Button"),
);

Customization

You can fully customize the GradientElevatedButton using the following properties:

backgroundGradient: A LinearGradient (or other types) that defines the background gradient.
foregroundColor: The color of the text and icon on the button.
disabledBackgroundGradient: A LinearGradient (or other types) that defines the disabled background gradient.
disabledForegroundColor: The color of the text and icon on the disabled button.
padding: Padding inside the button.
shape: Define the button’s shape with a ShapeBorder like RoundedRectangleBorder or StadiumBorder.
elevation: Controls the button's elevation (default: 2).
onPressed: The callback function that is called when the button is pressed.