close

Formatação da interface do usuário com ThemeData e personalizada Styles em Flutter

No Flutter, você pode formatar a aparência do seu aplicativo usando ThemeData e personalizar o arquivo styles. ThemeData é uma classe que contém propriedades para definir a cor dominante styles, fontes, padding etc. para todo o aplicativo. Estilo personalizado permite que você personalize styles para cada arquivo Widget. Aqui estão instruções detalhadas sobre como usar ThemeData e personalizar Styles em Flutter:

ThemeData

Em Flutter, ThemeData é uma classe que contém atributos para definir a cor primária, família de fontes, padding e muitas outras opções de estilo para todo o aplicativo. Usando ThemeData, você pode alterar rapidamente a aparência geral do seu aplicativo sem precisar modificar cada um individualmente Widget.

Atributos comuns de ThemeData:

  • primaryColor: a cor primária dos principais elementos do aplicativo, como a barra de aplicativos, botões etc.
  • accentColor: a cor de destaque para elementos secundários ou destaques na interface do usuário, como FloatingActionButton.
  • backgroundColor: a cor de fundo de todo o aplicativo.
  • textTheme: define o texto principal styles para diferentes elementos de texto no aplicativo, como cabeçalhos, corpo do texto etc.
  • textTheme.headline1: Estilo de texto para o nível de cabeçalho 1.
  • textTheme.headline2: Estilo de texto para nível de título 2.
  • textTheme.bodyText1: estilo de texto para o texto do corpo principal.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

Estilo personalizado

Custom Styles permite que você personalize o estilo para cada arquivo Widget. Ao usar o style atributo de Widgets como Text, Container, RaisedButton, etc., você pode alterar a fonte, cor, tamanho do texto padding e vários outros atributos.

Atributos comuns de TextStyle(usados ​​para Text Widget):

  • fontSize: O tamanho da fonte.
  • fontWeight: O peso da fonte.
  • color: A cor do texto.
  • fontStyle: o estilo da fonte, como negrito, itálico.
  • letterSpacing: O espaçamento entre os caracteres.
  • wordSpacing: O espaçamento entre as palavras.
  • decoration: a decoração do texto, como sublinhado, tachado.

Exemplo usando Custom Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

Usando Themes e Styles com MediaQuery

Você pode combinar Themes e Styles com MediaQuery para ajustar a interface do usuário com base no tamanho da tela ou na resolução do dispositivo.

Exemplo:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

Conclusão:

Flutter fornece ferramentas poderosas para formatar a interface do usuário do seu aplicativo. Ao usar ThemeData e personalizar o Styles, você pode ajustar facilmente os elementos da interface do usuário, como cores, fontes, tamanhos de texto etc., para criar uma interface atraente e atraente para seu aplicativo.