سمة داكنة

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

يُبقي كثير من الناس هواتفهم في الوضع الداكن، خاصةً في الليل. يمكن أن يحتوي التطبيق على نسقين: theme: للفاتح وdarkTheme: للداكن.

يُشتق نظام الألوان الداكن من البذرة نفسها، مع إعداد إضافي واحد:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.dark,
  home: ...,
)

يُغيّر brightness: Brightness.dark اتجاه نظام الألوان: سطح داكن surface مع نص فاتح onSurface، ودرجات أهدأ من لون البذرة لا تسبب وهجًا.

يختار themeMode: النسق المستخدم. يتبع ThemeMode.system، وهو الإعداد الافتراضي، إعداد الهاتف؛ أما ThemeMode.light وThemeMode.dark فيختاران أحد النسقين بغض النظر عما يحدده الهاتف. يتغير كل عنصر واجهة مستخدم يقرأ النسق معه.

التحدي

سهل

امنح Night Reader مظهرًا داكنًا:

سمة داكنة darkTheme: من البذرة Colors.indigo مع brightness: Brightness.dark
themeMode: ThemeMode.dark، بحيث يكون داكنًا دائمًا

جرّب بنفسك

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.indigo),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: const Center(
          child: Text('Good evening', style: TextStyle(fontSize: 28)),
        ),
      ),
    );
  }
}