סגנונות טקסט מערך הנושא

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 23 מתוך 30.

ערכת העיצוב כוללת סגנונות טקסט וגם צבעים, בתוך textTheme. לכל סגנון יש שם שמתאר את תפקידו, מהגדול לקטן: displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge ועוד.

כדי להשתמש בסגנון, קוראים אותו מערך העיצוב ומעבירים אותו בתור style::

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

רכיב Text ללא סגנון משתמש ב-bodyMedium, שגודלו 14. כדי לשנות בבת אחת את כל הטקסט הרגיל באפליקציה, מגדירים בערכת העיצוב bodyMedium משלכם:

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

Flutter ממלא את כל הסגנונות שלא הגדרתם בערכי ברירת המחדל שלו, כך שצריך לכתוב רק את אלה שמשנים.

אתגר

קל

עצבי את היומן באמצעות ערכת העיצוב:

הגדירי ש־Today ישתמש בסגנון headlineMedium של ערכת העיצוב
בתוך ThemeData, הגדירי את גודל הטקסט הרגיל ל־18 באמצעות bodyMedium משלך

נסו בעצמכם

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