serinin 11.konusu ile devam ediyoruz en son yeni flutter projesi olusturduk actik projemizi devam edelim
şimdi burası main.dart kısmı burayla çok fazla ilgilenmiyoruz aslında yazacağımız her şey genellikle parça parça klasörlenmiş olacağından main.dartta çok fazla kod olması bizim işimize gelmez
lib klasorunun altinda yeni bir dart dosyasi olusturduk 101 klasorunun altinda adi da text_learn.dart icerisine de geldik
dedigim gibi textlearnview diye bir sinif olusturduk aslinda ve bu sinif statelesswidget sinifndan extends edilmis bunlari serinin onceki konularinda darttan bahsettigimiz 9 konuda anladik zaten siniftan miras kalmasini falan stlesswidget ne is peki? bu flutter sdk sindan gelen bir sey bize cok yardimci oluyor ama yine detayli bahsedecegiz tabi bunlardan ama simdilik bilmemiz gereken flutterda stlesswidgetin bize vermis oldugu bu gucle biz geriye Text widgeti donduren bir yapimiz var yani stlesswidgettan extends edildigi icin override etmemiz gereken bir metod oluyor bu da build metodu flutter sdk sindan geliyor demistik burada da gosterilmesi gereken ui olarak yani bize bu gucu veren yardimci olan sey peki biz ne goster demisiz Text yazmisiz oraya Text de bir widget flutter da her sey widget demistim yani bizim gosterecegimiz sey icinde Ozgur yazan bir Text widgeti vscode uzerinden ustune geldigimizde anliyoruz zaten karsimize soyle bir manzara geliyor
dart dilinden de bildigimiz gibi String olarak verdigi suslu parantez olmadan once olan kisim yuvarlak icerisine aldim bunun verilmesi zorunlu bu Text widgetini kullanirken baska ne gibi ozellikleri oldugunu da ustteki kucuk resimden goruyoruz zaten onlari da ekleyebiliriz ama simdilik boyle yazdik
burada da ufak bir degisiklik yaptik simdi Center widgetini da kullandik center widgeti icerisine gelen seyi ortalamamiza yarar basitce boyle soyleyebiliriz
simdi epey degisti mevzular yukaridaki resimden de gorundugu gibi bunu saglayan iskelet yapisi scaffoldtur. simdi mesela her widgetta yani vardir illaki bir ozellikler butunu ornegin text widgetlari tasarimlarin vazgecilmezleridir ctrl+space yaparak vscode uzerinden text widgetinda hangi ozelliklerin oldugunu vs anlayabiliyoruz uzerine mouse ile gelmemiz yeterli neyin neye gidecegi hangi ozelligin ne istedigi gibi bilgiler bize veriliyor vscode yardimiyla
biraz bu text widgetimizi sekillendirelim diger opsiyonel olan ozelliklerini kullanalim widgetimizin
aslinda zor degil hep ingden gelen bilgiyle bile ozelliklerin karsi kismi doldurulabilir bu sekilde
gayet guzel oldu. darttan gelen bilgimize dayanarak azicik daha modifiye edelim
simdi bir tane daha text widgeti yapmak istesek ayni sekilde boyle mi yapmaliyiz?
iyi de bu darta da basladigimizda mantikli degildi ki yapmamiz gerekeni biliyoruz ve hatirladiginizi umit ediyorum
kodlarin kaosa gitmesine gerek yok tek yaptigimiz bir sinif olusturduk ve bu sinif icerisine bu siniftan nesne olusturmadan erisilebilecek bir welcomeStyle diye bir TextStyle turunde bir degisken olusturduk gibi dusun ve bunun icerisine de TextStyle koyduk kendi istedigimiz ozelliklere sahip olan daha sonra da ust kisimda kodda incelerseniz TextStyle lari her seferinde yazmak yerine bir kere burada olusturup oralara veriyoruz boylece kodlarin kaosa suruklenmesinden kurtuluyoruz
biraz basitce yaptik ama daha iyi yapabilir miydik?
simdi genellikle fontsize gibi seyleri style lari boyle elle vermek mantikli degil aslinda yani elle vermek derken gidip de 10 12 yazi buyuklugu ya da su kadar baska bir widgetta yaparken buyuklugu genisligi elle vermek mantikli degildir style bazli konusacak olursak soyle bir yontem de yapabilirdik Theme dan bazi style lari cekebiliyoruz su sekilde:
yani burada yaptigimiz sey Theme dan bir textStyle sekli aldik eskiden headline1-2-3-4-5 kullaniyorduk tam onu yazacakken deprecated oldugunu yani artik eskide kaldigini ogrenmis oldum onun yerine small large medium getirilmis neyse fark etmez zaten ustteki kodda da gorebildigimiz gibi Theme.of diyerek (context) e takilmayin bundan sonra bahsedecegim onu gecin simdi .headlineSmall diyerek style imizi verebiliyoruz normalde ama ben burada copyWith de kullanmisim bu ne demek?
yani headlineSmall gibi olsun ama benim degistirmek istedigim yeniden set etmek istedigim birkac ufak degisiklik varsa copyWith diyerek parantez acip bunlari belirtebiliyoruz bu sekilde rengini mavi yap demisim geri kalani headlinesmall nasilsa oyle olsun demis oluyoruz bunu yaparken de oraya bir null check getir bakalim emin olmaliyim diyor biz null safety den zaten bahsetmistik yani bahsetmistim dart anlattigim konu serilerinde.
simdi biraz daha iyilestirdik kodu asama asama yani buradaki amac hicbir yere gidip de Text("veri veri veri veri") olarak yazmamak bunun yerine en altta ProjectKeys adli olusturdugumuz sinifta bu datayi tutup ya da artik nereden geliyorsa ondan bir nesne olusturup keys.welcome diye cekmek amacimiz bu olmali
simdi main.dart dosyasina geri donelim burada en son bahsetmek istedigim MaterialApp kismiydi aslinda cupertino da kullanilabilir o daha cok ios tarafina calisan sema yapisi diyebiliriz biz MaterialApp ciyiz simdilik bu yoldan devam MaterialApp bize title theme home gibi ozellikler veriyor uygulamanin semasini ciziyor yani.
uygulamanin hayatini MaterialApp ciziyor yani. buradaki title onemli android sistemlerde title yani baslik o title bu title yani oradan geliyor. bu arada debugBanneri kaldirmak icin MaterialApp icerisinde debugShowCheckedModeBanner: false, yapmaniz yeterlidir. projede bir tane MaterialApp bulunmalidir buna dikkat etmemiz gerek. cok uzamasin diye saliyorum artik devam edecegiz
inceleyip sevdiyseniz yorum yapip begenmeyi unutmayalim lutfen
<3 Gauloran
Kod:
import 'package:flutter/material.dart';
import 'package:flutter_application_1/101/text_learn.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
//tema ile ilgili ayarları yapabiliyoruz
primarySwatch: Colors.blue,
),
home: TextLearnView(), //burada belirtiyoruz ana sayfanin hangi widget olacagini
);
}
}şimdi burası main.dart kısmı burayla çok fazla ilgilenmiyoruz aslında yazacağımız her şey genellikle parça parça klasörlenmiş olacağından main.dartta çok fazla kod olması bizim işimize gelmez
lib klasorunun altinda yeni bir dart dosyasi olusturduk 101 klasorunun altinda adi da text_learn.dart icerisine de geldik
Kod:
import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir
//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
const TextLearnView({super.key});
@override
Widget build(BuildContext context) {
return const Text("Ozgur");
}
//TextLearn diye bir StatelessWidget tan türeyen bir sınıf oluşturduk
//stlesswidget da widget tan türemiştir. flutter sdk sından gelen şeyler bunlar
}dedigim gibi textlearnview diye bir sinif olusturduk aslinda ve bu sinif statelesswidget sinifndan extends edilmis bunlari serinin onceki konularinda darttan bahsettigimiz 9 konuda anladik zaten siniftan miras kalmasini falan stlesswidget ne is peki? bu flutter sdk sindan gelen bir sey bize cok yardimci oluyor ama yine detayli bahsedecegiz tabi bunlardan ama simdilik bilmemiz gereken flutterda stlesswidgetin bize vermis oldugu bu gucle biz geriye Text widgeti donduren bir yapimiz var yani stlesswidgettan extends edildigi icin override etmemiz gereken bir metod oluyor bu da build metodu flutter sdk sindan geliyor demistik burada da gosterilmesi gereken ui olarak yani bize bu gucu veren yardimci olan sey peki biz ne goster demisiz Text yazmisiz oraya Text de bir widget flutter da her sey widget demistim yani bizim gosterecegimiz sey icinde Ozgur yazan bir Text widgeti vscode uzerinden ustune geldigimizde anliyoruz zaten karsimize soyle bir manzara geliyor
dart dilinden de bildigimiz gibi String olarak verdigi suslu parantez olmadan once olan kisim yuvarlak icerisine aldim bunun verilmesi zorunlu bu Text widgetini kullanirken baska ne gibi ozellikleri oldugunu da ustteki kucuk resimden goruyoruz zaten onlari da ekleyebiliriz ama simdilik boyle yazdik
burada da ufak bir degisiklik yaptik simdi Center widgetini da kullandik center widgeti icerisine gelen seyi ortalamamiza yarar basitce boyle soyleyebiliriz
Kod:
import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir
//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
const TextLearnView({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text("Ozgur"),
),
);
}
}simdi epey degisti mevzular yukaridaki resimden de gorundugu gibi bunu saglayan iskelet yapisi scaffoldtur. simdi mesela her widgetta yani vardir illaki bir ozellikler butunu ornegin text widgetlari tasarimlarin vazgecilmezleridir ctrl+space yaparak vscode uzerinden text widgetinda hangi ozelliklerin oldugunu vs anlayabiliyoruz uzerine mouse ile gelmemiz yeterli neyin neye gidecegi hangi ozelligin ne istedigi gibi bilgiler bize veriliyor vscode yardimiyla
biraz bu text widgetimizi sekillendirelim diger opsiyonel olan ozelliklerini kullanalim widgetimizin
Kod:
import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir
//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
const TextLearnView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
('You are not' * 6),
style: const TextStyle(
wordSpacing: 2,
letterSpacing: 3,
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.left,
maxLines: 2,
),
),
);
}
}aslinda zor degil hep ingden gelen bilgiyle bile ozelliklerin karsi kismi doldurulabilir bu sekilde
gayet guzel oldu. darttan gelen bilgimize dayanarak azicik daha modifiye edelim
Kod:
import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir
//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
const TextLearnView({super.key});
final String name = "Ozgur";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
('Welcome $name ${name.length}'),
style: const TextStyle(
wordSpacing: 2,
letterSpacing: 3,
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.left,
maxLines: 2,
),
),
);
}
//TextLearn diye bir StatelessWidget tan türeyen bir sınıf oluşturduk
//stlesswidget da widget tan türemiştir. flutter sdk sından gelen şeyler bunlar
//eger bir sayfa yapiyorsak flutter tarafinda scaffold iskelettir kullanmak mantiklidir
}simdi bir tane daha text widgeti yapmak istesek ayni sekilde boyle mi yapmaliyiz?
Kod:
import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir
//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
const TextLearnView({super.key});
final String name = "Ozgur";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Text(
('Welcome $name ${name.length}'),
style: const TextStyle(
wordSpacing: 2,
letterSpacing: 3,
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.left,
maxLines: 2,
),
Text(
('Welcome $name ${name.length}'),
style: const TextStyle(
wordSpacing: 2,
letterSpacing: 3,
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.left,
maxLines: 2,
),
]),
);
}
//TextLearn diye bir StatelessWidget tan türeyen bir sınıf oluşturduk
//stlesswidget da widget tan türemiştir. flutter sdk sından gelen şeyler bunlar
//eger bir sayfa yapiyorsak flutter tarafinda scaffold iskelettir kullanmak mantiklidir
}iyi de bu darta da basladigimizda mantikli degildi ki yapmamiz gerekeni biliyoruz ve hatirladiginizi umit ediyorum
Kod:
import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir
//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
const TextLearnView({super.key});
final String name = "Ozgur";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
Text(
('Welcome $name ${name.length}'),
style: ProjectStyles.welcomeStyle,
textAlign: TextAlign.left,
maxLines: 2,
),
Text(
('Welcome $name ${name.length}'),
style: ProjectStyles.welcomeStyle, //ProjectStyle sinifinda static olarak olusturdugumuz welcomeStyle a erisebiliyoruz direkt bu sekilde
textAlign: TextAlign.left,
maxLines: 2,
),
]),
);
}
//TextLearn diye bir StatelessWidget tan türeyen bir sınıf oluşturduk
//stlesswidget da widget tan türemiştir. flutter sdk sından gelen şeyler bunlar
//eger bir sayfa yapiyorsak flutter tarafinda scaffold iskelettir kullanmak mantiklidir
}
class ProjectStyles {
static const TextStyle welcomeStyle = TextStyle(
wordSpacing: 2,
letterSpacing: 3,
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
fontStyle: FontStyle.italic,
);
}kodlarin kaosa gitmesine gerek yok tek yaptigimiz bir sinif olusturduk ve bu sinif icerisine bu siniftan nesne olusturmadan erisilebilecek bir welcomeStyle diye bir TextStyle turunde bir degisken olusturduk gibi dusun ve bunun icerisine de TextStyle koyduk kendi istedigimiz ozelliklere sahip olan daha sonra da ust kisimda kodda incelerseniz TextStyle lari her seferinde yazmak yerine bir kere burada olusturup oralara veriyoruz boylece kodlarin kaosa suruklenmesinden kurtuluyoruz
biraz basitce yaptik ama daha iyi yapabilir miydik?
simdi genellikle fontsize gibi seyleri style lari boyle elle vermek mantikli degil aslinda yani elle vermek derken gidip de 10 12 yazi buyuklugu ya da su kadar baska bir widgetta yaparken buyuklugu genisligi elle vermek mantikli degildir style bazli konusacak olursak soyle bir yontem de yapabilirdik Theme dan bazi style lari cekebiliyoruz su sekilde:
Kod:
Text(
('Welcome $name ${name.length}'),
style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.blue),
textAlign: TextAlign.left,
maxLines: 2,
),yani burada yaptigimiz sey Theme dan bir textStyle sekli aldik eskiden headline1-2-3-4-5 kullaniyorduk tam onu yazacakken deprecated oldugunu yani artik eskide kaldigini ogrenmis oldum onun yerine small large medium getirilmis neyse fark etmez zaten ustteki kodda da gorebildigimiz gibi Theme.of diyerek (context) e takilmayin bundan sonra bahsedecegim onu gecin simdi .headlineSmall diyerek style imizi verebiliyoruz normalde ama ben burada copyWith de kullanmisim bu ne demek?
yani headlineSmall gibi olsun ama benim degistirmek istedigim yeniden set etmek istedigim birkac ufak degisiklik varsa copyWith diyerek parantez acip bunlari belirtebiliyoruz bu sekilde rengini mavi yap demisim geri kalani headlinesmall nasilsa oyle olsun demis oluyoruz bunu yaparken de oraya bir null check getir bakalim emin olmaliyim diyor biz null safety den zaten bahsetmistik yani bahsetmistim dart anlattigim konu serilerinde.
Kod:
import 'package:flutter/material.dart'; //sıfır bir dart dosyasında import edilmesi gerekir
//bir class oluşturuyoruz
class TextLearnView extends StatelessWidget {
TextLearnView({super.key});
final String name = "Ozgur";
final ProjectKeys keys = ProjectKeys();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Text(
('Welcome $name ${name.length}'),
style: ProjectStyles.welcomeStyle,
textAlign: TextAlign.left,
maxLines: 2,
),
Text(
('Welcome $name ${name.length}'),
style: Theme.of(context)
.textTheme
.headlineSmall!
.copyWith(color: ProjectColors.welcomeColor),
textAlign: TextAlign.left,
maxLines: 2,
),
Text(keys.welcome), //textlerimizi bu sekilde olusturmaliyiz
]),
);
}
//TextLearn diye bir StatelessWidget tan türeyen bir sınıf oluşturduk
//stlesswidget da widget tan türemiştir. flutter sdk sından gelen şeyler bunlar
//eger bir sayfa yapiyorsak flutter tarafinda scaffold iskelettir kullanmak mantiklidir
}
class ProjectStyles {
static const TextStyle welcomeStyle = TextStyle(
wordSpacing: 2,
letterSpacing: 3,
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
fontStyle: FontStyle.italic,
);
}
class ProjectColors {
static Color welcomeColor = Colors.blue;
}
class ProjectKeys {
final String welcome = "Merhaba";
}simdi biraz daha iyilestirdik kodu asama asama yani buradaki amac hicbir yere gidip de Text("veri veri veri veri") olarak yazmamak bunun yerine en altta ProjectKeys adli olusturdugumuz sinifta bu datayi tutup ya da artik nereden geliyorsa ondan bir nesne olusturup keys.welcome diye cekmek amacimiz bu olmali
simdi main.dart dosyasina geri donelim burada en son bahsetmek istedigim MaterialApp kismiydi aslinda cupertino da kullanilabilir o daha cok ios tarafina calisan sema yapisi diyebiliriz biz MaterialApp ciyiz simdilik bu yoldan devam MaterialApp bize title theme home gibi ozellikler veriyor uygulamanin semasini ciziyor yani.
uygulamanin hayatini MaterialApp ciziyor yani. buradaki title onemli android sistemlerde title yani baslik o title bu title yani oradan geliyor. bu arada debugBanneri kaldirmak icin MaterialApp icerisinde debugShowCheckedModeBanner: false, yapmaniz yeterlidir. projede bir tane MaterialApp bulunmalidir buna dikkat etmemiz gerek. cok uzamasin diye saliyorum artik devam edecegiz
inceleyip sevdiyseniz yorum yapip begenmeyi unutmayalim lutfen
<3 Gauloran
