Menu
CoddyTech

Estilos de texto do tema

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 23 de 30.

O tema contém estilos de texto, além de cores, em seu textTheme. Cada estilo tem um nome de acordo com sua finalidade, do maior ao menor: displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge e outros.

Para usar um deles, leia-o do tema e passe-o como style::

Text('Hello', style: Theme.of(context).textTheme.headlineMedium)

Um Text sem estilo usa bodyMedium, que tem tamanho 14. Para alterar todos os textos simples do app de uma só vez, defina seu próprio bodyMedium no tema:

ThemeData(
  textTheme: const TextTheme(
    bodyMedium: TextStyle(fontSize: 16),
  ),
)

O Flutter preenche todos os estilos que você não definir com os valores padrão, então você só precisa escrever aqueles que alterar.

challenge icon

Desafio

Fácil

Estilize o diário usando o tema:

  • faça Today usar o estilo headlineMedium do tema
  • em ThemeData, defina o tamanho do texto simples como 18 usando seu próprio bodyMedium

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Garden Journal')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Today'),
            const SizedBox(height: 8),
            const Text('Water the tomatoes in the morning.'),
            const Text('Pick the first beans on Friday.'),
          ],
        ),
      ),
    );
  }
}
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