Стили текста TextTheme в Flutter
Размеры заголовков и основного текста в
Material собраны в
TextTheme.
В ThemeData их задают через textTheme
или наследуют из темы по умолчанию.
Готовые слоты - displayLarge,
headlineMedium, titleLarge,
bodyMedium, labelSmall и другие.
Переопределяют только отличия: остальные
слоты Material заполнит сам. Виджет
Text
получает их через style: Theme.of(context).textTheme.titleLarge
без ручного перечисления размера и веса:
import 'package:flutter/material.dart';
void main() {
runApp(const TextThemeApp());
}
class TextThemeApp extends StatelessWidget {
const TextThemeApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
textTheme: const TextTheme(
titleLarge: TextStyle(fontWeight: FontWeight.w600),
bodyMedium: TextStyle(height: 1.4),
),
),
home: const TextThemeDemoPage(),
);
}
}
class TextThemeDemoPage extends StatelessWidget {
const TextThemeDemoPage({super.key});
@override
Widget build(BuildContext context) {
final text = Theme.of(context).textTheme;
return Scaffold(
appBar: AppBar(title: const Text('TextTheme')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Screen title', style: text.titleLarge),
const SizedBox(height: 8),
Text(
'A regular paragraph with the theme line height.',
style: text.bodyMedium,
),
],
),
),
);
}
}
В ThemeData задайте headlineSmall
с цветом Colors.brown. На экране
выведите заголовок этим стилем и подпись
labelLarge без локального
TextStyle.