Texto de: Lucas Galdino
Introdução
Como todos devem saber, o modo escuro, ou dark mode, está muito presente hoje em dia. Apesar disso, ainda é comum que a maioria dos aplicativos utilize o tema claro como padrão. Nesse artigo irei mostrar como é possível fazer nossos Aplicativos em Flutter adentrarem nesse mundo do dark mode criando uma forma de trocar entre os temas Claro e Escuro dentro do próprio aplicativo.
Criando o projeto
Implementaremos o modo escuso usando uma maneira que engloba todo o aplicativo, então não iremos utilizar como exemplo um aplicativo já pronto, mas sim o aplicativo básico criado pelo próprio Flutter quando iniciamos um projeto, beleza? Dito isso, vamos começar da forma de sempre, abrindo o terminal e utilizando o comando de criação de um novo projeto, que iremos chamar de temas:
flutter create temas Com o projeto criado vamos alterar um pouco o código do arquivo main.dart. Como essa alteração de temas dentro do aplicativo cria mudanças no estado da aplicação, irei modificar um pouco o código base para que a gente utilize apenas a parte Stateful do código, ou seja, removendo o trecho Stateless criado por padrão. O código deve ficar da seguinte forma:
import 'package:flutter/material.dart';
void main() {
runApp(const MyHomePage());
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Contador'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Você clicou no botão esse número de vezes:',
),
Text(
'$_counter',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Incrementar',
child: const Icon(Icons.add),
),
),
);
}
}E o resultado no emulador será o seguinte:
Implementando os temas
Antes de irmos para os temas propriamente, vamos criar o botão que irá fazer a alternância entre os temas. Para iniciar, vamos criar uma variável do tipo bool que vai armazenar a informação de qual estado da alternância estaremos. Basta adicionar o seguinte trecho de código logo abaixo da definição da variável _counter:
bool alternarTema = false; Para contextualizar melhor a localização desse trecho de código, ele precisa ficar acima da criação da função _incrementCounter. Dessa forma:
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
bool alternarTema = false;
void _incrementCounter() { Agora, lá dentro da AppBar, vamos criar a seção actions e adicionar o seguinte código:
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Contador'),
actions: [
IconButton(
onPressed: () {
setState(() {
alternarTema = !alternarTema;
});
},
icon: Icon(alternarTema ? Icons.dark_mode : Icons.light_mode),
),
],
), As actions são botões que podemos adicionar na barra superior de uma aplicação. Com esse código funcionando vamos ter um botão na parte superior direita do aplicativo que, quando clicado, faz a troca entre um ícone que representa o modo claro e outro que representa o modo escuro.
Outro passo importante é remover a linha de código do backgroundColor de dentro da AppBar, essa linha vai colorir por cima de quaisquer cores que colocarmos nos temas. Com isso feito, vamos agora criar os temas de fato.
Irei criar um tema claro que utiliza verde como cor base e um tema escuro que utiliza vermelho. Nos temas está definido a cor padrão que será utilizada nas partes do aplicativo, como botões, por exemplo. Também definimos a brightness que é responsável diretamente pelo claro e escuro do tema e também definimos a coloração da AppBar, a barra superior do aplicativo. Esse trecho de código deve ficar localizado logo abaixo da criação da função _incrementCounter. Dessa forma:
void _incrementCounter() {
setState(() {
_counter++;
});
}
ThemeData temaClaro = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.green,
brightness: Brightness.light,
),
appBarTheme: const AppBarTheme(
color: Colors.green,
),
useMaterial3: true,
);
ThemeData temaEscuro = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.red,
brightness: Brightness.dark,
),
appBarTheme: const AppBarTheme(
color: Colors.red,
),
useMaterial3: true,
); Agora só precisamos fazer com que o tema seja de fato alterado baseado no estado da variável alternarTema. Para isso vamos adicionar o seguinte trecho de código no tema interno do MaterialApp:
return MaterialApp(
title: 'Flutter Demo',
theme: alternarTema ? temaEscuro : temaClaro,
home: Scaffold( E pronto, agora o botão vai modificar não só seu ícone mas também a aparência geral da aplicação. O resultado será esse:
O código final do arquivo "main.dart" vai ficar assim:
import 'package:flutter/material.dart';
void main() {
runApp(const MyHomePage());
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
bool alternarTema = false;
void _incrementCounter() {
setState(() {
_counter++;
});
}
ThemeData temaClaro = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.green,
brightness: Brightness.light,
),
appBarTheme: const AppBarTheme(
color: Colors.green,
),
useMaterial3: true,
);
ThemeData temaEscuro = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.red,
brightness: Brightness.dark,
),
appBarTheme: const AppBarTheme(
color: Colors.red,
),
useMaterial3: true,
);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: alternarTema ? temaEscuro : temaClaro,
home: Scaffold(
appBar: AppBar(
title: const Text('Contador'),
actions: [
IconButton(
onPressed: () {
setState(() {
alternarTema = !alternarTema;
});
},
icon: Icon(alternarTema ? Icons.dark_mode : Icons.light_mode),
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Você clicou no botão esse número de vezes:',
),
Text(
'$_counter',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Incrementar',
child: const Icon(Icons.add),
),
),
);
}
} Finalizando
Neste artigo, vimos um exemplo de como criar múltiplos temas e como navegar entre eles mediante um botão dentro da própria interface do aplicativo. Até a próxima!
