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.
Desafio
FácilEstilize o diário usando o tema:
- faça
Todayusar o estiloheadlineMediumdo tema - em
ThemeData, defina o tamanho do texto simples como18usando seu própriobodyMedium
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.'),
],
),
),
);
}
}
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