{"id":28942,"date":"2025-09-05T13:00:27","date_gmt":"2025-09-05T10:00:27","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/flutter-ozel-coklu-secim-diyalog-paketi-nasil-olusturulur\/"},"modified":"2025-09-05T13:00:27","modified_gmt":"2025-09-05T10:00:27","slug":"flutter-ozel-coklu-secim-diyalog-paketi-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/flutter-ozel-coklu-secim-diyalog-paketi-nasil-olusturulur\/","title":{"rendered":"Flutter \u00d6zel \u00c7oklu Se\u00e7im Diyalog Paketi Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"

Flutter \u00d6zel \u00c7oklu Se\u00e7im Diyalog Paketi Nas\u0131l Olu\u015fturulur?<\/p>\n

Flutter uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00f6zelle\u015ftirilebilir \u00e7oklu se\u00e7im diyaloglar\u0131 olu\u015fturman\u0131n ne kadar \u00f6nemli oldu\u011funu hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc? Bu makalede, s\u0131f\u0131rdan bir Flutter \u00f6zel \u00e7oklu se\u00e7im diyalog paketi geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. \u00d6\u011frenece\u011finiz teknikler, performans odakl\u0131, temiz ve tekrar kullan\u0131labilir kod yazman\u0131za yard\u0131mc\u0131 olacak. Haz\u0131rsan\u0131z, ba\u015flayal\u0131m!<\/p>\n

Temel Kavramlar: Flutter Widget’lar\u0131 ve State Management<\/h2>\n

Flutter uygulamalar\u0131, widget’lardan olu\u015fur. Bir widget, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn bir par\u00e7as\u0131d\u0131r ve her widget’\u0131n kendi \u00f6zellikleri ve davran\u0131\u015flar\u0131 vard\u0131r. \u00d6rne\u011fin, bir Text<\/code> widget’\u0131 metin g\u00f6r\u00fcnt\u00fclerken, bir Button<\/code> widget’\u0131 t\u0131klama olaylar\u0131n\u0131 i\u015fler. \u00c7oklu se\u00e7im diyalogumuzu olu\u015fturmak i\u00e7in \u00e7e\u015fitli widget’lar\u0131 bir araya getirece\u011fiz. Bunun yan\u0131nda, uygulama durumunu y\u00f6netmek i\u00e7in bir state management \u00e7\u00f6z\u00fcm\u00fcne ihtiyac\u0131m\u0131z var. Bu makalede, basitlik amac\u0131yla setState()<\/code> y\u00f6ntemini kullanaca\u011f\u0131z, ancak daha b\u00fcy\u00fck projeler i\u00e7in Provider, Riverpod veya BLoC gibi daha geli\u015fmi\u015f \u00e7\u00f6z\u00fcmler tercih edilebilir. Flutter’da state management, kullan\u0131c\u0131 etkile\u015fimlerine tepki olarak widget’lar\u0131n durumunu g\u00fcncellemeyi sa\u011flar. \u00d6rne\u011fin, kullan\u0131c\u0131 bir \u00f6\u011feyi se\u00e7ti\u011finde, se\u00e7ilen \u00f6\u011feler listesini g\u00fcncellememiz gerekir.<\/p>\n

Ayr\u0131ca, paket olu\u015fturman\u0131n temel ad\u0131mlar\u0131na a\u015fina olmal\u0131y\u0131z. Bu, pubspec.yaml<\/code> dosyas\u0131n\u0131 do\u011fru \u015fekilde yap\u0131land\u0131rmay\u0131 ve paketin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmeyi i\u00e7erir. Flutter’\u0131n g\u00fc\u00e7l\u00fc paket y\u00f6netim sistemi olan pub<\/code>, bu s\u00fcre\u00e7te bize yard\u0131mc\u0131 olacakt\u0131r. Daha fazla bilgi i\u00e7in Fatih Soysal’\u0131n sitesini<\/a> ziyaret edebilirsiniz.<\/p>\n

Ad\u0131m Ad\u0131m Uygulama: \u00c7oklu Se\u00e7im Diyalogunun Yap\u0131s\u0131<\/h2>\n

\u00d6ncelikle, diyalogumuzun temel yap\u0131s\u0131n\u0131 tasarlayal\u0131m. Bu, bir liste g\u00f6r\u00fcn\u00fcm\u00fc (ListView), her \u00f6\u011fe i\u00e7in bir onay kutusu ve bir onay\/iptal d\u00fc\u011fmesi i\u00e7erecektir. Her \u00f6\u011fenin se\u00e7ili olup olmad\u0131\u011f\u0131n\u0131 takip etmek i\u00e7in bir bool<\/code> de\u011fi\u015fkeni kullanaca\u011f\u0131z. Kullan\u0131c\u0131 bir \u00f6\u011feyi se\u00e7ti\u011finde, bu de\u011fi\u015fkeni g\u00fcncelleyece\u011fiz ve diyalog g\u00fcncellenecek.<\/p>\n

1. Ad\u0131m: MultiSelectDialog<\/code> Widget’\u0131n\u0131 Olu\u015fturma<\/h3>\n
import 'package:flutter\/material.dart';\n\nclass MultiSelectDialog extends StatefulWidget {\n  final List items;\n  final Function(List) onConfirm;\n\n  const MultiSelectDialog({Key? key, required this.items, required this.onConfirm}) : super(key: key);\n\n  @override\n  State createState() => _MultiSelectDialogState();\n}\n\nclass _MultiSelectDialogState extends State {\n  final List _selected = [];\n\n  @override\n  void initState() {\n    super.initState();\n    _selected.addAll(List.generate(widget.items.length, (index) => false));\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return AlertDialog(\n      title: const Text('\u00c7oklu Se\u00e7im'),\n      content: SizedBox(\n        height: 200, \/\/ Diyalog y\u00fcksekli\u011fi\n        child: ListView.builder(\n          itemCount: widget.items.length,\n          itemBuilder: (context, index) {\n            return CheckboxListTile(\n              title: Text(widget.items[index]),\n              value: _selected[index],\n              onChanged: (value) {\n                setState(() {\n                  _selected[index] = value!;\n                });\n              },\n            );\n          },\n        ),\n      ),\n      actions: [\n        TextButton(\n          onPressed: () {\n            Navigator.of(context).pop();\n          },\n          child: const Text('\u0130ptal'),\n        ),\n        TextButton(\n          onPressed: () {\n            List selectedItems = [];\n            for (int i = 0; i < _selected.length; i++) {\n              if (_selected[i]) {\n                selectedItems.add(widget.items[i]);\n              }\n            }\n            widget.onConfirm(selectedItems);\n            Navigator.of(context).pop();\n          },\n          child: const Text('Onayla'),\n        ),\n      ],\n    );\n  }\n}<\/pre>\n
<\/code><\/p>\n
2. Ad\u0131m: Diyalo\u011fu \u00c7a\u011f\u0131rma<\/h3>\n
showDialog(\n  context: context,\n  builder: (BuildContext context) {\n    return MultiSelectDialog(\n      items: ['Elma', 'Armut', 'Muz', 'Portakal'],\n      onConfirm: (selectedItems) {\n        \/\/ Se\u00e7ilen \u00f6\u011felerle ilgili i\u015flemler burada yap\u0131l\u0131r.\n        print('Se\u00e7ilen \u00f6\u011feler: $selectedItems');\n      },\n    );\n  },\n);<\/pre>\n
<\/code><\/p>\n
\u0130leri D\u00fczey \u00d6zellikler: \u00d6zelle\u015ftirme ve Performans Optimizasyonu<\/h2>\n
Temel diyalogumuz haz\u0131r olsa da,  ger\u00e7ek d\u00fcnya senaryolar\u0131nda daha fazla \u00f6zelle\u015ftirmeye ihtiya\u00e7 duyabiliriz.  \u00d6rne\u011fin,  \u00f6\u011felerin g\u00f6r\u00fcnt\u00fclenme bi\u00e7imini \u00f6zelle\u015ftirebilir,  arama \u00f6zelli\u011fi ekleyebilir veya daha b\u00fcy\u00fck veri k\u00fcmeleri i\u00e7in performans\u0131 iyile\u015ftirebiliriz.<\/p>\n
1. \u00d6zelle\u015ftirilebilir G\u00f6r\u00fcn\u00fcm<\/h3>\n
Diyalogumuzun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc,  ThemeData<\/code> kullanarak veya kendi \u00f6zel stilleri tan\u0131mlayarak \u00f6zelle\u015ftirebiliriz.  \u00d6rne\u011fin,  \u00f6\u011felerin yaz\u0131 tipini, rengini ve boyutunu de\u011fi\u015ftirebiliriz.  Ayr\u0131ca,  kendi \u00f6zel widget'lar\u0131m\u0131z\u0131 kullanarak daha karma\u015f\u0131k tasar\u0131mlar olu\u015fturabiliriz.  Bu \u00f6zelle\u015ftirmeler,  uygulaman\u0131z\u0131n genel temas\u0131na uyum sa\u011flaman\u0131za olanak tan\u0131r.<\/p>\n
2. Arama \u00d6zelli\u011fi<\/h3>\n
B\u00fcy\u00fck bir \u00f6\u011fe listesiyle \u00e7al\u0131\u015f\u0131yorsan\u0131z,  kullan\u0131c\u0131n\u0131n istedi\u011fi \u00f6\u011feyi bulmas\u0131n\u0131 kolayla\u015ft\u0131rmak i\u00e7in bir arama \u00f6zelli\u011fi eklemek faydal\u0131 olacakt\u0131r.  Bu, bir TextField<\/code> widget'\u0131 ve bir filtreleme mekanizmas\u0131 kullanarak yap\u0131labilir.  Kullan\u0131c\u0131 arama kutusuna bir metin girdi\u011finde,  liste yaln\u0131zca arama kriterlerini kar\u015f\u0131layan \u00f6\u011feleri g\u00f6sterecek \u015fekilde filtrelenir.  Bu \u00f6zellik kullan\u0131c\u0131 deneyimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n
3. Performans Optimizasyonu<\/h3>\n
\u00c7ok say\u0131da \u00f6\u011fe i\u00e7eren bir listeyle \u00e7al\u0131\u015f\u0131rken,  ListView.builder<\/code> yerine ListView.custom<\/code> kullanarak performans\u0131 optimize edebiliriz.  ListView.custom<\/code>,  her \u00f6\u011feyi gerekti\u011finde olu\u015fturmam\u0131za ve gereksiz widget'lar\u0131 olu\u015fturmaktan ka\u00e7\u0131nmam\u0131za olanak tan\u0131r.  Ayr\u0131ca,  scrollController<\/code> kullanarak kayd\u0131rma olaylar\u0131n\u0131 optimize edebilir ve  gereksiz yeniden \u00e7izimleri \u00f6nleyebiliriz.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131: Vaka Analizleri<\/h2>\n
Bu \u00f6zel \u00e7oklu se\u00e7im diyalog paketini \u00e7e\u015fitli senaryolarda kullanabiliriz.  \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n birden fazla \u00fcr\u00fcn se\u00e7mesine olanak tan\u0131yabiliriz.  Bir proje y\u00f6netim uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n bir g\u00f6reve birden fazla ki\u015fi atamas\u0131na izin verebiliriz.  Bir anket uygulamas\u0131nda ise, kullan\u0131c\u0131lar\u0131n birden fazla yan\u0131t se\u00e7mesine olanak tan\u0131yabiliriz.<\/p>\n
Bu \u00f6rnekler, paketin esnekli\u011fini ve \u00e7e\u015fitli uygulamalarda kullan\u0131m\u0131n\u0131 g\u00f6stermektedir.  \u00d6zelle\u015ftirme se\u00e7enekleri sayesinde, diyalo\u011fu her \u00f6zel gereksinime uyacak \u015fekilde uyarlayabiliriz.  Performans optimizasyonlar\u0131 ise, b\u00fcy\u00fck veri k\u00fcmeleriyle bile sorunsuz bir kullan\u0131c\u0131 deneyimi sunmam\u0131z\u0131 sa\u011flar. <\/p>\n
Flutter \u00c7oklu Se\u00e7im Diyalog Paketi: \u00d6\u011frenme Yol Haritas\u0131<\/h2>\n
Bu rehberde verilen bilgileri kullanarak Flutter \u00e7oklu se\u00e7im diyalog paketinizi olu\u015fturma yolculu\u011funuzu planlayabilirsiniz.  \u0130\u015fte seviyelere g\u00f6re bir \u00f6\u011frenme yol haritas\u0131:<\/p>\n
Yeni Ba\u015flayan:<\/h3>\n