{"id":30796,"date":"2025-10-02T06:40:59","date_gmt":"2025-10-02T03:40:59","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30796"},"modified":"2025-10-02T06:40:59","modified_gmt":"2025-10-02T03:40:59","slug":"flutterda-temalari-kullanma-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/","title":{"rendered":"Flutter’da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

Flutter’da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber<\/h2>\n

Flutter, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirmek i\u00e7in Google taraf\u0131ndan geli\u015ftirilmi\u015f a\u00e7\u0131k kaynakl\u0131 bir UI ara\u00e7 tak\u0131m\u0131d\u0131r. H\u0131zl\u0131 geli\u015ftirme, \u00e7arp\u0131c\u0131 UI’lar ve yerel performans sunar. Flutter’\u0131n en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, uygulamalar\u0131n\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve hissini tutarl\u0131 bir \u015fekilde y\u00f6netmenizi sa\u011flayan tema sistemidir. Bu makalede, Flutter’da temalar\u0131n nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, \u00f6zelle\u015ftirilece\u011fini ve y\u00f6netilece\u011fini derinlemesine inceleyece\u011fiz.<\/p>\n

Giri\u015f: Neden Temalar \u00d6nemlidir?<\/h3>\n

Bir uygulaman\u0131n kullan\u0131c\u0131 deneyimi (UX) sadece i\u015flevselli\u011fiyle de\u011fil, ayn\u0131 zamanda g\u00f6rsel tutarl\u0131l\u0131\u011f\u0131 ve esteti\u011fiyle de do\u011frudan ili\u015fkilidir. Temalar, bu g\u00f6rsel tutarl\u0131l\u0131\u011f\u0131 sa\u011flaman\u0131n ve uygulaman\u0131z\u0131n markas\u0131n\u0131 veya kimli\u011fini yans\u0131tman\u0131n temel yoludur. Flutter’da temalar, uygulaman\u0131z\u0131n renk \u015femas\u0131, tipografisi, ikon stilleri ve hatta belirli widget’lar\u0131n varsay\u0131lan g\u00f6r\u00fcn\u00fcm\u00fc gibi bir\u00e7ok g\u00f6rsel \u00f6zelli\u011fini tek bir merkezden y\u00f6netmenize olanak tan\u0131r.<\/p>\n

Temalar\u0131n sa\u011flad\u0131\u011f\u0131 ba\u015fl\u0131ca faydalar \u015funlard\u0131r:<\/p>\n

* G\u00f6rsel Tutarl\u0131l\u0131k:<\/strong> Uygulaman\u0131z\u0131n her yerinde ayn\u0131 renkleri, yaz\u0131 tiplerini ve widget stillerini kullanarak profesyonel ve b\u00fct\u00fcnsel bir g\u00f6r\u00fcn\u00fcm elde edersiniz.
\n* Marka Kimli\u011fi:<\/strong> Uygulaman\u0131z\u0131n renkleri ve tipografisi, markan\u0131z\u0131n kurumsal kimli\u011fini do\u011frudan yans\u0131tabilir, bu da kullan\u0131c\u0131lar\u0131n markan\u0131z\u0131 tan\u0131mas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.
\n* Kullan\u0131c\u0131 Deneyimi \u0130yile\u015ftirmesi:<\/strong> Tutarl\u0131 bir UI, kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 daha kolay anlamas\u0131na ve gezinmesine yard\u0131mc\u0131 olur.
\n* Koyu Mod Deste\u011fi:<\/strong> Temalar sayesinde uygulaman\u0131za kolayca koyu mod (dark mode) deste\u011fi ekleyebilir, kullan\u0131c\u0131lar\u0131n g\u00f6z yorgunlu\u011funu azaltabilir ve pil \u00f6mr\u00fcnden tasarruf etmelerini sa\u011flayabilirsiniz.
\n* Daha H\u0131zl\u0131 Geli\u015ftirme:<\/strong> Bir kez tan\u0131mlanan temalar, bir\u00e7ok widget i\u00e7in varsay\u0131lan stilleri otomatik olarak uygular, b\u00f6ylece her widget’\u0131 tek tek stilize etmekle zaman kaybetmezsiniz.
\n* Kolay Bak\u0131m:<\/strong> Tasar\u0131m de\u011fi\u015fiklikleri gerekti\u011finde, sadece tema tan\u0131m\u0131n\u0131 g\u00fcncelleyerek uygulaman\u0131z\u0131n genelinde bu de\u011fi\u015fiklikleri kolayca uygulayabilirsiniz.<\/p>\n

Flutter’da tema sistemi, ThemeData<\/code> s\u0131n\u0131f\u0131 etraf\u0131nda in\u015fa edilmi\u015ftir ve MaterialApp<\/code> widget’\u0131 arac\u0131l\u0131\u011f\u0131yla uygulamaya dahil edilir. Bu sistem, Material Design y\u00f6nergelerini temel al\u0131r ve geni\u015f \u00f6zelle\u015ftirme se\u00e7enekleri sunar.<\/p>\n

Temel Tema Kavramlar\u0131<\/h3>\n

Flutter’da tema sisteminin merkezinde birka\u00e7 anahtar bile\u015fen bulunur:<\/p>\n

ThemeData<\/code> S\u0131n\u0131f\u0131<\/h4>\n

ThemeData<\/code>, uygulaman\u0131z\u0131n g\u00f6rsel \u00f6zelliklerini tan\u0131mlayan bir nesnedir. Renkler, yaz\u0131 tipleri, ikonlar ve \u00e7e\u015fitli widget’lar\u0131n stilleri gibi bir\u00e7ok \u00f6zelli\u011fi bar\u0131nd\u0131r\u0131r. ThemeData<\/code> s\u0131n\u0131f\u0131n\u0131n bir\u00e7ok \u00f6zelli\u011fi vard\u0131r ve her biri uygulaman\u0131z\u0131n belirli bir y\u00f6n\u00fcn\u00fc kontrol eder.<\/p>\n

MaterialApp<\/code> ve Tema \u00d6zellikleri<\/h4>\n

Flutter uygulaman\u0131z\u0131n k\u00f6k widget’\u0131 genellikle MaterialApp<\/code>‘tir. MaterialApp<\/code>, temalar\u0131 uygulamaya dahil etmek i\u00e7in \u00fc\u00e7 ana \u00f6zelli\u011fe sahiptir:<\/p>\n

* theme<\/code>: Uygulaman\u0131z\u0131n varsay\u0131lan (genellikle a\u00e7\u0131k) temas\u0131n\u0131 tan\u0131mlar. Bir ThemeData<\/code> nesnesi al\u0131r.
\n* darkTheme<\/code>: Uygulaman\u0131z\u0131n koyu temas\u0131n\u0131 tan\u0131mlar. Bu da bir ThemeData<\/code> nesnesi al\u0131r.
\n* themeMode<\/code>: Uygulaman\u0131n hangi tema modunda \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirler. \u00dc\u00e7 olas\u0131 de\u011feri vard\u0131r:
\n * ThemeMode.system<\/code>: Cihaz\u0131n sistem ayarlar\u0131na g\u00f6re otomatik olarak a\u00e7\u0131k veya koyu temay\u0131 se\u00e7er.
\n * ThemeMode.light<\/code>: Her zaman a\u00e7\u0131k temay\u0131 kullan\u0131r.
\n * ThemeMode.dark<\/code>: Her zaman koyu temay\u0131 kullan\u0131r.<\/p>\n

Bu \u00f6zellikler sayesinde uygulaman\u0131z\u0131n genel temas\u0131n\u0131 kolayca ayarlayabilir ve koyu mod deste\u011fi sa\u011flayabilirsiniz.<\/p>\n

BuildContext<\/code> \u00dczerinden Temaya Eri\u015fim<\/h4>\n

Bir widget i\u00e7inde, mevcut temaya eri\u015fmek i\u00e7in Theme.of(context)<\/code> y\u00f6ntemini kullan\u0131rs\u0131n\u0131z. Bu y\u00f6ntem, ge\u00e7erli BuildContext<\/code> a\u011fac\u0131ndaki en yak\u0131n ThemeData<\/code> nesnesini d\u00f6nd\u00fcr\u00fcr. Bu sayede, widget’lar\u0131n\u0131z temada tan\u0131mlanan renkleri, yaz\u0131 tiplerini ve di\u011fer stilleri dinamik olarak kullanabilir.<\/p>\n

\/\/ \u00d6rnek: Tema rengini kullanarak bir metin widget'\u0131\nText(\n  'Merhaba D\u00fcnya!',\n  style: TextStyle(color: Theme.of(context).primaryColor),\n);\n\n\/\/ \u00d6rnek: Tema metin stilini kullanarak bir metin widget'\u0131\nText(\n  'Ba\u015fl\u0131k',\n  style: Theme.of(context).textTheme.headline6,\n);<\/code><\/pre>\n
ThemeData<\/code>‘y\u0131 Ke\u015ffetmek: \u00d6zelle\u015ftirme Se\u00e7enekleri<\/h3>\n
ThemeData<\/code> s\u0131n\u0131f\u0131, uygulaman\u0131z\u0131n hemen hemen her g\u00f6rsel y\u00f6n\u00fcn\u00fc kontrol etmenizi sa\u011flayan zengin bir \u00f6zellik setine sahiptir. Bu b\u00f6l\u00fcmde, en yayg\u0131n ve \u00f6nemli ThemeData<\/code> \u00f6zelliklerini inceleyece\u011fiz.<\/p>\n
Renkler<\/h4>\n
Renkler, bir uygulaman\u0131n g\u00f6rsel kimli\u011finin temelini olu\u015fturur. ThemeData<\/code>, uygulaman\u0131z\u0131n ana renklerini ve \u00e7e\u015fitli bile\u015fenler i\u00e7in renkleri tan\u0131mlamak i\u00e7in bir\u00e7ok \u00f6zelli\u011fe sahiptir.<\/p>\n
ColorScheme<\/code>: Modern Renk Y\u00f6netimi<\/h5>\n
Flutter 2.0 ve Material Design 3 ile birlikte, renk y\u00f6netimi i\u00e7in ColorScheme<\/code> kullan\u0131m\u0131 \u015fiddetle tavsiye edilmektedir. ColorScheme<\/code>, uygulaman\u0131z\u0131n renk paletini daha yap\u0131land\u0131r\u0131lm\u0131\u015f ve anlaml\u0131 bir \u015fekilde tan\u0131mlaman\u0131z\u0131 sa\u011flar. Bu yakla\u015f\u0131m, renklerin anlamsal rollerine (\u00f6rne\u011fin, birincil, ikincil, hata, y\u00fczey vb.) odaklan\u0131r ve koyu mod gibi farkl\u0131 tema varyasyonlar\u0131n\u0131 y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
Bir ColorScheme<\/code> olu\u015ftururken a\u015fa\u011f\u0131daki ana renkleri tan\u0131mlars\u0131n\u0131z:<\/p>\n
*   primary<\/code>: Uygulaman\u0131z\u0131n ana rengi. Genellikle ekranlar, b\u00fcy\u00fck bile\u015fenler ve etkile\u015fimli \u00f6\u011feler i\u00e7in kullan\u0131l\u0131r.
\n*   onPrimary<\/code>: primary<\/code> rengi \u00fczerinde okunabilir olmas\u0131 gereken metin ve ikonlar\u0131n rengi.
\n*   secondary<\/code>: Uygulaman\u0131z\u0131n ikincil rengi. Birincil renge vurgu yapmak veya ikincil eylemleri belirtmek i\u00e7in kullan\u0131l\u0131r.
\n*   onSecondary<\/code>: secondary<\/code> rengi \u00fczerinde okunabilir olmas\u0131 gereken metin ve ikonlar\u0131n rengi.
\n*   surface<\/code>: Kartlar, sayfalar ve men\u00fcler gibi bile\u015fenlerin y\u00fczey rengi.
\n*   onSurface<\/code>: surface<\/code> rengi \u00fczerinde okunabilir olmas\u0131 gereken metin ve ikonlar\u0131n rengi.
\n*   background<\/code>: Ekran\u0131n genel arka plan rengi.
\n*   onBackground<\/code>: background<\/code> rengi \u00fczerinde okunabilir olmas\u0131 gereken metin ve ikonlar\u0131n rengi.
\n*   error<\/code>: Hata durumlar\u0131n\u0131 belirtmek i\u00e7in kullan\u0131lan renk.
\n*   onError<\/code>: error<\/code> rengi \u00fczerinde okunabilir olmas\u0131 gereken metin ve ikonlar\u0131n rengi.<\/p>\n
ColorScheme<\/code>‘i ThemeData<\/code>‘ya \u015fu \u015fekilde entegre edersiniz:<\/p>\n
ThemeData(\n  colorScheme: ColorScheme.fromSeed(\n    seedColor: Colors.deepPurple, \/\/ Temel renk\n    brightness: Brightness.light, \/\/ A\u00e7\u0131k tema i\u00e7in\n    \/\/ Di\u011fer renkleri burada \u00f6zelle\u015ftirebilirsiniz\n    \/\/ primary: Colors.blue,\n    \/\/ secondary: Colors.green,\n    \/\/ surface: Colors.white,\n    \/\/ background: Colors.grey[100],\n    \/\/ error: Colors.red,\n  ),\n  \/\/ ... di\u011fer tema \u00f6zellikleri\n);\n\n\/\/ Koyu tema i\u00e7in\nThemeData(\n  colorScheme: ColorScheme.fromSeed(\n    seedColor: Colors.deepPurple,\n    brightness: Brightness.dark, \/\/ Koyu tema i\u00e7in\n    \/\/ Koyu tema i\u00e7in \u00f6zel renkler\n  ),\n  \/\/ ... di\u011fer tema \u00f6zellikleri\n);<\/code><\/pre>\n
ColorScheme.fromSeed<\/code> metodu, tek bir “\u00e7ekirdek” renkten yola \u00e7\u0131karak t\u00fcm renk paletini otomatik olarak olu\u015fturur, bu da ba\u015flang\u0131\u00e7 i\u00e7in harika bir yoldur.<\/p>\n
Eski Renk \u00d6zellikleri (Hala Kullan\u0131labilir, Ancak ColorScheme<\/code> \u00d6nerilir)<\/h5>\n
ColorScheme<\/code> daha modern bir yakla\u015f\u0131m olsa da, ThemeData<\/code> hala do\u011frudan renk \u00f6zelliklerine sahiptir:<\/p>\n
*   primaryColor<\/code>: Uygulaman\u0131n ana rengi. ColorScheme.primary<\/code> ile e\u015fde\u011ferdir.
\n*   primaryColorLight<\/code>, primaryColorDark<\/code>: primaryColor<\/code>‘\u0131n daha a\u00e7\u0131k ve koyu tonlar\u0131.
\n*   accentColor<\/code> (DEPRECATED): Vurgu rengi. Art\u0131k ColorScheme.secondary<\/code> kullan\u0131lmas\u0131 \u00f6nerilir.
\n*   backgroundColor<\/code>: Scaffold ve di\u011fer bile\u015fenlerin arka plan rengi. ColorScheme.background<\/code> ile e\u015fde\u011ferdir.
\n*   scaffoldBackgroundColor<\/code>: Scaffold<\/code>‘\u0131n arka plan rengi.
\n*   canvasColor<\/code>: Material<\/code> widget’\u0131n\u0131n varsay\u0131lan arka plan rengi.
\n*   cardColor<\/code>: Card<\/code> widget’\u0131n\u0131n arka plan rengi.
\n*   dividerColor<\/code>: Divider<\/code> ve PopupMenuDivider<\/code> gibi ay\u0131r\u0131c\u0131lar\u0131n rengi.
\n*   focusColor<\/code>, hoverColor<\/code>, highlightColor<\/code>, splashColor<\/code>: Kullan\u0131c\u0131 etkile\u015fimleri (odaklanma, \u00fczerine gelme, vurgulama, s\u0131\u00e7rama efekti) i\u00e7in renkler.
\n*   selectedRowColor<\/code>, unselectedWidgetColor<\/code>, disabledColor<\/code>: Se\u00e7ili sat\u0131rlar, se\u00e7ili olmayan widget’lar ve devre d\u0131\u015f\u0131 b\u0131rak\u0131lm\u0131\u015f widget’lar i\u00e7in renkler.<\/p>\n
Tipografi (Text Themes)<\/h4>\n
ThemeData.textTheme<\/code>, uygulaman\u0131zdaki t\u00fcm metin stillerini merkezi olarak y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Material Design tipografi k\u0131lavuzlar\u0131na g\u00f6re \u00e7e\u015fitli metin stilleri (\u00f6rne\u011fin, headline1<\/code>‘den caption<\/code>‘a kadar) i\u00e7erir. Her bir stil, TextStyle<\/code> nesnesiyle \u00f6zelle\u015ftirilebilir.<\/p>\n
ThemeData(\n  textTheme: TextTheme(\n    headline1: TextStyle(fontSize: 96.0, fontWeight: FontWeight.bold, color: Colors.blue),\n    headline6: TextStyle(fontSize: 20.0, fontStyle: FontStyle.italic),\n    bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),\n    \/\/ ... di\u011fer metin stilleri\n  ),\n  \/\/ ...\n);<\/code><\/pre>\n
Bu stillere widget’lar\u0131n\u0131zdan Theme.of(context).textTheme.headline6<\/code> gibi eri\u015febilirsiniz.<\/p>\n
\u0130kon Temalar\u0131 (Icon Themes)<\/h4>\n
ThemeData.iconTheme<\/code>, uygulaman\u0131zdaki t\u00fcm ikonlar\u0131n varsay\u0131lan rengini, boyutunu ve opakl\u0131\u011f\u0131n\u0131 kontrol eder.<\/p>\n
ThemeData(\n  iconTheme: IconThemeData(\n    color: Colors.red,\n    size: 24.0,\n    opacity: 0.8,\n  ),\n  \/\/ ...\n);<\/code><\/pre>\n
Widget Temalar\u0131<\/h4>\n
ThemeData<\/code>, bireysel widget’lar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirmek i\u00e7in bir\u00e7ok \u00f6zel tema \u00f6zelli\u011fine sahiptir. Bu \u00f6zellikler, belirli bir widget t\u00fcr\u00fcn\u00fcn t\u00fcm \u00f6rnekleri i\u00e7in varsay\u0131lan stilleri ayarlaman\u0131za olanak tan\u0131r. \u0130\u015fte baz\u0131 \u00f6nemli \u00f6rnekler:<\/p>\n
*   AppBarTheme<\/code>: AppBar<\/code> widget’\u0131n\u0131n varsay\u0131lan stilini kontrol eder (arka plan rengi, metin stili, ikon rengi vb.).
\n*   BottomAppBarTheme<\/code>: BottomAppBar<\/code>‘\u0131n stilini.
\n*   TabBarTheme<\/code>: TabBar<\/code>‘\u0131n stilini.
\n*   CardTheme<\/code>: Card<\/code> widget’\u0131n\u0131n stilini (y\u00fckseklik, kenar bo\u015flu\u011fu, \u015fekil vb.).
\n*   ButtonTheme<\/code> (DEPRECATED): Eski d\u00fc\u011fme widget’lar\u0131 i\u00e7in. Art\u0131k ElevatedButtonTheme<\/code>, TextButtonTheme<\/code>, OutlinedButtonTheme<\/code> gibi spesifik temalar kullan\u0131l\u0131r.
\n*   ElevatedButtonTheme<\/code>, TextButtonTheme<\/code>, OutlinedButtonTheme<\/code>: Modern d\u00fc\u011fme widget’lar\u0131n\u0131n stillerini kontrol eder. ButtonStyle<\/code> nesneleri al\u0131rlar.<\/p>\n
ThemeData(\n      elevatedButtonTheme: ElevatedButtonThemeData(\n        style: ElevatedButton.styleFrom(\n          primary: Colors.green, \/\/ Arka plan rengi\n          onPrimary: Colors.white, \/\/ Metin\/ikon rengi\n          shape: RoundedRectangleBorder(\n            borderRadius: BorderRadius.circular(10),\n          ),\n        ),\n      ),\n      \/\/ ...\n    );<\/code><\/pre>\n
*   InputDecorationTheme<\/code>: TextField<\/code> ve TextFormField<\/code> gibi giri\u015f alanlar\u0131n\u0131n dekorasyonunu (kenarl\u0131k, etiket stili, ipucu metni stili vb.) kontrol eder.
\n*   SliderTheme<\/code>: Slider<\/code> widget’\u0131n\u0131n stilini.
\n*   SnackBarTheme<\/code>: SnackBar<\/code>‘\u0131n stilini.
\n*   TooltipTheme<\/code>: Tooltip<\/code>‘in stilini.
\n*   DialogTheme<\/code>: Dialog<\/code>‘lar\u0131n stilini.
\n*   BottomSheetTheme<\/code>: BottomSheet<\/code>‘lerin stilini.
\n*   FloatingActionButtonTheme<\/code>: FloatingActionButton<\/code>‘\u0131n stilini.
\n*   NavigationRailTheme<\/code>, DataTableTheme<\/code>, ChipTheme<\/code>, PopupMenuTheme<\/code>, ProgressIndicatorTheme<\/code>, RadioTheme<\/code>, SwitchTheme<\/code>, CheckboxTheme<\/code>, ToggleButtonsTheme<\/code>, DividerTheme<\/code>, ExpansionTileTheme<\/code>, ListTileTheme<\/code>: Di\u011fer \u00e7e\u015fitli widget’lar i\u00e7in tema ayarlar\u0131.<\/p>\n
Her bir widget temas\u0131, ilgili widget’\u0131n ThemeData<\/code>‘ya \u00f6zg\u00fc bir alt s\u0131n\u0131f\u0131n\u0131 (\u00f6rne\u011fin, AppBarTheme<\/code> i\u00e7in AppBarThemeData<\/code>) al\u0131r ve bu, widget’\u0131n belirli \u00f6zelliklerini \u00f6zelle\u015ftirmenizi sa\u011flar.<\/p>\n
Tema Uygulama ve \u00d6zelle\u015ftirme<\/h3>\n
Temalar, uygulaman\u0131z\u0131n farkl\u0131 seviyelerinde uygulanabilir ve ge\u00e7ersiz k\u0131l\u0131nabilir.<\/p>\n
Global Tema<\/h4>\n
Uygulaman\u0131z\u0131n genel temas\u0131, MaterialApp<\/code> widget’\u0131n\u0131n theme<\/code> ve darkTheme<\/code> \u00f6zellikleri arac\u0131l\u0131\u011f\u0131yla ayarlan\u0131r. Bu, uygulaman\u0131zdaki t\u00fcm widget’lar i\u00e7in varsay\u0131lan stilleri belirler.<\/p>\n
class MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Flutter Tema Deme',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n        \/\/ colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.light),\n        appBarTheme: AppBarTheme(\n          backgroundColor: Colors.blueAccent,\n          foregroundColor: Colors.white,\n          elevation: 4,\n        ),\n        textTheme: TextTheme(\n          headline6: TextStyle(fontSize: 24.0, fontStyle: FontStyle.italic),\n          bodyText2: TextStyle(fontSize: 16.0),\n        ),\n      ),\n      darkTheme: ThemeData(\n        primarySwatch: Colors.indigo,\n        \/\/ colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo, brightness: Brightness.dark),\n        appBarTheme: AppBarTheme(\n          backgroundColor: Colors.indigo[800],\n          foregroundColor: Colors.white70,\n          elevation: 2,\n        ),\n        brightness: Brightness.dark, \/\/ Koyu tema oldu\u011funu belirtir\n      ),\n      themeMode: ThemeMode.system, \/\/ Sistem ayarlar\u0131na g\u00f6re tema se\u00e7imi\n      home: MyHomePage(),\n    );\n  }\n}<\/code><\/pre>\n
Yerel Tema: Theme<\/code> Widget’\u0131 ile Ge\u00e7ersiz K\u0131lma<\/h4>\n
Bazen, uygulaman\u0131z\u0131n belirli bir b\u00f6l\u00fcm\u00fc veya belirli bir widget i\u00e7in global temadan farkl\u0131 bir tema uygulamak isteyebilirsiniz. Bu durumda, Theme<\/code> widget’\u0131n\u0131 kullanabilirsiniz. Theme<\/code> widget’\u0131, alt a\u011fac\u0131ndaki widget’lar i\u00e7in yeni bir tema tan\u0131mlaman\u0131za veya mevcut temay\u0131 geni\u015fletmenize olanak tan\u0131r.<\/p>\n
Theme<\/code> widget’\u0131 iki ana \u00f6zelli\u011fi al\u0131r:<\/p>\n
*   data<\/code>: Alt a\u011fa\u00e7 i\u00e7in kullan\u0131lacak tam bir ThemeData<\/code> nesnesi. Mevcut temay\u0131 tamamen ge\u00e7ersiz k\u0131lar.
\n*   child<\/code>: Teman\u0131n uygulanaca\u011f\u0131 widget.<\/p>\n
E\u011fer mevcut temay\u0131 temel alarak sadece birka\u00e7 \u00f6zelli\u011fi de\u011fi\u015ftirmek isterseniz, Theme.of(context).copyWith()<\/code> metodunu kullanabilirsiniz:<\/p>\n
\/\/ Mevcut temay\u0131 temel alarak AppBar'\u0131n arka plan rengini de\u011fi\u015ftiren bir alt tema\nTheme(\n  data: Theme.of(context).copyWith(\n    appBarTheme: AppBarTheme(\n      backgroundColor: Colors.green, \/\/ Sadece bu alt tema i\u00e7in ye\u015fil AppBar\n      foregroundColor: Colors.black,\n    ),\n  ),\n  child: Builder(\n    builder: (innerContext) {\n      return AppBar(\n        title: Text('Yerel Tema Ba\u015fl\u0131\u011f\u0131'),\n        \/\/ Bu AppBar, Theme.of(innerContext) ile ye\u015fil temay\u0131 alacak.\n      );\n    },\n  ),\n);<\/code><\/pre>\n
Bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda belirli bile\u015fenlerin veya sayfalar\u0131n kendi \u00f6zel temalar\u0131na sahip olmas\u0131 gerekti\u011finde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Tema Uzant\u0131lar\u0131 (ThemeExtension<\/code>)<\/h4>\n
Flutter 3.0 ile tan\u0131t\u0131lan ThemeExtension<\/code>, ThemeData<\/code>‘ya uygulaman\u0131za \u00f6zg\u00fc \u00f6zel \u00f6zellikler eklemenin g\u00fc\u00e7l\u00fc bir yoludur. ThemeData<\/code>‘n\u0131n do\u011frudan desteklemedi\u011fi \u00f6zel renkler, yaz\u0131 tipleri, g\u00f6lgeler veya di\u011fer g\u00f6rsel \u00f6zellikleriniz varsa, ThemeExtension<\/code> kullanarak bunlar\u0131 teman\u0131za dahil edebilirsiniz.<\/p>\n
Bir ThemeExtension<\/code> olu\u015fturmak i\u00e7in:<\/p>\n
1.  ThemeExtension<\/code> s\u0131n\u0131f\u0131n\u0131 geni\u015fleten bir s\u0131n\u0131f tan\u0131mlay\u0131n.
\n2.  Bu s\u0131n\u0131fta, teman\u0131za eklemek istedi\u011finiz \u00f6zellikleri tan\u0131mlay\u0131n.
\n3.  copyWith<\/code> ve lerp<\/code> (interpolasyon) metodlar\u0131n\u0131 uygulay\u0131n. lerp<\/code> metodu, temalar aras\u0131nda ge\u00e7i\u015f yaparken yumu\u015fak animasyonlar sa\u011flamak i\u00e7in \u00f6nemlidir.<\/p>\n
import 'package:flutter\/material.dart';\n\n@immutable\nclass MyCustomColors extends ThemeExtension {\n  const MyCustomColors({\n    required this.brandColor,\n    required this.danger,\n  });\n\n  final Color? brandColor;\n  final Color? danger;\n\n  @override\n  MyCustomColors copyWith({Color? brandColor, Color? danger}) {\n    return MyCustomColors(\n      brandColor: brandColor ?? this.brandColor,\n      danger: danger ?? this.danger,\n    );\n  }\n\n  @override\n  MyCustomColors lerp(ThemeExtension? other, double t) {\n    if (other is! MyCustomColors) {\n      return this;\n    }\n    return MyCustomColors(\n      brandColor: Color.lerp(brandColor, other.brandColor, t),\n      danger: Color.lerp(danger, other.danger, t),\n    );\n  }\n\n  \/\/ Teman\u0131n varsay\u0131lan de\u011ferlerini sa\u011flayabilirsiniz\n  static const light = MyCustomColors(\n    brandColor: Color(0xFF1A73E8), \/\/ Google mavisi\n    danger: Color(0xFFDB4437), \/\/ Google k\u0131rm\u0131z\u0131s\u0131\n  );\n\n  static const dark = MyCustomColors(\n    brandColor: Color(0xFF8AB4F8),\n    danger: Color(0xFFF28B82),\n  );\n}<\/code><\/pre>\n
Daha sonra bu uzant\u0131y\u0131 ThemeData<\/code>‘n\u0131za eklersiniz:<\/p>\n
MaterialApp(\n  theme: ThemeData(\n    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple, brightness: Brightness.light),\n    extensions: >[\n      MyCustomColors.light,\n    ],\n  ),\n  darkTheme: ThemeData(\n    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple, brightness: Brightness.dark),\n    extensions: >[\n      MyCustomColors.dark,\n    ],\n    brightness: Brightness.dark,\n  ),\n  \/\/ ...\n);<\/code><\/pre>\n
Widget’lar\u0131n\u0131zdan bu \u00f6zel renklere eri\u015fmek i\u00e7in:<\/p>\n
\/\/ MyCustomColors s\u0131n\u0131f\u0131na eri\u015fim\nfinal customColors = Theme.of(context).extension();\n\n\/\/ Renkleri kullanma\nText(\n  'Marka Rengi',\n  style: TextStyle(color: customColors?.brandColor),\n);<\/code><\/pre>\n
ThemeExtension<\/code>, \u00f6zellikle geni\u015f ve \u00f6zelle\u015ftirilmi\u015f tasar\u0131m sistemlerine sahip uygulamalar i\u00e7in oyunun kurallar\u0131n\u0131 de\u011fi\u015ftiren bir \u00f6zelliktir.<\/p>\n
Koyu Mod (Dark Mode) Y\u00f6netimi<\/h3>\n
Koyu mod, modern uygulamalar\u0131n vazge\u00e7ilmez bir \u00f6zelli\u011fidir. Flutter, MaterialApp<\/code>‘in darkTheme<\/code> ve themeMode<\/code> \u00f6zellikleriyle koyu modu kolayca desteklemenizi sa\u011flar.<\/p>\n
themeMode<\/code> De\u011ferleri<\/h4>\n
*   ThemeMode.system<\/code>: Kullan\u0131c\u0131n\u0131n cihaz\u0131n\u0131n genel tema ayar\u0131na (a\u00e7\u0131k veya koyu) uyar. Bu genellikle en iyi kullan\u0131c\u0131 deneyimini sa\u011flar.
\n*   ThemeMode.light<\/code>: Uygulama her zaman a\u00e7\u0131k temay\u0131 kullan\u0131r, cihaz ayarlar\u0131n\u0131 g\u00f6z ard\u0131 eder.
\n*   ThemeMode.dark<\/code>: Uygulama her zaman koyu temay\u0131 kullan\u0131r, cihaz ayarlar\u0131n\u0131 g\u00f6z ard\u0131 eder.<\/p>\n
Kullan\u0131c\u0131 Tercihine G\u00f6re Tema De\u011fi\u015ftirme<\/h4>\n
Uygulaman\u0131z\u0131n kullan\u0131c\u0131n\u0131n tercihine g\u00f6re tema de\u011fi\u015ftirmesine izin vermek i\u00e7in, themeMode<\/code> de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bir durum y\u00f6netimi (state management) \u00e7\u00f6z\u00fcm\u00fc kullanman\u0131z gerekir.<\/p>\n
Basit bir \u00f6rnek i\u00e7in, StatefulWidget<\/code> i\u00e7inde themeMode<\/code>‘u y\u00f6netebiliriz:<\/p>\n
class MyApp extends StatefulWidget {\n  @override\n  _MyAppState createState() => _MyAppState();\n}\n\nclass _MyAppState extends State {\n  ThemeMode _themeMode = ThemeMode.system; \/\/ Varsay\u0131lan olarak sistem ayar\u0131\n\n  void _changeThemeMode(ThemeMode mode) {\n    setState(() {\n      _themeMode = mode;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Flutter Tema Deme',\n      theme: ThemeData(\n        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.light),\n      ),\n      darkTheme: ThemeData(\n        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),\n        brightness: Brightness.dark,\n      ),\n      themeMode: _themeMode, \/\/ Dinamik olarak de\u011fi\u015fen tema modu\n      home: MyHomePage(changeThemeMode: _changeThemeMode),\n    );\n  }\n}\n\nclass MyHomePage extends StatelessWidget {\n  final Function(ThemeMode) changeThemeMode;\n\n  MyHomePage({required this.changeThemeMode});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Tema Y\u00f6netimi'),\n      ),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            ElevatedButton(\n              onPressed: () => changeThemeMode(ThemeMode.light),\n              child: Text('A\u00e7\u0131k Tema'),\n            ),\n            ElevatedButton(\n              onPressed: () => changeThemeMode(ThemeMode.dark),\n              child: Text('Koyu Tema'),\n            ),\n            ElevatedButton(\n              onPressed: () => changeThemeMode(ThemeMode.system),\n              child: Text('Sistem Temas\u0131'),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}<\/code><\/pre>\n
Daha karma\u015f\u0131k uygulamalarda, Provider<\/code>, Riverpod<\/code>, Bloc<\/code> veya GetX<\/code> gibi durum y\u00f6netimi \u00e7\u00f6z\u00fcmlerini kullanarak themeMode<\/code>‘u global olarak y\u00f6netmek daha uygun olacakt\u0131r. Bu, tema tercihini kal\u0131c\u0131 olarak depolaman\u0131za (\u00f6rne\u011fin SharedPreferences<\/code> kullanarak) ve uygulama yeniden ba\u015flat\u0131ld\u0131\u011f\u0131nda bile hat\u0131rlaman\u0131za olanak tan\u0131r.<\/p>\n
Sistem Parlakl\u0131\u011f\u0131n\u0131 Alg\u0131lama<\/h4>\n
MediaQuery.of(context).platformBrightness<\/code> kullanarak cihaz\u0131n mevcut parlakl\u0131k ayar\u0131n\u0131 (a\u00e7\u0131k veya koyu) manuel olarak alg\u0131layabilirsiniz. Bu, themeMode<\/code>‘u ThemeMode.system<\/code> olarak ayarlad\u0131\u011f\u0131n\u0131zda Flutter’\u0131n dahili olarak yapt\u0131\u011f\u0131 \u015feydir, ancak bazen \u00f6zel mant\u0131k i\u00e7in bu bilgiye do\u011frudan ihtiyac\u0131n\u0131z olabilir.<\/p>\n
final Brightness brightness = MediaQuery.of(context).platformBrightness;\nfinal bool isDarkMode = brightness == Brightness.dark;\n\n\/\/ isDarkMode de\u011ferine g\u00f6re UI'\u0131 dinamik olarak ayarlayabilirsiniz<\/code><\/pre>\n
En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
Flutter’da temalar\u0131 etkin bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi uygulamalar ve ipu\u00e7lar\u0131 \u015funlard\u0131r:<\/p>\n
1.  Tek Bir Tema Dosyas\u0131:<\/strong> Uygulaman\u0131z\u0131n t\u00fcm tema tan\u0131mlar\u0131n\u0131 (a\u00e7\u0131k ve koyu) tek bir dosyada (\u00f6rne\u011fin, lib\/config\/app_theme.dart<\/code>) tutun. Bu, temalar\u0131n y\u00f6netimini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.
\n2.  ColorScheme<\/code> Kullan\u0131m\u0131na \u00d6ncelik Verin:<\/strong> Material Design 3’\u00fcn getirdi\u011fi ColorScheme<\/code>‘i kullanarak renk paletinizi tan\u0131mlay\u0131n. Bu, daha tutarl\u0131 ve s\u00fcrd\u00fcr\u00fclebilir bir renk y\u00f6netimi sa\u011flar ve koyu mod deste\u011fini kolayla\u015ft\u0131r\u0131r.
\n3.  ThemeExtension<\/code> ile \u00d6l\u00e7eklenebilirlik:<\/strong> ThemeData<\/code>‘da do\u011frudan bulunmayan \u00f6zel tasar\u0131m belirte\u00e7leriniz varsa (\u00f6rne\u011fin, markan\u0131za \u00f6zg\u00fc \u00f6zel g\u00f6lge stilleri, ekstra renkler), ThemeExtension<\/code> kullanarak teman\u0131z\u0131 geni\u015fletin. Bu, teman\u0131z\u0131 temiz ve y\u00f6netilebilir tutar.
\n4.  copyWith<\/code> ile \u0130nce Ayar:<\/strong> Global temay\u0131 temel alarak belirli bir widget veya alt a\u011fa\u00e7 i\u00e7in k\u00fc\u00e7\u00fck de\u011fi\u015fiklikler yapman\u0131z gerekti\u011finde Theme.of(context).copyWith()<\/code> metodunu kullan\u0131n. Bu, kod tekrar\u0131n\u0131 \u00f6nler ve sadece gerekli \u00f6zellikleri ge\u00e7ersiz k\u0131lman\u0131za olanak tan\u0131r.
\n5.  const<\/code> Kullan\u0131m\u0131:<\/strong> ThemeData<\/code> nesnelerinizi ve i\u00e7indeki \u00e7o\u011fu TextStyle<\/code>, AppBarTheme<\/code> vb. tan\u0131mlar\u0131n\u0131z\u0131 const<\/code> anahtar kelimesiyle olu\u015fturmaya \u00e7al\u0131\u015f\u0131n. Bu, Flutter’\u0131n UI a\u011fac\u0131n\u0131 yeniden in\u015fa etme performans\u0131n\u0131 optimize etmesine yard\u0131mc\u0131 olur.
\n6.  Anlamsal Adland\u0131rma:<\/strong> Renklerinizi ve metin stillerinizi adland\u0131r\u0131rken anlamsal adland\u0131rma kullan\u0131n (\u00f6rne\u011fin, primaryColor<\/code>, errorColor<\/code> yerine brandPrimary<\/code>, alertDanger<\/code>). Bu, renklerin ama\u00e7lar\u0131n\u0131 daha net hale getirir.
\n7.  Duyarl\u0131 Temalar:<\/strong> MediaQuery<\/code> kullanarak ekran boyutuna veya di\u011fer cihaz \u00f6zelliklerine g\u00f6re tema \u00f6zelliklerini dinamik olarak ayarlamay\u0131 d\u00fc\u015f\u00fcnebilirsiniz, ancak bu genellikle daha karma\u015f\u0131k tasar\u0131m sistemlerinde gereklidir.
\n8.  Test Edilebilirlik:<\/strong> Temalar\u0131n\u0131z\u0131n farkl\u0131 platformlarda ve cihazlarda nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc d\u00fczenli olarak test edin. \u00d6zellikle koyu mod ve eri\u015filebilirlik (y\u00fcksek kontrast) ayarlar\u0131yla uyumlulu\u011fu kontrol edin.
\n9.  Tema Ge\u00e7i\u015f Animasyonlar\u0131:<\/strong> ThemeData.lerp<\/code> metodu, temalar aras\u0131nda yumu\u015fak ge\u00e7i\u015fler sa\u011flamak i\u00e7in \u00f6nemlidir. ThemeExtension<\/code> kullan\u0131yorsan\u0131z, kendi lerp<\/code> metodunuzu do\u011fru bir \u015fekilde uygulad\u0131\u011f\u0131n\u0131zdan emin olun.<\/p>\n
Sonu\u00e7<\/h3>\n
Flutter’\u0131n tema sistemi, uygulamalar\u0131n\u0131z\u0131n g\u00f6rsel kimli\u011fini tutarl\u0131, esnek ve verimli bir \u015fekilde y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 setidir. ThemeData<\/code> s\u0131n\u0131f\u0131, ColorScheme<\/code> tabanl\u0131 renk y\u00f6netimi, zengin tipografi se\u00e7enekleri ve widget’a \u00f6zel tema tan\u0131mlar\u0131yla, geli\u015ftiricilere uygulaman\u0131n her y\u00f6n\u00fcn\u00fc \u00f6zelle\u015ftirme yetene\u011fi sunar. Theme<\/code> widget’\u0131 ile yerel ge\u00e7ersiz k\u0131lmalar ve ThemeExtension<\/code> ile teman\u0131n geni\u015fletilebilirli\u011fi, karma\u015f\u0131k tasar\u0131m sistemlerini bile kolayca y\u00f6netmenize olanak tan\u0131r.<\/p>\n
Koyu mod deste\u011fi gibi modern \u00f6zelliklerin kolay entegrasyonu ve Theme.of(context)<\/code> arac\u0131l\u0131\u011f\u0131yla temaya kolay eri\u015fim, Flutter’\u0131 g\u00f6rsel olarak \u00e7ekici ve kullan\u0131c\u0131 dostu uygulamalar geli\u015ftirmek i\u00e7in ideal bir platform haline getirir. Temalar\u0131 do\u011fru bir \u015fekilde kullanarak, sadece uygulaman\u0131z\u0131n esteti\u011fini geli\u015ftirmekle kalmaz, ayn\u0131 zamanda geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r ve kullan\u0131c\u0131lar\u0131n\u0131za daha iyi bir deneyim sunars\u0131n\u0131z. Uygulaman\u0131z\u0131n \u00f6l\u00e7e\u011fi ne olursa olsun, iyi planlanm\u0131\u015f ve uygulanm\u0131\u015f bir tema sistemi, ba\u015far\u0131l\u0131 bir Flutter uygulamas\u0131n\u0131n temel ta\u015flar\u0131ndan biridir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Flutter’da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber\nFlutter, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirmek i\u00e7in Google taraf\u0131ndan geli\u015ftirilmi\u015f a\u00e7\u0131k","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1492],"tags":[],"class_list":{"0":"post-30796","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-flutter","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nFlutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"Flutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber Flutter, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirmek i\u00e7in Google taraf\u0131ndan geli\u015ftirilmi\u015f a\u00e7\u0131k\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-02T03:40:59+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Flutter’da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-02T03:40:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/\"},\"wordCount\":2395,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Flutter\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/\",\"name\":\"Flutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-02T03:40:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter’da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Flutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber","og_description":"Flutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber Flutter, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) geli\u015ftirmek i\u00e7in Google taraf\u0131ndan geli\u015ftirilmi\u015f a\u00e7\u0131k","og_url":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-02T03:40:59+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Flutter’da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-02T03:40:59+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/"},"wordCount":2395,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Flutter"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/","name":"Flutter'da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-02T03:40:59+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/flutterda-temalari-kullanma-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Flutter’da Temalar\u0131 Kullanma: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30796"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30796\/revisions"}],"predecessor-version":[{"id":30797,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30796\/revisions\/30797"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}