سمة تطبيق من بذرة

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 21 من 30.

يستمد كل زر ومفتاح تبديل وشريط تمرير في تطبيقك ألوانه من مكان واحد: سمة التطبيق. غيّر السمة، وسيتغيّر التطبيق بأكمله معها، دون أن تلمس أي زر.

تضبطها على MaterialApp. وأسرع طريقة لإنشاء سمة تبدأ بلون أساسي واحد:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

تنشئ ColorScheme.fromSeed مجموعة كاملة من الألوان المتناسقة انطلاقًا من اللون الأساسي: لونًا قويًا primary للأزرار والروابط، ولونًا هادئًا primaryContainer للمناطق المعبأة، ولونًا surface للخلفية، وألوان النصوص التي تظهر فوق كل منها. هذه الألوان درجات من اللون الأساسي، لذا فالبرتقالي على الزر ليس مطابقًا تمامًا لـ Colors.orange، لكنه برتقالي بوضوح ويسهل قراءته.

اللون الأرجواني الذي رأيته حتى الآن هو اللون الأساسي الافتراضي في Flutter.

التحدي

سهل

اجعل Garden Journal ذا سمة خضراء: اضبط theme: في MaterialApp على ThemeData يكون مخطط ألوانه مستمدًا من اللون الأساسي Colors.green. سيتحول كلا الزرين إلى اللون الأخضر دون تغييرهما.

جرّب بنفسك

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,
      home: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}