Um tema de aplicativo a partir de uma semente
Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 21 de 30.
Todos os botões, interruptores e controles deslizantes do seu app obtêm suas cores de um só lugar: o tema do app. Altere o tema e o app inteiro muda com ele, sem precisar mexer em nenhum botão.
Você o define em MaterialApp. A maneira mais rápida de criar um começa com uma única cor-semente:
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
),
home: ...,
)ColorScheme.fromSeed cria um conjunto completo de cores correspondentes a partir da semente: uma primary intensa para botões e links, uma primaryContainer suave para áreas preenchidas, uma surface para o plano de fundo e as cores do texto que aparece em cada uma delas. São tons da cor-semente; portanto, o laranja de um botão não é exatamente Colors.orange, mas é claramente laranja e fácil de ler.
O roxo que você viu até agora é a cor-semente padrão do Flutter.
Desafio
FácilDefina um tema verde para o Garden Journal: configure theme: de MaterialApp como um ThemeData cujo esquema de cores venha da semente Colors.green. Os dois botões ficarão verdes sem que sejam alterados.
Experimente você mesmo
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Garden Journal')),
body: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () {},
child: const Text('Cancel'),
),
const SizedBox(width: 16),
ElevatedButton(
onPressed: () {},
child: const Text('Save'),
),
],
),
),
),
);
}
}
Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Layouts que se adaptam
1Compartilhando uma linha
Expanded preenche a linhaCompartilhando espaço com flexFlexible se ajusta ao filhoSpacer separa os elementos4Tamanhos e pontos de quebra
Largura total: double.infinityUma largura máximaTamanho da tela: MediaQueryPontos de quebra com LayoutBuilder3Empilhando Widgets
Empilhe WidgetsPosicionado em um CantoAlinhe Dentro de uma CaixaSafeArea e o Notch6Temas e modo escuro
Um tema de aplicativo a partir de uma sementeCores de Theme.of(context)Estilos de texto do temaUm tema escuroUm botão para alternar o modo escuroPratique por conta própria: Compilador de Flutter online