Birkaç ay oldu her halde yazmayalı. Şimdi devam edelim çeşitli sağlık sorunları sebebiyle ara verdiğim seriyi bitirmeye kararlıyım aslında. Her ne kadar az yorum gelse de. Yeni gördüyseniz bu konuyu önce gidip ilk 12 konuyu inceleyin. Aşağıya bırakayım :
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #1
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #2
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #3
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #4
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #5
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #6
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #7
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #8
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #9
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #10
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #11
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #12
En son nerede kaldığımızı da hatırlamıyorum açıkçası ama button_learn.dart diye dosya açtırmışım size. Zaten ilk 10 konu herhalde dart üzerineydi 6 haftalık bir şeyler yapmıştım. Şimdi ButtonLearn ile devam edelim.
Öncelikle material'ı import ediyoruz
Daha sonra ButtonLearn diye bir statelesswidget oluşturuyoruz bunu nasıl yapıyorduk
diyerek devam ediyorduk ama vscode üzerinde de st yazdığınızda direkt dart dosyası içerisinde zaten size önerecektir direkt otomatik stless sınıf ve build metodunu da override edip oluşturacaktır.
burada da bildiğiniz gibi return diyerek tasarımı döndürüyoruz Scaffold bizim iskeletimizdi appBarı bodysi osu busu şusu vardı biz AppBar ı dümdüz vermişiz daha sonra body e gelmişiz oraya da bir Column koymuşuz.
butonlar custom olarak da yazabiliriz flutterda butonlarda TextButton ve ElevatedButtonlar vardir
textbuttonunun default hali normal yazi gibi gozuken bir butondur
burada style diyerek bir buton stili döndürebiliyoruz bunun için de ButtonStyle kullanabiliriz. daha sonra arkaplan rengi osu busu falan ayarlarız. Orada yahu bu materialstateporperty ne falan diye takılmayın hemen uzerine geliyoruz bizden zaten beklediği MaterialStateProperty<Color?>? diye görüyoruz. Buralara takılmayalım devam edelim anlatmak istediğim buralar değil zaten. Bu arada calisma yaparken projenizi cok uzun dosya yollari olacak sekilde klasorlemeyin CMake bu path patladı diye hata alırsınız. Devam edecek olursak buradaki if ne yapiyor diye eger bu butona basilirsa textbutton a yani basildiginde yeşil rengi dondur seklinde bi ufak ayar verebiliyoruz bu sekilde tabi bu kodlari boyle ortada birakmak dogru degil ama konumuz bu oldugu icin anlama acisindan yaklaşıyoruz şu an.
bir başka butona değinecek olursak textbutton ile birlikte cok kullanılan elevatedButton umuz var. onPressed ozelligine null atarsak tiklanabilirligi gider her butonun onPressed ine null verdigimizde kendi ui designına sahip nasil gorunecegi ile ilgili.
genelde goruldugu gibi butonlar benzer mantikta calismakta.
IconButton verdik buraya da . icon: diyerek bizden beklenen Iconu da iletiyoruz. Burada core olarak flutterdan gelen bir suru icon var illaki proje gelistirirken lazim olacaktir ilerde.
FloatingActionButton da da pek farkli bir mevzu yok sadece yorum satirlariyla tiklandiginda ne olabilecegi ile ilgili ufak birkac senaryo vermisim.
Bir baska buton cesidi
diyelim sadece bir widget var ve ona tıklanabilirlik vermek istiyoruz diyelim o zaman InkWell kullanilabilir
bir de GestureDetector de kullanılabilir ancak InkWell i kullanıyoruz biz fark etmez o kadar da bu buton tipleri yasamimizda yeterli olur
Şöyle kullanımlar da yapabiliriz
araya bir boşluk atalım da karışmasın
son olarak bir ElevatedButton kullanalım
burada shape ozelligi bizden OutlinedBorder? bekliyor peki biz nasıl oluyor da OutlinedBorder bekledigi halde RoundedRectangleBorder falan yaziyoruz kabul ediyor? aslinda olay tamamen o sinifi gidip incelemekten ibaret. Gidin sınıfa ctrl+sol tık ve RoundedRectangleBorder ın OutlinedBorder dan türeyen bir sınıf olduğunu göreceksiniz. Devam edelim
Ora da da bir borderRadius özelliği var o da BorderRadiusGeometry bekliyor biz BorderRadius.all vermişiz gidin yine kontrol edin biraz girişken olun sağa sola tıklayın yine BorderRadius sınıfının BorderRadiusGeometry den türemiş olduğunu görüyoruz.
Zaten az ustune gelince
şeklinde fark ediyoruz. Şimdi main.dart a gidip home: kısmında ButtonLearn() diye ayarlayıp emülatörde çalıştırın. aslında button_learn.dart uzerinde bahsetmek istediklerim bu kadar devam etmemiz lazım.
Şimdi devam edelim button_learn.dart ile kalmasın
icon_learn.dart, app_bar.dart , color_learn.dart dosyalarını 101 klasörümüze oluşturalım
Şimdi öncelikle appBar candır adamdır bir ekran geliştirme sürecinde appbar kısmı önemlidir evet bazen kullanılmayabilir farklı farklı tasarımları düşündüğümüzde ama genel olarak kullanılan bir şey.
importlarımızı yapalım ve Stateless bir widget oluşturalım AppBarLearnView olsun adı
şuralara kadar yazın şimdi öncelikle yukarda bir tanımlamamız var String. _ koymuşuz başına yani sadece bu dosyadan erişilebilir olduğunu belirtmişiz bunu çok yüksek ihtimalle söylemiştim önceki konularda. build metodu çalışıyor return edilen bir Scaffold var devam edelim bu üsttekini niye tanımladık diye sormayın şimdilik devam
şimdi AppBar ın içindeki özellikleri kullanalım biraz öncelikle title yani appBar başlığına _title yukarıda tanımladığımızı verdik direkt olarak Welcome Learn yazamaz mıydık yazardık ama şimdiden hafiften artık alışmamız gerekiyor bu tarz kullanımlara temiz kod yazma ve temiz gözükmesi konularına en azından çok çok çok başlangıç seviyelerinde bu tarz hamleler yapmamız ve alışmamız gerekli daha çok yolumuz var. appBarın leading özelliği ile devam edelim ve actions ozelligini de kullanalım
şimdi aşağıdaki farklı farklı appBar ozelliklerini de kullanım yanlarına yorum satırı olarak ne anlama geldiğini vereyim
kodlara takılmayın flutterı öğrenirken biz bu tarz kodlamalar yapıyoruz ama proje geliştirmek başka öğrenmek için bir şeyler yazıp denemek başka. örneğin appBarın özellikleri böyle direkt olarak bu şekilde verilmez yanlış olur bizim amacımız profesyonel bir şekilde proje geliştirmek için temelleri atmak. Proje geliştirirken belli bir standarda sahip olmalıyız ve bu standartlardan sapmamalıyız. Biz burada appBar widgetı yaptıysak ve projede sallıyorum 10 tane appBar kullanacaksak bu şekilde 10 kere yazamayız hep bu mantıktan tekrar eden şeylerde bir sorun var mantığından ilerleyelim.
Şimdi icon_learn.dart dosyamıza geçelim yazmaya başlayalım.
yine stateless widget oluşturuyoruz material'ı import ediyoruz adı da IconLearnView bu sınıfın.
buraya kadar geldiniz. Devam edelim.
appBar'ı böyle basitçe hallettik devam
şimdi body kısmını şöyle verdik Column dedik burada da IconButton'lar kullanalım.
IconButton'ı artık biliyoruz button_learn.dart ta bundan bahsetmiştim çünkü.
Birkaç tane daha verelim
şimdi fark ettiyseniz örneğin size kısmında IconSizes.iconSmall2x IconSizes().iconSmall falan bunlar ne ? hemen aşağıya şunu ekleyin
şimdi anlam kazanacak. Yaptığımız şey sadece bir IconSizes sınıfı ve IconColors sınıfı yapıp bu sınıfların içerisine sabit şeyleri vermişiz IconButton oluşturup IconButton'a size verirken size:IconSızes.iconSmall2x, diyerek kullanımlar yapabiliyoruz tabii bu çok çok ufak bir kısmı düzgün kod ve okunabilir kod yazma üzerine. Elimiz alışsın diye ve anlayalım diye böyle yapıyoruz örneğin color: verirken yine bu rengi direkt olarak vermek yerine yahu benim sınıfım var renk sınıfımdan çekerim mantığıyla hareket ediyoruz. IconColors diye sınıfımız var bu sınıfımızın içinde de final Color froly diye tanımlamışız rengi verirken de iconColors.froly, diyerek veriyoruz. Tabii color: ı Theme.of(context) ile vermek daha mantıklıdır çünkü theme light veya dark olunca bu gibi değişikliklere otomatik olarak uyum sağlanır açık karanlık renk sıkıntısı yaşamıyoruz öyle olduğunda. Aşağıdakileri de inceleyin. Serinin bir sonraki konusunda stateless widgettan, paddingten, card ve image widgetlarından bahsedelim.
icon_learn.dart ile ilgili de söylemek istediklerim bu kadar. color_learn.dart diye bir dosya açın ve
inceleyin yine aynı mantıklar.
Bir sonraki konuda görüşmek üzere <3 Gauloran
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #1
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #2
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #3
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #4
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #5
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #6
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #7
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #8
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #9
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #10
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #11
0'dan İleri Seviyeye Mobil Uygulama Geliştirme Eğitimi Veriyorum #12
En son nerede kaldığımızı da hatırlamıyorum açıkçası ama button_learn.dart diye dosya açtırmışım size. Zaten ilk 10 konu herhalde dart üzerineydi 6 haftalık bir şeyler yapmıştım. Şimdi ButtonLearn ile devam edelim.
Öncelikle material'ı import ediyoruz
Kod:
import 'package:flutter/material.dart';Daha sonra ButtonLearn diye bir statelesswidget oluşturuyoruz bunu nasıl yapıyorduk
Kod:
class ButtonLearn extends StatelessWidget {
const ButtonLearn({super.key});diyerek devam ediyorduk ama vscode üzerinde de st yazdığınızda direkt dart dosyası içerisinde zaten size önerecektir direkt otomatik stless sınıf ve build metodunu da override edip oluşturacaktır.
Kod:
@override
Widget build(BuildContext context) {
//bu contextin ne oldugunu konusacagiz
//bunun uzerinden bircok nesneye erisebildigimizden global bir obje oldugundan uzerinden datalar okunabildigi seylerden bahsedecegiz
return Scaffold(
appBar: AppBar(),
body: Column(burada da bildiğiniz gibi return diyerek tasarımı döndürüyoruz Scaffold bizim iskeletimizdi appBarı bodysi osu busu şusu vardı biz AppBar ı dümdüz vermişiz daha sonra body e gelmişiz oraya da bir Column koymuşuz.
butonlar custom olarak da yazabiliriz flutterda butonlarda TextButton ve ElevatedButtonlar vardir
textbuttonunun default hali normal yazi gibi gozuken bir butondur
Kod:
TextButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.pressed)) {
return Colors.green;
}
return Colors.white;
})),
child:
Text("deneme", style: Theme.of(context).textTheme.titleMedium),
),burada style diyerek bir buton stili döndürebiliyoruz bunun için de ButtonStyle kullanabiliriz. daha sonra arkaplan rengi osu busu falan ayarlarız. Orada yahu bu materialstateporperty ne falan diye takılmayın hemen uzerine geliyoruz bizden zaten beklediği MaterialStateProperty<Color?>? diye görüyoruz. Buralara takılmayalım devam edelim anlatmak istediğim buralar değil zaten. Bu arada calisma yaparken projenizi cok uzun dosya yollari olacak sekilde klasorlemeyin CMake bu path patladı diye hata alırsınız. Devam edecek olursak buradaki if ne yapiyor diye eger bu butona basilirsa textbutton a yani basildiginde yeşil rengi dondur seklinde bi ufak ayar verebiliyoruz bu sekilde tabi bu kodlari boyle ortada birakmak dogru degil ama konumuz bu oldugu icin anlama acisindan yaklaşıyoruz şu an.
Kod:
ElevatedButton(
onPressed: () {},
child: const Text(
"deneme")),bir başka butona değinecek olursak textbutton ile birlikte cok kullanılan elevatedButton umuz var. onPressed ozelligine null atarsak tiklanabilirligi gider her butonun onPressed ine null verdigimizde kendi ui designına sahip nasil gorunecegi ile ilgili.
genelde goruldugu gibi butonlar benzer mantikta calismakta.
Kod:
IconButton(
onPressed: () {},
icon: const Icon(Icons.abc_rounded),
),IconButton verdik buraya da . icon: diyerek bizden beklenen Iconu da iletiyoruz. Burada core olarak flutterdan gelen bir suru icon var illaki proje gelistirirken lazim olacaktir ilerde.
Kod:
FloatingActionButton(
onPressed: () {
//butonlarda onPressed ornegin musterinin bize verdigi seyleri burada giriyoruz
//servise istek at
//sayfanin rengini duzenle
//yapilacak is ... bla ... bla
},
child: const Icon(Icons.add),
),FloatingActionButton da da pek farkli bir mevzu yok sadece yorum satirlariyla tiklandiginda ne olabilecegi ile ilgili ufak birkac senaryo vermisim.
Bir baska buton cesidi
Kod:
OutlinedButton(
onPressed:
() {}, //SizedBox ile bu sekilde texte boyut verdik tabi projelerde bu tarz kullanimlar onerilmez sektorde
style: OutlinedButton.styleFrom(
//style diyerek butonun stil ayarlarını yapıyoruz
backgroundColor: Colors.red,
//shape: CircleBorder(),
/*
shape yani şekil için bilmemiz gerekenler
RoundedRectangleBorder, CircleBorder
*/
padding: const EdgeInsets.all(10),
),
child: const SizedBox(width: 150, child: Text("huha")),
),diyelim sadece bir widget var ve ona tıklanabilirlik vermek istiyoruz diyelim o zaman InkWell kullanilabilir
Kod:
InkWell(onTap: () {}, child: const Text('custom')),Şöyle kullanımlar da yapabiliriz
Kod:
//hemen hemen butun butonlarin icon diye propertileri olur
OutlinedButton.icon(
//bu sekilde .icon diyerek icon ve text in yanyana oldugu bir buton olusturmak icin lazim olabilir bu kompanent
onPressed: () {},
icon: const Icon(Icons.abc),
label: const Text("datadata")),araya bir boşluk atalım da karışmasın
Kod:
const SizedBox(height: 10),son olarak bir ElevatedButton kullanalım
Kod:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)))),
child: Padding(
padding: const EdgeInsets.only(
top: 10, right: 40, left: 40, bottom: 10),
//padding bir üst widget ile burada text widgetı arasında boşluk veriyor
child: Text("Place Bid",
style: Theme.of(context).textTheme.headlineLarge),
),
),burada shape ozelligi bizden OutlinedBorder? bekliyor peki biz nasıl oluyor da OutlinedBorder bekledigi halde RoundedRectangleBorder falan yaziyoruz kabul ediyor? aslinda olay tamamen o sinifi gidip incelemekten ibaret. Gidin sınıfa ctrl+sol tık ve RoundedRectangleBorder ın OutlinedBorder dan türeyen bir sınıf olduğunu göreceksiniz. Devam edelim
Ora da da bir borderRadius özelliği var o da BorderRadiusGeometry bekliyor biz BorderRadius.all vermişiz gidin yine kontrol edin biraz girişken olun sağa sola tıklayın yine BorderRadius sınıfının BorderRadiusGeometry den türemiş olduğunu görüyoruz.
Zaten az ustune gelince
Kod:
(const) BorderRadius BorderRadius.all(Radius radius)şeklinde fark ediyoruz. Şimdi main.dart a gidip home: kısmında ButtonLearn() diye ayarlayıp emülatörde çalıştırın. aslında button_learn.dart uzerinde bahsetmek istediklerim bu kadar devam etmemiz lazım.
Şimdi devam edelim button_learn.dart ile kalmasın
icon_learn.dart, app_bar.dart , color_learn.dart dosyalarını 101 klasörümüze oluşturalım
Şimdi öncelikle appBar candır adamdır bir ekran geliştirme sürecinde appbar kısmı önemlidir evet bazen kullanılmayabilir farklı farklı tasarımları düşündüğümüzde ama genel olarak kullanılan bir şey.
Kod:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';importlarımızı yapalım ve Stateless bir widget oluşturalım AppBarLearnView olsun adı
Kod:
const String _title = "Welcome Learn";
class AppBarLearnView extends StatelessWidget {
const AppBarLearnView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(şuralara kadar yazın şimdi öncelikle yukarda bir tanımlamamız var String. _ koymuşuz başına yani sadece bu dosyadan erişilebilir olduğunu belirtmişiz bunu çok yüksek ihtimalle söylemiştim önceki konularda. build metodu çalışıyor return edilen bir Scaffold var devam edelim bu üsttekini niye tanımladık diye sormayın şimdilik devam
Kod:
appBar: AppBar(
title: const Text(_title),şimdi AppBar ın içindeki özellikleri kullanalım biraz öncelikle title yani appBar başlığına _title yukarıda tanımladığımızı verdik direkt olarak Welcome Learn yazamaz mıydık yazardık ama şimdiden hafiften artık alışmamız gerekiyor bu tarz kullanımlara temiz kod yazma ve temiz gözükmesi konularına en azından çok çok çok başlangıç seviyelerinde bu tarz hamleler yapmamız ve alışmamız gerekli daha çok yolumuz var. appBarın leading özelliği ile devam edelim ve actions ozelligini de kullanalım
Kod:
leading: const Icon(Icons
.chevron_left), //!sol tarafina bir seyler yerlestirmek istedigimizde kullanabiliriz
actions: [
//!sag tarafa bir seyler yerlestirmek istedigimizde kullanabiliriz
IconButton(
icon: const Icon(Icons.mark_email_unread_sharp),
onPressed: () {},
),
const Center(child: CircularProgressIndicator()),
],şimdi aşağıdaki farklı farklı appBar ozelliklerini de kullanım yanlarına yorum satırı olarak ne anlama geldiğini vereyim
Kod:
centerTitle: true, //! appbar title ini ortalamak icin true
backgroundColor: Colors.transparent,
elevation:
0, //! golgelendirme gibi dusun sayfayi onde yapma imkani sunar
systemOverlayStyle: SystemUiOverlayStyle
.light, //! appbar widgetinin bu ozelligi sayesinde telefonundaki durum cubugunun rengini light mi dark mi olacagini ayarlayabiliyoruz
actionsIconTheme: const IconThemeData(
//! actions daki ikonlarin temalarini stil ozelliklerini buradan verebiliyoruz
color: Colors.red,
size: 30,
),
//! ustu cizili seyler deprecated olmustur onun yerine farkli seyler kullanmamizi onerir gelistiriciler
automaticallyImplyLeading:
false, //! sayfada otomatik olarak back butonu gelmesin demek oluyor bu ilerde navigasyonlarda back butonunu flutter kendisi otomatik veriyor
),
body: const Column(
children: [],
),
);
}
}kodlara takılmayın flutterı öğrenirken biz bu tarz kodlamalar yapıyoruz ama proje geliştirmek başka öğrenmek için bir şeyler yazıp denemek başka. örneğin appBarın özellikleri böyle direkt olarak bu şekilde verilmez yanlış olur bizim amacımız profesyonel bir şekilde proje geliştirmek için temelleri atmak. Proje geliştirirken belli bir standarda sahip olmalıyız ve bu standartlardan sapmamalıyız. Biz burada appBar widgetı yaptıysak ve projede sallıyorum 10 tane appBar kullanacaksak bu şekilde 10 kere yazamayız hep bu mantıktan tekrar eden şeylerde bir sorun var mantığından ilerleyelim.
Şimdi icon_learn.dart dosyamıza geçelim yazmaya başlayalım.
yine stateless widget oluşturuyoruz material'ı import ediyoruz adı da IconLearnView bu sınıfın.
Kod:
class IconLearnView extends StatelessWidget {
IconLearnView({super.key});
final IconSizes iconSize =
IconSizes(); //IconSizes sınıfından bir nesne oluşturduk
final IconColors iconColors = IconColors();
@override
Widget build(BuildContext context) {
return Scaffold(buraya kadar geldiniz. Devam edelim.
Kod:
appBar: AppBar(
title: const Text("Hello"),
),appBar'ı böyle basitçe hallettik devam
Kod:
body: Column(
children: [şimdi body kısmını şöyle verdik Column dedik burada da IconButton'lar kullanalım.
Kod:
IconButton(
onPressed: () {},
icon: Icon(
Icons.message_outlined,
color: Colors
.red, //renklerin buraya Colors.red diye bu şekilde verilmesi katliamdır
size:
IconSizes().iconSmall, //veya iconSize.iconSmall diyebiliriz
),
),IconButton'ı artık biliyoruz button_learn.dart ta bundan bahsetmiştim çünkü.
Birkaç tane daha verelim
Kod:
IconButton(
onPressed: () {},
icon: Icon(
Icons.message_outlined,
color: iconColors
.froly, //doğru renk verme şekli diyebiliriz katliamdan kurtulup
size:
IconSizes().iconSmall, //veya iconSize.iconSmall diyebiliriz
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.message_outlined,
color: iconColors
.froly, //doğru renk verme şekli diyebiliriz katliamdan kurtulup
size: IconSizes.iconSmall2x, //böyle de kullanılabilir
),
),şimdi fark ettiyseniz örneğin size kısmında IconSizes.iconSmall2x IconSizes().iconSmall falan bunlar ne ? hemen aşağıya şunu ekleyin
Kod:
class IconSizes {
final double iconSmall = 40;
static const double iconSmall2x = 80;
}
class IconColors {
final Color froly =
const Color(0xffED617A); //Color sınıfından bir nesne oluşturuyoruz
//froly diye bir ED617A # kodlu rengimizi bu şekilde oluşturabiliyoruz
}şimdi anlam kazanacak. Yaptığımız şey sadece bir IconSizes sınıfı ve IconColors sınıfı yapıp bu sınıfların içerisine sabit şeyleri vermişiz IconButton oluşturup IconButton'a size verirken size:IconSızes.iconSmall2x, diyerek kullanımlar yapabiliyoruz tabii bu çok çok ufak bir kısmı düzgün kod ve okunabilir kod yazma üzerine. Elimiz alışsın diye ve anlayalım diye böyle yapıyoruz örneğin color: verirken yine bu rengi direkt olarak vermek yerine yahu benim sınıfım var renk sınıfımdan çekerim mantığıyla hareket ediyoruz. IconColors diye sınıfımız var bu sınıfımızın içinde de final Color froly diye tanımlamışız rengi verirken de iconColors.froly, diyerek veriyoruz. Tabii color: ı Theme.of(context) ile vermek daha mantıklıdır çünkü theme light veya dark olunca bu gibi değişikliklere otomatik olarak uyum sağlanır açık karanlık renk sıkıntısı yaşamıyoruz öyle olduğunda. Aşağıdakileri de inceleyin. Serinin bir sonraki konusunda stateless widgettan, paddingten, card ve image widgetlarından bahsedelim.
icon_learn.dart ile ilgili de söylemek istediklerim bu kadar. color_learn.dart diye bir dosya açın ve
Kod:
import 'package:flutter/material.dart';
class ColorLearn extends StatelessWidget {
const ColorLearn({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
color: ColorsItems.porchase,
child: Text('data', style: Theme.of(context).textTheme.titleMedium)),
//burada dikkat etmemiz gereken Container ın color'ını nasıl verdiğimiz ve text widgetının style ını nasıl verdiğimizdir
//bir textwidgetına arkaplan rengi verirken eğer widgetımızın arkaplan rengi özelliği yoksa onu bir container ile sarmalayarak
//vermemiz yeterli olabiliyor
);
}
}
//class lar dışında kod yazmamak daha mantıklı oop kullanıyoruz
class ColorsItems {
static const Color porchase = Color(0xffEDBF61);
static const Color sulu =
Color.fromARGB(198, 237, 97, 1); //Bu şekilde de renk verilebilir
}
/*
hot reload özelliği sayesinde değişiklikleri anlık görebiliyoruz hot restart ve hot reload güzel özellikler
*/inceleyin yine aynı mantıklar.
Bir sonraki konuda görüşmek üzere <3 Gauloran
