O que é o tema?
O tema é o nome genérico de tudo que dá estilo a um aplicativo para torná-lo atraente, atraente e adequado aos seus gostos ou necessidades. É o que torna seu aplicativo bonito e, como as preferências pessoais são diferentes, as especificações por trás disso podem variar entre pessoas diferentes.
Fatores como estilos de texto, cores de texto, estilos de ícone e muito mais contribuem para o tema de um aplicativo. Tudo o que torna um aplicativo atraente para os usuários vem do tema, e aprimorar seu conhecimento sobre os temas do Flutter ajudará muito a torná-lo um desenvolvedor Flutter mais proficiente .
O que você pode usar para criar um tema para um aplicativo no Flutter?
MaterialApp vem com um tema azul claro padrão. Você vê isso quando inicia o aplicativo de contador padrão: ele é azul e branco puro.
No entanto, como destacamos anteriormente, há muitas maneiras de criar um tema para um aplicativo que variam desde a alteração da aparência de um texto simples e ícone estilo, para usar widgets de estilo como o widget de contêiner , TextButton ou RawMaterialButton . Também há uma alternância complexa entre os modos de tema claro e escuro em um aplicativo.
Todos contribuem para o tema geral de um aplicativo. Este artigo abordará cada um desses métodos para criar o tema de um aplicativo Flutter.
Widgets e contêineres de tema
Nesta seção, discutiremos como estilizar widgets e contêineres no Flutter por estilizando um widget de texto e o widget Container. Flutter fornece uma classe TextStyle que contém várias propriedades que podem modificar a aparência do widget de texto.
Text (“Fui dar um passeio”)
Flutter renderiza este texto na tela com o padrão cor, tamanho, estrutura e peso. Agora podemos adicionar um pouco de estilo para aprimorar a aparência do aplicativo. Faremos isso ajustando as propriedades que a classe TextStyle oferece.
Text (“Eu fui dar um passeio”, estilo: TextStyle (color: Colors.blue, weight: FontWeight.bold, fontSize: 18,) ,),
Ao ajustar as propriedades da classe TextStyle, mudamos a aparência do texto e adicionamos interesse ao tema geral do aplicativo.
O processo para estilizar o widget Container é semelhante ao que fizemos para TextStyle; no entanto, obtemos estilo aqui ajustando as propriedades da classe BoxDecoration, que são então passadas para o parâmetro de decoração do widget Container.
Container (altura: 48, margem: const EdgeInsets.all (16), decoração: BoxDecoration (color: Colors.grey [300], borderRadius: const BorderRadius.all (Radius.circular (16),), border: Border.all (color: Colors.blue, width: 2,),),);
Acima, atribuímos ao container uma cor (cinza) e demos a ele uma borda azul ajustando a propriedade borderColor. Isso nos dá uma linha azul com 2px de largura ao redor do próprio contêiner.
Outra escolha de estilo que fizemos no bloco de código acima é alterar o raio da borda; demos a ele um raio de borda circular de 16 px. Isso fornece ao contêiner uma excelente forma arredondada nas bordas em vez das bordas planas que vêm com o contêiner padrão.
Por último, demos ao contêiner inteiro uma margem de 16px, o que deixa um espaço de 16px em cada lado do contêiner.
Usando a classe Material ThemeData
Ambos os cenários anteriores que discutimos-a classe TextStyle e o widget Container-lidam com o estilo de um único componente para essa tela específica e não afetam o estilo de outras classes TextStyle ou widgets de contêiner.
Agora, suponha que desejamos compartilhar um tema específico-incluindo cor, brilho, peso, estilos de ícone e estilos de texto-em todo o nosso aplicativo. Podemos conseguir isso usando a classe ThemeData, que nos fornece muitos recursos para atender aos nossos gostos.
Considere o bloco de código abaixo.
MaterialApp (título:’Guia para Temas em Flutter’, tema: ThemeData (brilho: Brightness.dark, primaryColor: Colors.lightBlue [800], accentColor: Colors.cyan [600], fontFamily:’Georgia’, textTheme: TextTheme (headline1: TextStyle (fontSize: 50, fontWeight: FontWeight.bold ), headline6: TextStyle (fontSize: 30.0, fontStyle: FontStyle.italic), bodyText2: TextStyle (fontSize: 18.0, fontFamily:’Hind’),),), home: MyHomePage (),);
A classe ThemeData fornece propriedades que podemos modificar para ajustar o tema de nosso aplicativo. A propriedade de brilho lida com o brilho geral do tema e afeta as cores do texto no aplicativo, pois a cor do texto torna-se preta com Brightness.light e branco com Brightness.dark.
A propriedade primaryColor afeta significativamente a cor de fundo partes do aplicativo, incluindo barras de ferramentas, barras de guias e barras de aplicativos.
A propriedade accentColor afeta a cor do primeiro plano para widgets e também se refere à cor secundária. A família da fonte, bem como as diferentes categorias para o tema do texto, foram todas modificadas, como visto no bloco de código acima.
O Flutter atribui valores a cada uma das categorias de título e corpoTexto por padrão, mas cada deles podem ser ajustados para se adequar ao nosso gosto em design.
Para usar especificamente qualquer um dos temas declarados em qualquer parte do aplicativo, basta chamar o que queremos, conforme mostrado abaixo.
Container (color: Theme.of (context).accentColor, child: Text (‘Theming in Flutter’, style: Theme.of (context).textTheme.headline6,),),
Acima , estilizamos o texto com os valores declarados headline6, o que significa que o tamanho da fonte será 36 e o estilo da fonte será itálico. Este método de estilização é muito útil e reduz o número de linhas de código que se repetirão no aplicativo se quisermos estilizar cada uma delas individualmente.
Modos de tema claro e escuro
O último tipo de tema que discutiremos é a implementação de modos de tema claro e escuro para aplicativos Flutter. Os modos de tema escuro são comumente usados em aplicativos para economizar energia durante a vida da bateria e reduzir o estresse para os olhos em ambientes físicos de pouca luz.
Neste tutorial, usaremos o pacote adaptive_theme para facilitar isso. Este pacote fornece muitas funcionalidades excelentes prontas para usar para garantir a configuração e transição suave de diferentes modos de tema. Ele também obtém o tema mais atual usado sempre que o aplicativo é reiniciado.
Além do adaptive_theme, também usaremos o Pacote Riverpod .
Comece adicionando o código abaixo no bloco de dependências no arquivo pubspec.yaml.
dependencies: adaptive_theme: ^ 2.2.0 flutter_riverpod: ^ 0.14.0 + 3
Execute o comando flutter pub get no terminal. Este comando fará com que os dois pacotes sejam baixados e estejam prontos para uso em sua base de código.
flutter pub get
Vá para o arquivo main.dart e importe o adaptive_theme e Pacotes Riverpod .
import’package: adaptive_theme/adaptive_theme.dart’; import’package: flutter/material.dart’; import’package: flutter_riverpod/flutter_riverpod.dart’;
Crie uma variável chamada savedThemeMode para acessar o modo usado mais recentemente pelo usuário na reinicialização do aplicativo. Torne o bloco principal assíncrono e aguarde a função getThemeMode que o pacote adaptive_theme fornece.
A próxima coisa a fazer é envolver o aplicativo inteiro em uma classe ProviderScope para acessar os provedores usados no aplicativo.
Future
Crie uma variável para receber o savedThemeMode do bloco principal acima. Envolva todo o MaterialApp com uma classe adaptive_theme, que nos dá acesso às suas propriedades para que possamos personalizar os modos de tema claro e escuro para o aplicativo.
classe MyApp extends StatelessWidget {final AdaptiveThemeMode? saveThemeMode;//ignorar: use_key_in_widget_constructors const MyApp ({this.savedThemeMode}); @override Widget build (BuildContext context) {return AdaptiveTheme (light: ThemeData (brilho: Brightness.light, primaryColor: Colors.green, scaffoldBackgroundColor: Colors.white,), dark: ThemeData (brilho: Brightness.dark, primaryColor: Colors. red, scaffoldBackgroundColor: Colors.black, iconTheme: const IconThemeData (color: Colors.black,),),
Passamos ThemeData à propriedade light para a classe adaptive_theme, na qual colocamos todas as variáveis que desejamos personalizar. Em seguida, personalizamos o brilho, primaryColor e scaffoldBackgroundColor. A mesma coisa é feita com a propriedade dark. Modificamos as propriedades dentro da classe ThemeData e as passamos para a propriedade fornecida por adaptive_theme.
O próximo é o inicial passamos na propriedade savedThemeMode, e se peradventure for nulo (por exemplo, se o aplicativo for instalado recentemente), o padrão é o modo de tema leve. Então, por último, passamos a classe MaterialApp para a função de construtor e passamos os temas declarados às suas propriedades.
initial: savedThemeMode ?? AdaptiveThemeMode.light, builder: (theme, dark) {return MaterialApp (title:’Artigo Light/Dark Theme’, theme: theme, darkTheme: dark, home: const HomePage (),); },); }}
Para alternar entre os modos de tema claro e escuro, usaremos um RawMaterialButton e passaremos a função toggleMode de adaptive_theme para sua propriedade onPressed. Este botão permite ao usuário alternar entre os dois modos clicando ou tocando no botão.
class HomePage extends StatelessWidget {const HomePage ({Key? Key}): super (key: key); @override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: const Text (‘Light/Dark theme in Flutter’),), body: Column (mainAxisAlignment: MainAxisAlignment.center, children: [Center (child: RawMaterialButton (child: const Text (‘Switch Modes’, style: TextStyle (fontSize: 20, fontWeight: FontWeight.bold,),), onPressed: () {AdaptiveTheme.of (context).toggleThemeMode ();}, fillColor: Colors.green, preenchimento: const EdgeInsets.all (16), forma: RoundedRectangleBorder (borderRadius: BorderRadius.circular (16),),),),],),); }}
Finalmente, as imagens abaixo mostram os modos de tema claro e escuro como aparecerão quando alternados.
Conclusão
A personalização de várias propriedades para criar o tema desejado pode ser muito empolgante, especialmente porque faz com que o app se adapte ao seu gosto em design. Com o que você aprendeu até agora, agora você pode estilizar classes individuais, o widget de contêiner e até mesmo dar ao seu aplicativo modos de tema claro e escuro personalizados.
