{"id":252,"date":"2025-05-10T17:41:46","date_gmt":"2025-05-10T14:41:46","guid":{"rendered":"https:\/\/www.webmobkey.com\/blog\/?p=252"},"modified":"2025-11-16T10:21:46","modified_gmt":"2025-11-16T10:21:46","slug":"getx-ile-flutter-uygulamasi-gelistirmek-tema-dil-ve-sayac-yonetimi","status":"publish","type":"post","link":"https:\/\/www.webmobdesign.com\/blog\/tr\/getx-ile-flutter-uygulamasi-gelistirmek-tema-dil-ve-sayac-yonetimi\/","title":{"rendered":"GetX ile Flutter Uygulamas\u0131 Geli\u015ftirmek: Tema, Dil ve Saya\u00e7 Y\u00f6netimi"},"content":{"rendered":"\n<p id=\"b935\">Flutter d\u00fcnyas\u0131nda performansl\u0131, sade ve y\u00f6netilebilir bir mimari olu\u015fturmak istiyorsan\u0131z,&nbsp;<strong>GetX<\/strong>&nbsp;harika bir tercih! Bu yaz\u0131da, GetX ile nas\u0131l&nbsp;<strong>tema<\/strong>,&nbsp;<strong>dil<\/strong>&nbsp;ve&nbsp;<strong>durum y\u00f6netimi<\/strong>&nbsp;yap\u0131labilece\u011fini i\u00e7eren \u00f6rnek bir projeyi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"f8a7\">\ud83c\udfd7\ufe0f Proje Genel Yap\u0131s\u0131<\/h4>\n\n\n\n<p id=\"9830\">Projemizde \u015fu \u00f6zellikler yer al\u0131yor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tema (Dark\/Light) de\u011fi\u015ftirme<\/li>\n\n\n\n<li>Dil (TR\/EN) de\u011fi\u015ftirme<\/li>\n\n\n\n<li>Saya\u00e7 kontrol\u00fc (her sayfada eri\u015filebilir)<\/li>\n\n\n\n<li>Drawer men\u00fc ile dinamik sayfa y\u00f6nlendirmesi<\/li>\n\n\n\n<li>GetX\u2019in reactive state y\u00f6netimi (.obs)<\/li>\n\n\n\n<li>GetX\u2019in routing ve localization deste\u011fi<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"7af6\"><strong>Tam Kod<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n import 'package:flutter\/material.dart';\nimport 'package:get\/get.dart';\n\nvoid main() {\n  \/\/ Controller'lar\u0131 Uygulama Ba\u015f\u0131nda Y\u00fckle\n  Get.put(AppController());\n  Get.put(CounterController());\n\n  runApp(MyApp());\n}\n\n\/\/ \ud83c\udf19 Tema ve Dil Kontrol\u00fc\nclass AppController extends GetxController {\n  var isDark = false.obs;\n  var locale = const Locale('en', 'US').obs;\n\n  void toggleTheme() {\n    isDark.value = !isDark.value;\n    Get.changeThemeMode(isDark.value ? ThemeMode.dark : ThemeMode.light);\n  }\n\n  void changeLang(String langCode) {\n    locale.value =\n    langCode == 'tr' ? const Locale('tr', 'TR') : const Locale('en', 'US');\n    Get.updateLocale(locale.value);\n  }\n}\n\n\/\/ \ud83d\udd22 Saya\u00e7\nclass CounterController extends GetxController {\n  var count = 0.obs;\n  void increment() =&gt; count++;\n}\n\n\/\/ \ud83c\udf0d Dil Deste\u011fi\nclass MyTranslations extends Translations {\n  @override\n  Map&amp;lt;String, Map&amp;lt;String, String&gt;&gt; get keys =&gt; {\n    'en_US': {\n      'home': 'Home',\n      'page': 'Page',\n      'change_theme': 'Change Theme',\n      'change_lang': 'Change Language',\n      'back': 'Back',\n      'increase': 'Increase',\n    },\n    'tr_TR': {\n      'home': 'Ana Sayfa',\n      'page': 'Sayfa',\n      'change_theme': 'Temay\u0131 De\u011fi\u015ftir',\n      'change_lang': 'Dili De\u011fi\u015ftir',\n      'back': 'Geri',\n      'increase': 'Artt\u0131r',\n    },\n  };\n}\n\n\/\/ \ud83d\ude80 Uygulama\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return GetMaterialApp(\n      translations: MyTranslations(),\n      locale: const Locale('en', 'US'),\n      fallbackLocale: const Locale('en', 'US'),\n      title: 'GetX Layout App',\n      theme: ThemeData.light(),\n      darkTheme: ThemeData.dark(),\n      themeMode: ThemeMode.system,\n      initialRoute: '\/',\n      getPages: &#x5B;\n        GetPage(name: '\/', page: () =&gt; LayoutPage(child: HomePage())),\n        for (int i = 1; i &amp;lt;= 5; i++)\n          GetPage(name: '\/page$i', page: () =&gt; LayoutPage(child: PageX(i))),\n      ],\n    );\n  }\n}\n\n\/\/ \ud83e\uddf1 LAYOUT SAYFASI\nclass LayoutPage extends StatelessWidget {\n  final Widget child;\n\n  LayoutPage({required this.child});\n\n  @override\n  Widget build(BuildContext context) {\n    final AppController appController = Get.find();\n\n    return Obx(\n          () =&gt; Scaffold(\n        appBar: AppBar(\n          title: Text('GetX Layout'),\n          actions: &#x5B;\n            IconButton(\n              icon: Icon(Icons.language),\n              onPressed:\n                  () =&gt; appController.changeLang(\n                appController.locale.value.languageCode == 'en'\n                    ? 'tr'\n                    : 'en',\n              ),\n            ),\n            IconButton(\n              icon: Icon(\n                appController.isDark.value ? Icons.light_mode : Icons.dark_mode,\n              ),\n              onPressed: appController.toggleTheme,\n            ),\n          ],\n        ),\n        drawer: Drawer(\n          child: ListView(\n            children: &#x5B;\n              DrawerHeader(child: Text('Menu', style: TextStyle(fontSize: 24))),\n              ListTile(title: Text('home'.tr), onTap: () =&gt; Get.offNamed('\/')),\n              for (int i = 1; i &amp;lt;= 5; i++)\n                ListTile(\n                  title: Text('${'page'.tr} $i'),\n                  onTap: () =&gt; Get.offNamed('\/page$i'),\n                ),\n            ],\n          ),\n        ),\n        body: child,\n      ),\n    );\n  }\n}\n\n\/\/ \ud83c\udfe0 Ana Sayfa\nclass HomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Center(child: Text('home'.tr, style: TextStyle(fontSize: 32)));\n  }\n}\n\n\/\/ \ud83d\udcc4 Sayfalar\nclass PageX extends StatelessWidget {\n  final int page;\n  final CounterController counterController = Get.find();\n  PageX(this.page);\n\n  @override\n  Widget build(BuildContext context) {\n    return Center(\n      child: Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        children: &#x5B;\n          Obx(\n                () =&gt; Text(\n              'Sayfa $page - Saya\u00e7: ${counterController.count.value}',\n              style: TextStyle(fontSize: 24),\n            ),\n          ),\n          const SizedBox(height: 10),\n          ElevatedButton(\n            onPressed: counterController.increment,\n            child: Text('increase'.tr),\n          ),\n          const SizedBox(height: 10),\n          ElevatedButton(onPressed: () =&gt; Get.back(), child: Text('back'.tr)),\n        ],\n      ),\n    );\n  }\n}\n<\/pre><\/div>\n\n\n<p id=\"8ec8\">\u0130ki adet controller\u2019\u0131m\u0131z var:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"e351\">AppController<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"e014\">: Tema ve Dil Y\u00f6netimi<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nvar isDark = false.obs;\nvar locale = const Locale('en', 'US').obs;\n<\/pre><\/div>\n\n\n<p id=\"f6bb\">GetX\u2019in .obs yap\u0131s\u0131 sayesinde de\u011fer de\u011fi\u015fti\u011finde UI otomatik olarak g\u00fcncellenir.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>toggleTheme() ile temay\u0131 de\u011fi\u015ftiriyoruz.<\/li>\n\n\n\n<li>changeLang() ile locale g\u00fcncelleniyor ve uygulama dili de\u011fi\u015fiyor.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1a2f\">CounterController<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"acac\">Saya\u00e7<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nvar count = 0.obs;\nvoid increment() =&gt; count++;\n<\/pre><\/div>\n\n\n<p id=\"bf58\">Sayfalarda saya\u00e7 butonuna bast\u0131\u011f\u0131n\u0131zda t\u00fcm sayfalarda bu de\u011fer g\u00fcncellenmi\u015f olarak g\u00f6r\u00fcn\u00fcr. Global state y\u00f6netimi tam da budur!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ef78\">\ud83c\udf0d \u00c7ok Dilli Destek (Localization)<\/h4>\n\n\n\n<p id=\"eaeb\">MyTranslations s\u0131n\u0131f\u0131 ile iki dil aras\u0131nda ge\u00e7i\u015f sa\u011fl\u0131yoruz:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n'tr_TR': {\n  'home': 'Ana Sayfa',\n  'increase': 'Artt\u0131r',\n  ...\n},\n'en_US': {\n  'home': 'Home',\n  'increase': 'Increase',\n  ...\n},\n<\/pre><\/div>\n\n\n<p id=\"78a6\">Kullan\u0131c\u0131, AppBar\u2019daki \ud83c\udf10 ikonuna t\u0131klayarak an\u0131nda dili de\u011fi\u015ftirebilir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"50a7\">\ud83e\uddf1 LayoutPage: Uygulama \u0130skele Yap\u0131s\u0131<\/h4>\n\n\n\n<p id=\"b925\">Uygulaman\u0131n ana iskeleti olan LayoutPage her sayfan\u0131n etraf\u0131na sarmalan\u0131yor. AppBar, Drawer ve sayfa g\u00f6vdesi burada tan\u0131ml\u0131.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nchild: LayoutPage(child: HomePage())\n<\/pre><\/div>\n\n\n<p id=\"9b38\">Bu yap\u0131 sayesinde hem g\u00f6r\u00fcn\u00fcm tutarl\u0131l\u0131\u011f\u0131 sa\u011flan\u0131yor hem de mod\u00fcler yap\u0131 korunmu\u015f oluyor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"d8be\">\ud83d\udcc4 Dinamik Sayfalar ve Navigation<\/h4>\n\n\n\n<p id=\"12cc\">GetPage listesi ile \/page1, \/page2 \u2026 \/page5 rotalar\u0131 dinamik \u015fekilde olu\u015fturuluyor:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nGetPage(name: '\/page$i', page: () =&gt; LayoutPage(child: PageX(i)))\n<\/pre><\/div>\n\n\n<p id=\"e4e3\">Drawer men\u00fcs\u00fcnden bu sayfalara kolayca ge\u00e7i\u015f yap\u0131labiliyor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"8581\">\ud83c\udfa8 Tema De\u011fi\u015fikli\u011fi<\/h4>\n\n\n\n<p id=\"84b4\">AppBar\u2019da tema ikonuna t\u0131klanarak an\u0131nda ThemeMode de\u011fi\u015fiyor. Bunun i\u00e7in:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nGet.changeThemeMode(isDark.value ? ThemeMode.dark : ThemeMode.light);\n<\/pre><\/div>\n\n\n<p id=\"cb33\">Obx() widget\u2019\u0131 sayesinde, de\u011fer de\u011fi\u015fti\u011fi anda UI tekrar \u00e7iziliyor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"9137\">\ud83d\udcf1 Sayfa \u00d6rne\u011fi: PageX<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nObx(() =&gt; Text('Sayfa $page - Saya\u00e7: ${counterController.count.value}'))\n<\/pre><\/div>\n\n\n<p id=\"3bbe\">Her sayfa, saya\u00e7 de\u011ferini g\u00f6sterir. Butona t\u0131klad\u0131\u011f\u0131n\u0131zda t\u00fcm sayfalarda de\u011fer g\u00fcncellenir \u00e7\u00fcnk\u00fc CounterController tek bir instance olarak GetX ile payla\u015f\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"5751\">\ud83d\udd1a Sonu\u00e7<\/h4>\n\n\n\n<p id=\"c333\">Bu \u00f6rnekle birlikte GetX\u2019in g\u00fc\u00e7l\u00fc y\u00f6nlerini \u015fu \u015fekilde \u00f6zetleyebiliriz:<\/p>\n\n\n\n<p id=\"91dd\">\u2705 Minimal ve sade kod<\/p>\n\n\n\n<p id=\"649a\">\u2705 Kolay state y\u00f6netimi<\/p>\n\n\n\n<p id=\"c6e2\">\u2705 Reactive yap\u0131 ile otomatik UI g\u00fcncellenmesi<\/p>\n\n\n\n<p id=\"490b\">\u2705 Tema ve dil gibi global ayarlar\u0131n y\u00f6netimi<\/p>\n\n\n\n<p id=\"8b15\">\u2705 Route y\u00f6netiminin basitle\u015ftirilmesi<\/p>\n\n\n\n<p id=\"d2bd\">E\u011fer Flutter\u2019da \u201cbir t\u0131k daha fazla kontrol ama \u00e7ok daha az kod\u201d diyorsan\u0131z, GetX sizin i\u00e7in bi\u00e7ilmi\u015f kaftan. Bu \u00f6rne\u011fi kendi projelerinize entegre ederek olduk\u00e7a \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirebilirsiniz. \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter d\u00fcnyas\u0131nda performansl\u0131, sade ve y\u00f6netilebilir bir mimari olu\u015fturmak istiyorsan\u0131z,&nbsp;GetX&nbsp;harika bir tercih! Bu yaz\u0131da, GetX ile &hellip; <a title=\"GetX ile Flutter Uygulamas\u0131 Geli\u015ftirmek: Tema, Dil ve Saya\u00e7 Y\u00f6netimi\" class=\"hm-read-more\" href=\"https:\/\/www.webmobdesign.com\/blog\/tr\/getx-ile-flutter-uygulamasi-gelistirmek-tema-dil-ve-sayac-yonetimi\/\"><span class=\"screen-reader-text\">GetX ile Flutter Uygulamas\u0131 Geli\u015ftirmek: Tema, Dil ve Saya\u00e7 Y\u00f6netimi<\/span>Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-252","post","type-post","status-publish","format-standard","hentry","category-mobil-tr"],"_links":{"self":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":1,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}