Introdução
Fala galera! Hoje vou falar um pouco sobre uma atualização mais recente que chegou no Flutter e acabou mudando algumas coisas lá da base do projeto. A alteração acontece lá no arquivo Main do projeto e tem impacto dentro de todo o projeto na hora de alterar o esquema de cores da sua aplicação.
Criação do Projeto
Vamos criar um projeto básico mesmo e focarmos em alterar as cores dentro do Contador básico criado por padrão com o Flutter. Estarei utilizando a versão 2.5.0 do Flutter e criarei um projeto chamado “temas”.
Vou utilizar o código inicial padrão e irei apenas deletar os comentários do código.
Aqui está o código inicial:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}O resultado, como por padrão, será esse:
A partir daqui vamos criar novos temas e modificar as cores desse projeto.
Nova forma de criar temas
A forma como se era trabalhada essa questão das cores antes funcionava com o atributo “primarySwatch” para a cor principal e o atributo “accentColor” como uma cor secundária dentro do projeto diretamente no “theme” do “MaterialApp”.
Agora, essa questão do “accentColor” não funciona mais, está deprecated. No site oficial da documentação do Flutter temos as instruções de migração para a nova forma → https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties
A primeira coisa a fazer é criar uma variável que irá armazenar o nosso tema. Dessa forma:
A partir disso iremos referenciar esse tema lá no “theme” do “MaterialApp”, dessa forma:
Agora, irei criar as cores primária e secundária dentro dessa nova forma.
E o resultado será esse:
Para variar entre os temas entre o Light e o Dark basta mudar a propriedade “brightness” dentro da variável “tema” que a gente criou. É possível utilizar o “Brightness.light” para o tema claro, que é o padrão. Nesse caso, o resultado não irá ser alterado, afinal, o tema claro já é o padrão utilizado pelo Flutter.
E também podemos utilizar o “Brightness.dark” para o tema escuro.
O resultado será o seguinte:
Alterando as cores dos widgets
Para alterar as cores dentro do projeto a sintaxe mudou um pouco também. Agora é necessário apontar para o “primary” e “secondary” dentro do “colorScheme”.
Vou continuar utilizando o Tema Escuro para demonstrar como trocar a cor da “AppBar” para a cor secundária que definimos e a cor da botão inferior para a cor primária que definimos.
No código será necessário fazer desse jeito:
O resultado será o seguinte:
O código final ficará assim:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final ThemeData tema = ThemeData(
brightness: Brightness.dark,
);
return MaterialApp(
title: 'Flutter Demo',
theme: tema.copyWith(
colorScheme: tema.colorScheme.copyWith(
primary: Colors.deepPurple,
secondary: Colors.red,
),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.secondary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).colorScheme.primary,
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}O que existe dentro do colorScheme
No construtor do “colorScheme” temos as seguintes propriedades:
Como podem ver todas estão marcadas como “required” porém só utilizamos algumas. Isso acontece por conta do “copyWith” que faz com que todas as propriedades não utilizadas recebam seu valor padrão. De toda forma, podemos utilizar quaisquer desses valores com quaisquer cores para personalizamos os temas da nossa aplicação.
Conclusão
Então é isso pessoal! Dessa forma podemos corrigir as mensagens “deprecated” dentro dos nossos projetos que utilizavam o “accentColor” como meio de cor secundária. Obrigado pela atenção e até a próxima!
