Merhabalar, bundan önceki iki blog girdimizde nasıl SDK kurulacağını ve nasıl ilk projemizi başlatacağımızı görmüştük. Bu blog girdisinde ise Flutter'ın temelinde yatan Widget sistemini öğreneceğiz.
Öncelikle eskiden açtığımız projeye geri dönelim.
En aşağıdaki Widget Build kısmına gelip bu kısmı Scaffold'u silmeden tamamen ortadan kaldıralım.
Bu şekilde ilk Widget'ımız ile tanışmış oluyoruz Scaffold! Bu Widget, isminden de anlaşılabileceği üzere, yaptığı iş tüm kod satırlarını bir iskelet gibi bir arada tutmak.
Bunun bir diğer örneği de MaterialApp'dir, lakin bugün ondan bahsetmeyeceğiz.
Scaffold içerisine birden fazla değişken kabul eder, bugün bunlardan bir tanesini öğreneceğiz..
AppBar: Bu Widget uygulamanın tepesinde size özel bir bar kısmı oluşturmaya yarar, içerisini istediğiniz gibi dizayn edebilirsiniz.
AppBar ile başlayalım, appBar: değişkenini koyduktan sonra AppBar adlı Widget'ı ekliyoruz. Bu kısımda biraz aklınız karışabilir ama bana güvenin çok kolay bir sistem.
appBar değişkeninin içerisine herhangi bir AppBar Widget'ı koyabilirsiniz. Biz bu örnekte Default AppBar'ı kullanacağız.
Daha sonrasında AppBar Widget'ının içerisine iki tane daha değişken koyuyoruz. Bu değişkenlerden birinin adı title: diğerinin adı ise backgroundColor:
Şimdi ise can alıcı nokta geliyor, bu değişkenlerin içerisine ise başka bir Widget koymamız gerekiyor. Yani anlayacağınız, Widgetlardan oluşturduğumuz AppBar'ın içerisine Widgetlardan komut gireceğiz.
title: kısmına Text() Widget'ı ile yazı yazıyorum.
Bu yazıyı şekillendirmek için ise, bu yazının hemen yanına style: değişkenini koyuyorum. Bu style: değişkeninin içerisine ise yeni bir Widget koyuyorum, TextStyle()
Umarım Widget'ların neler olduğunu anlamışsınızdır. Widgetlar neredeyse her şeyi kontrol eden kütüphanelerdir. AppBar'ı bir Widget sayesinde oluşturursunuz. İçindeki yazıyı ayrı bir Widget ile oluşturursunuz. Ekranda gördüğünüz her değişiklik için ayrı bir Widget gerekir. Widget Çorbası.
Şimdi ne demiştik? Ekranda gördüğünüz her değişiklik için ayrı bir Widget gerekir, şimdi backgroundColor: değişkenine gelelim. Bu değişken sayesinde AppBar'ın rengini ayarlayabileceğiz. Bunun için ise Colors Widget'ını kullanıyoruz. Kullanımı oldukça basittir. Colors.{istediğiniz bir renk} = Colors.red
Bu sayede yeni uygulamamız içerisinde kırmızı bir AppBar oluşturduk! Üzerinde ise kalın bir font ile "Merhaba Technopat! Ben CidQu!" yazıyor. Hemen build alıp deneyelim.
Artık yeni yaptığımız uygulamanın tepesinde bir AppBar var!
Bugünlük bu kadar olsun. Bir sonrakinde body: değişkenini ve bu değişken içerisinde neler yapabileceğimizden bahsedeceğim. Asıl eğlence orada başlıyor.
Kendinize iyi bakın,
Sevgilerle CidQu.
Öncelikle eskiden açtığımız projeye geri dönelim.
En aşağıdaki Widget Build kısmına gelip bu kısmı Scaffold'u silmeden tamamen ortadan kaldıralım.
Bu şekilde ilk Widget'ımız ile tanışmış oluyoruz Scaffold! Bu Widget, isminden de anlaşılabileceği üzere, yaptığı iş tüm kod satırlarını bir iskelet gibi bir arada tutmak.
Bunun bir diğer örneği de MaterialApp'dir, lakin bugün ondan bahsetmeyeceğiz.
Scaffold içerisine birden fazla değişken kabul eder, bugün bunlardan bir tanesini öğreneceğiz..
AppBar: Bu Widget uygulamanın tepesinde size özel bir bar kısmı oluşturmaya yarar, içerisini istediğiniz gibi dizayn edebilirsiniz.
AppBar ile başlayalım, appBar: değişkenini koyduktan sonra AppBar adlı Widget'ı ekliyoruz. Bu kısımda biraz aklınız karışabilir ama bana güvenin çok kolay bir sistem.
appBar değişkeninin içerisine herhangi bir AppBar Widget'ı koyabilirsiniz. Biz bu örnekte Default AppBar'ı kullanacağız.
Daha sonrasında AppBar Widget'ının içerisine iki tane daha değişken koyuyoruz. Bu değişkenlerden birinin adı title: diğerinin adı ise backgroundColor:
Şimdi ise can alıcı nokta geliyor, bu değişkenlerin içerisine ise başka bir Widget koymamız gerekiyor. Yani anlayacağınız, Widgetlardan oluşturduğumuz AppBar'ın içerisine Widgetlardan komut gireceğiz.
title: kısmına Text() Widget'ı ile yazı yazıyorum.
Bu yazıyı şekillendirmek için ise, bu yazının hemen yanına style: değişkenini koyuyorum. Bu style: değişkeninin içerisine ise yeni bir Widget koyuyorum, TextStyle()
Umarım Widget'ların neler olduğunu anlamışsınızdır. Widgetlar neredeyse her şeyi kontrol eden kütüphanelerdir. AppBar'ı bir Widget sayesinde oluşturursunuz. İçindeki yazıyı ayrı bir Widget ile oluşturursunuz. Ekranda gördüğünüz her değişiklik için ayrı bir Widget gerekir. Widget Çorbası.
Şimdi ne demiştik? Ekranda gördüğünüz her değişiklik için ayrı bir Widget gerekir, şimdi backgroundColor: değişkenine gelelim. Bu değişken sayesinde AppBar'ın rengini ayarlayabileceğiz. Bunun için ise Colors Widget'ını kullanıyoruz. Kullanımı oldukça basittir. Colors.{istediğiniz bir renk} = Colors.red
Bu sayede yeni uygulamamız içerisinde kırmızı bir AppBar oluşturduk! Üzerinde ise kalın bir font ile "Merhaba Technopat! Ben CidQu!" yazıyor. Hemen build alıp deneyelim.
Artık yeni yaptığımız uygulamanın tepesinde bir AppBar var!
Bugünlük bu kadar olsun. Bir sonrakinde body: değişkenini ve bu değişken içerisinde neler yapabileceğimizden bahsedeceğim. Asıl eğlence orada başlıyor.
Kendinize iyi bakın,
Sevgilerle CidQu.