5.Gün — Temel Widgetlar — 1 (Text, Container, Padding,Column)
Merhabalar,
Bugün sizlerle birlikte araçları yavaştan incelemeye başlayacağız bu konu başlığımızı tamamen 4 tane başlıktan oluşacak, Bugün bir tanesine yavaştan girmeye başladım araçlar Bizim ön ara yüzümüzde geliştirdiğimiz olan süreçlerde görsel ve dinamik istedik bütün Hatalarımızı işlediğimiz görüntülediğiniz panel derimizde bize yardımcı olacak
Bugün ki inceleyeceğimiz widgetlarımız,
- Text,
- Container,
- Padding,
- Column
Tasarım oluştururken bizlere gerçekten hızlı sonuçlar veren bu yapılar uygulama geliştirken içeriklerin daha zengin bir kalite görünmesini sağlayacaklardır.
Her widget’in kendi kullanım alanı ve sağladığı ergonomiden kısa olsa bahsedicez
Text Widgetlar,
Genellikle herkes Text widgetlar
Bu araç kendi içerisinde 3 tane alt başlıkta incelenecek bir şekilde tasarlanmış bulunmakta,
Belirgin stil içermeyen alt Metin widget’larına uygulanacak metin stili.
Kullanım açısından Diğer Text Widgetlara oranlar esneklik ve kod yazımı bakımından yorucu esneklik açısından yorucu olduğunu söylemekte fayda var.
RichText widget’ı, birden çok farklı stil kullanan metni görüntüler. Görüntülenecek metin, her biri o alt ağaç için kullanılan ilişkili bir stile sahip olan TextSpan nesnelerinden oluşan bir ağaç kullanılarak açıklanır. Düzen kısıtlamalarına bağlı olarak metin birden çok satıra bölünebilir veya tümü aynı satırda görüntülenebilir.
Kullanım açısından birden fazla TextStyle ve String data barındırarak, birden fazla Text Widget kullanımının önüne geçerek bizleri projelerimizde gerçekten gereksiz kod kalabalığından kurtardığını söylebiliriz.
Tek stilli bir metin dizisi.RichText farkı tek başına bir değer temsil eder.Kendi başına daha özgün içerikler oluşturmamızı sağlarlar.
Basit bir yapıda Text Widget’larımızı görüntüleyelim.
Mavi kutu da belirtmiş olduğunuz DefaultTextStyle widget’in da Text Widget tanımlaması yaptıktan sonra, ekstra olarak bir stil tanımlamanız gerektiğini görüyoruz.Eğer bu tanımlamanın yapmadığınız da widget’ tarafından hata alacaksınız,
Tasarım stili girildiği anda otomatik olarak hatanız düzelecektir.Ve Yazı yapınızın tasarımına devam edebilirsiniz. Ama dediğimiz gibi bu süreçte birden fazla içerik girildiği için ister istemez yoğun projelerde zaman kaybı açısından düşünüldüğünde ve projenin içeriği açısından biraz yorucu olduğunu söylemekte fayda var.Bu süreç sizlerin kullanımda harcadığınız efor da etki ettiği sürece ister istemez bu aracı kullanmamaya doğru yöneteceksiniz.
Yeşil kutuda belirtmiş olduğumuz Text Widget yapısı yalın ve sade şekilde belirtilmiştir. Bu süreçte sadece eklemiz ve görüntüleme yapmamız gereken tek etken style : TextStyle() sınıfı olacaktır.
Gelelim en önemlisi ve uygulamaları da yoğun bir şekilde kullanım sağlamanızı istediğim. Ve ilerleyen süreçlerde projelerde de çok büyük bir esneklik ve rahatlık sağlayan araç Sarı Kutu da belirtiğimiz RichText karşımıza geliyor.
Yapısını incelemeye kalktığımızda birden fazla yazın metnini bir yerde tanımlamamız için TextSpan’dan yararlanıyoruz. Ve TextSpan içinde tekrarından bir children[] oluşturarak Sonuç olarak görüntülediğimiz, mücadele etmek istediğimiz Yazı yapısı kadar TextSpan oluşturmayı ihmal etmiyoruz.
RichText içinde belirlediğimiz birinci TextSpan diğer oluşturduğumuz TextSpan’ların TextStyle’ ina etki ederek tasarım olarak sadece diğer TextSpan’larda tekli değişiklikler yaparak hızlıda sonuç olabiliriz. Bunu da Kod öğrendiğimiz de görüntüleyebiliriz.
Sonuç olarak ⬇
Oluşturulması Beklenen DosyA Adıı :TextWidgetsDemo.dart
Kaynak Kod : https://carbon.now.sh/IKtVTEZ1RS1kKKTRVjn0
Sizlerden ricam kaynak kodunu inceleyerek, projenizi çalıştırmanızı, projenizde ki yazı yapılarının stil yapısını düzenlemeler yaparak, hızlı bir öğrenim sağlayacağına eminim.
Eğer ki aklınıza takılan bir süreç olursa tarafıma istediğiniz soruyu sorabilirsiniz…
Container
Yaygın boyama, konumlandırma ve boyutlandırma widget’larını birleştiren kullanışlı bir widget.
Bu yapının temel özelliklerinden bir tanesi içerisindeki belirlemiş olduğu araçların sınırlarını oluşturmasında yardımcı olur. Kullanım açısından pratik ve tasarım açısından da esnek bir yapıya sahip olan bu araç bizlerin tasarımdaki sınırlarımızı istediğimiz noktaya ulaştırmanız da yardımcı olduğuna emin olabilirsiniz. Basit bir yapıda düşünecek olursak geometrik yapıların materyal tasarımda daha verimli bir şekilde Görüntüle bilmesi için ideal araçlardan bir tanesi olduğunu söyleyebiliriz.
Aracımızı basit bir şekilde görüntü diyelim.
Aracımızı Görüntüleyelim.
Bu yapımızı daha da geliştirmek istesek, bu örnek, Container’ın birçok özelliğinin aynı anda nasıl kullanılacağını gösterir. Kısıtlamalar, yazı tipi boyutunun yanı sıra dikey olarak geniş boşluk payına uyacak şekilde ayarlanırken, üst öğeye sığması için yatay olarak genişler. Dolgu, içerik ve metin arasında boşluk olduğundan emin olmak için kullanılır. Renk kutuyu mavi yapar. Hizalama, çocuğun kutuda ortalanmasına neden olur. Son olarak, dönüşüm, etkiyi tamamlamak için tüm mekanizmaya hafif bir rotasyon uygular.
ve Sonuç alalım…
ve ekstra olarak , buraya da bakabilirsiniz.
Padding
Verilen dolguya göre alt öğesini yerleştiren bir widget.
Diğer yapılarda ki kısıtlamalarını alt öğelerine aktarırken, dolgu, kısıtlamaları verilen dolgu ile daraltır ve alt öğenin daha küçük bir boyutta mizanpaj yapmasına neden olur. Dolgu daha sonra kendisini çocuğun boyutuna göre boyutlandırır, dolgu ile şişirilir ve çocuğun etrafında etkin bir şekilde boş alan yaratır.
Sonuç olarak Görüntüleyelim.
Burada görmüş olduğunuz noktada Yapı kendi içerisindeki boşluk aralığını ayarlayarak görüntülenen bir hale geliyor. Bu konu ile ilgili çok fazla detaya ve kilolardan bahsedeceğimiz dede emin olabilirsiniz yeri geldiğinde bir uygulamanın ben arayüzündeki ufak bir değişiklikte hayat kurtardığını söylemekte fayda var son kullanıcı süreçleri bizler için her zaman çok önemli.
Column
Alt öğelerini dikey bir dizide görüntüleyen bir pencere öğesi. Bir alt öğenin mevcut dikey alanı dolduracak şekilde genişlemesini sağlamak için, çocuğu Genişletilmiş bir widget’a sarın. Sütun gereci kaymaz (ve genel olarak bir Sütunda mevcut odaya sığacak olandan daha fazla alt öğenin olması bir hata olarak kabul edilir). Bir dizi widget’ınız varsa ve yetersiz alan varsa kaydırabilmelerini istiyorsanız, ListView kullanmayı düşünün.
Ve Sonuç olarak görüntülediğimiz de yapı karşımıza çıkıyor
Gördüğünüz üzere birden fazla aracın bir arada düzenli bir şekilde çalıştığını da görüntülemiş olduk birden fazla aracı ekranlarınıza görüntülemek istediğimizde Column bizler için yeterli olacaktır. Tabii ki bu kendi içerisindeki kullanım alandaki etki etmesi isteme sürece göre değişkenler gösterebilir. Burada amacımız tasarımlarımızı daha önceden belirleyerek uygulamamızda görüntülemek ve bu görüntülediğiniz uygulamada bunların sonuçlarını rahat bir şekilde almamız ve esnek kullanım sağlamasıdır.
Başka bir örnekte anlatacak olursak,
Burada bir paragraf yapısını inceleyelim.
ve Sonuç olarak karşımıza çıkıyor.
Özet
Bugün incelemiş olduğunuz araçlar da şunu görmüş olduk hepsinin kullanımı ve uygulamalarımızda çalışmasını istediğimiz yapılardaki görevleri birbirinden farklı ve bu görevleri daha iyi anlayabilmemiz için her bir aracın dinamiklerini iyi kavramamız gerekiyor yazı stilleri ile ilgili birden fazla seçenek karşımıza geliyor. Bunları daha detaylı bir verimli kullanmak bizim elimizde fikirlerimizi düşüncelerimizi tasarımlarımızı iyi oluşturmamız lazım ve ön çalışmalar bizim uygulamalarımızı geliştirirken bu araçlarla birlikte bir araya geldiğinde daha verimli sonuçlar almanızı sağlayacaktır.
Flutter ile Kalın 💙
#dart #flutter #google #coding
