Como criar fundo gradiente no Flutter

A simplicidade com a qual interfaces de usuário impressionantes e envolventes podem ser feitas é uma das qualidades mais atraentes do Flutter. Fundos gradientes são uma abordagem. Aqui, você aprenderá o que são os planos de fundo gradientes do Flutter, como eles funcionam e como adicioná-los ao seu próprio aplicativo.

A definição de um fundo gradiente.

Fundos gradientes são aqueles em que duas ou mais cores são gradualmente misturadas umas nas outras. Há uma transformação perfeita entre os tons porque todos se misturam. O uso de planos de fundo gradientes pode tornar a interface do usuário do seu aplicativo mais interessante e atraente.

Como esses gradientes são colocados juntos?

Gradientes lineares e gradientes radiais são usados para criar planos de fundo gradientes. Um gradiente linear é aquele em que a transição entre as cores ocorre ao longo de uma linha real. Em contraste, um gradiente radial se espalha para fora de um ponto focal, misturando cores em um padrão circular ou elíptico.

Os gradientes de fundo no Flutter exigem que o usuário especifique as cores a serem usadas e a direção do gradiente. A localização e a magnitude do gradiente também podem ser modificadas.

Implementação de plano de fundo gradiente flutuante:

Agora que conhecemos os fundamentos dos planos de fundo gradientes, podemos examinar sua implementação no Flutter. As instruções abaixo mostrarão como fazer um fundo com um gradiente linear.

Etapa 1, obtenha o pacote necessário importado.

A primeira coisa que você vai querer fazer é trazer para o seu código o pacote de materiais Flutter. As ferramentas e widgets incluídos neste pacote facilitam o design de belas interfaces de usuário.

import 'package:flutter/material.dart';

Etapa 2: definir as cores do gradiente

O próximo passo é escolher as cores do gradiente. Você é livre para usar qualquer esquema de cores que desejar; aqui, demonstraremos com um gradiente de azul para verde.

final gradientColors = [
  Colors.blue,
  Colors.green,
];

Etapa 3: criar um gradiente linear

Depois de definir uma paleta, um gradiente linear pode ser feito. Aqui, vamos demonstrar como fazer um gradiente da esquerda para a direita.

final gradient = LinearGradient(
  colors: gradientColors,
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
);

Etapa 4, defina o gradiente como plano de fundo.

O gradiente que acabamos de criar é perfeito para o plano de fundo do nosso aplicativo. O widget Scaffold será usado como exemplo, mas qualquer widget que permita uma cor de fundo pode ser substituído.

Conclusão

Usar planos de fundo gradientes na interface do usuário do seu aplicativo Flutter é uma maneira fantástica de dar à sua interface do usuário a profundidade e a dimensão necessárias. Usando-os, você pode criar efeitos visuais atraentes que manterão os usuários interessados e ajudarão seu aplicativo a se destacar. O Flutter simplifica a criação de planos de fundo gradientes com seu suporte integrado para gradientes lineares e radiais.