Flutter’da Cupertino Widgetlar

Yunus Emre Eraslan
Flutter Students Club
4 min readFeb 28, 2022

Herkese merhaba ben Yunus Emre, bugün sizlere Flutter ‘da Cupertino widgetlara bakacağız. Material tasarımda kullanığımız bazı widgetların, Cupertino widget karşılığına bakacağız ve projelerimizde nasıl kullanabiliriz buna bakacağız. Hazırsanız başlayalım…

Aslında her ne kadar android kullanıcısı olsam da iOS platformunun tasarım dilini çok sevmişimdir. Sade, verimli ve klasik. Siz de bu tasarım dilini kendi Flutter uygulamalarınızda kullanabilirsiniz. Konumuza geçmeden önce dikkatimi sizlere bahsetmek istediğim konuyla alakalı ilgimi çeken bir detayı sizinle paylaşmak istiyorum.

Cupertino ismi aslında bir şehir ismi. Ayrıntı verecek olursak Cupertino, ABD’nin Kaliforniya eyaletinde bir şehirdir ve Silikon Vadisinin’de kalbi olduğu söylenir . Aynı zamanda Cupertino şehri Apple genel merkezine ev sahipliği yapmaktadır ve Apple Park burada bulunmaktadır. Cupertino isminin aslında Apple markasıyla ne kadar özleştiğini anlamışsınızdır.

Cupertino (iOS tarzı) widget ne demek?

Flutter’daki Cupertino, mevcut iOS tasarım dilini uygulayan bir dizi widget’tır. Daha fazla ayrıntı verecek olursak Flutter’ın cross platform uygulamalar geliştirmemize olanak sağladığını biliyoruz ve genel olarak Material Design tasarım anlayışını kullanıyoruz. Flutter ekibi cross platform uygulama geliştirilmesi için farklı platformların tasarım anlayışlarını göz önünde bulundurdular ve iOS tasarım dili için uygun olan Cupertino widget’ları geliştirdiler. Elbette bu Cupertino widget’ların sadece iOS cihazlar ile kullanılabileceğiniz anlamına gelmiyor yalnızca platformun tasarım anlayışına daha yakın. Konu hakkında bu videoyu izlemenizi öneririm. O halde hazırsanız widgetlarımızdan bahsetmeye başlayalım.

İşte Hoşunuza Gidebilecek Bazı Cupertino Widgetlar:

  • CupertinoActionSheet: iOS tarzında bir aksiyon butonu menüsüdür. Yaptığı iş bakımından Floating Action Button’a benzetebiliriz. Kullanıcıya iki veya daha fazla seçenek sunmak istediğimizde bu widget’ı kullanabiliriz.

Kod:

  • CupertinoActivityIndicator: Activity Indicator kullanımı oldukça önemlidir. Arka planda bir işlem yaptığımızda, kullanıcıya işlemlerin yapıldığı ile ilgili bir durumu belirtmek için kullanmalıyız.

Kod:

  • CupertinoAlertDialog: Kullanıcıya bir uyarı, bu uyarı için bir bilgilendirme ve kullanıcıdan onay almamız gereken durumlarda bu widget’ı kullanabiliriz.

Kod:

  • CupertinoButton: İsteğe bağlı olarak arka planı olabilen, dokunulduğunda soluklaşan ya da sabit bir şekilde durup hiçbir tıklanma hissiyatı vermeyen iOS tarzında bir butondur.

Kod:

  • CupertinoSlider: Değerleri bir silder kullanarak yani bir çubuk üzerinde değeri sağa ve sola kayırmalar ile belirleyebildiğimiz widget’tır.

Kod:

  • CupertinoPicker: Bir menü açıp bu kaydırabilir menü üzerinden istediğimiz tercihi yapmamızı sağlayan widget.

Kod:

  • CupertinoSwitch: Açılıp kapanacak bir seçenek için kullanabileceğimiz iOS tarzında bir widget.

Kod:

  • CupertinoTabBar: Material Design’da BottomNavigationBar widget’ı ile aynı işleve sahip diyebilieceğimiz uygulamanın altında bulunan ve seçim yapmamızı sağlayan bir widget’dır.

Kod:

  • CupertinoSearchTextField: Liste veya içerik içerisinde aramak istediğimiz ifadeyi yazdığımız ve önceden yazılı bir ifade koyabildiğimiz widget’dır.

Kod:

Evet birlikte Cupertino widgetlardan bazılarını görmüş olduk umarım bu noktaya kadar eğlenmiş ve sıkılmamışsınızdır. Eğer Cupertino widgetlar ile ilgili daha fazla bilgi almak ve tüm Cupertino widgetları görmek istiyorsanız https://docs.flutter.dev/development/ui/widgets/cupertino adresine bakabilirsiniz.

Yazımız burada sonra eriyor… Umarım keyif almışsınızdır. Okuduğunuz için teşekkür ederim.

--

--