Menu
CoddyTech

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.

challenge icon

Desafio

Fácil

Defina 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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconTeste seus conhecimentos

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

Pratique por conta própria: Compilador de Flutter online