Flutter ile Dark Mode Özelliği Eklemek

Giriş

Flutter, modern ve şık mobil uygulamalar geliştirmek için kullanılan bir UI toolkit'tir. Geliştiricilerin makbul bulduğu özelliklerinden biri de kullanıcı deneyimini artıran Dark Mode (Karanlık Mod) desteğidir. Bu makalede, Flutter ile uygulamanıza Dark Mode nasıl ekleyeceğinizi adım adım inceleyeceğiz.

Flutter'da Dark Mode Desteği Nasıl Eklenir?

Adım 1: Temel Konfigürasyon

Flutter uygulamanızda Dark Mode desteğini etkinleştirmek için, MaterialApp bileşeninin tema ayarlarını düzenlemeniz gerekmektedir. Aşağıdaki kod örneğinde, hem açık hem de koyu tema ayarları gösterilmektedir.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dark Mode',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.red,
      ),
      themeMode: ThemeMode.system, // Kullanıcının sistem tercihini kullan
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dark Mode Örneği')),
      body: Center(child: Text('Merhaba, Dünya!')),
    );
  }
}

Adım 2: Karanlık Modun Test Edilmesi

Yukarıdaki kodu uygulamanıza ekledikten sonra, hem açık hem de koyu modda test edebilirsiniz. Cihazınızın ayarlarından ekran modunu değiştirmek, uygulamanızın tema değişimini otomatik olarak göstermelidir. Bu, kullanıcıların tercihine göre görünümü değiştirmelerini sağlar.

Sonuç

Flutter ile Dark Mode özelliği eklemek oldukça basittir ve kullanıcılara daha iyi bir deneyim sunar. Temayı dinamik olarak değiştirmek, özellikle gece kullanımında göz yorgunluğunu azaltır. Uygulamanızı bu özellik ile zenginleştirerek kullanıcı memnuniyetini artırabilirsiniz.