أنماط النص من السمة

جزء من قسم تصميم يتكيف مع الشاشة في رحلة 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.'),
          ],
        ),
      ),
    );
  }
}