Gaya Teks dari Tema

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 23 dari 30.

Theme menyimpan gaya teks serta warna di dalam textTheme. Setiap gaya memiliki nama sesuai fungsinya, dari besar hingga kecil: displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge, dan lainnya.

Untuk menggunakan salah satunya, ambil dari theme dan berikan sebagai style::

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

Text tanpa gaya akan menggunakan bodyMedium, yang berukuran 14. Untuk mengubah semua teks biasa di aplikasi sekaligus, berikan bodyMedium buatanmu sendiri ke theme:

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

Flutter mengisi setiap gaya yang tidak kamu tentukan dengan nilai default, jadi kamu hanya perlu menulis gaya yang ingin kamu ubah.

Tantangan

Mudah

Atur gaya jurnal dari tema:

buat Today menggunakan gaya headlineMedium dari tema
di ThemeData, atur ukuran teks biasa menjadi 18 dengan bodyMedium buatanmu sendiri

Coba sendiri

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.'),
          ],
        ),
      ),
    );
  }
}