FLUTTER BUTON ÇEŞİTLERİ VE KULLANIMLARI
Merhaba bu konu aslında mobil uygulama geliştirme serisinin 13.konusudur. Flutter button çeşitleri ve kullanımlarına bakalım. Flutter arayüz tasarımlarında button widgetları çok önemlidir öncelikle button_learn.dart diye bir lib klasörü altında bir dart dosyası oluşturalım tabii bundan önce bir flutter projesi oluşturmamız gerekli bir önceki konudan geldiğinizi düşünerek bunu zaten yapmış olduğunuzu sayalım.
import etmemiz gereken material'i import ettik şimdi devam edelim temiz bir dart dosyasındayız şu an
stless bir widget oluşturun ve adı ButtonLearn olsun daha sonra içerisine
şu hale gelecek şekilde hazırlayın yani bunları zaten anlattığım için parça parça kod atıyorum yapacağınız işlem Scaffold ile başlayan bir tasarım appBar: vermişiz ve daha sonra body: kısmına da Column vermişiz children diyerek alt alta gelecek olan widgetları yani burada butonları anlatacağım için button widgetlarını buraya vereceğiz ki alt alta gözüksün butonlarımız.
butonlar custom olarak da yazabiliriz flutterda butonlarda TextButton ve ElevatedButtonlar vardir
textbuttonunun default hali normal yazi gibi gozuken bir butondur
öncelikle TextButton'dan bahsedelim
şimdi elevatedbutton oluşturalım üstteki textbutton da fark ettiyseniz style kısmında butonla ilgili tema ile ilgili şeyler veriyoruz fakat bunu güzel bir şekilde yapmışız direkt olarak oraya tema kodlarımızı yazmak yerine Theme.of diyerek çekmişiz bu kullanımdan ve faydalarından serinin önceki konularında bahsetmiştim.
mantık hep aynı onPressed veriliyor childa da atıyorsunuz bir widget
IconButton oluşturalım bir de
FloatingActionButton oluşturalım
OutlinedButton oluşturalım
açıklamaları kod bloklarının içerisinde yaptım // satırlarını inceleyebilirsiniz serinin önceki konularında da hep böyleydi
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
bir elevatedbutton daha oluşturalım
Bu sefer biraz Padding verdik ve shape kullanmışız. Şimdi buradaki özellikleri tek tek açıklamak yerine önceki konularda bahsettiğim taktikle hangi özelliğin karşısına örneğin shape: in karşısına neyi vermeniz gerektiğini basitçe anlayabiliyorsunuz ki zaten kolaylık da burada çünkü sizden önce bunları düşünüp yazan olmuş hep
Bu konuda çok kullanılan button çeşitlerinden bahsettim. Serinin bir sonraki konusunda görüşmek üzere
Gauloran <3
Merhaba bu konu aslında mobil uygulama geliştirme serisinin 13.konusudur. Flutter button çeşitleri ve kullanımlarına bakalım. Flutter arayüz tasarımlarında button widgetları çok önemlidir öncelikle button_learn.dart diye bir lib klasörü altında bir dart dosyası oluşturalım tabii bundan önce bir flutter projesi oluşturmamız gerekli bir önceki konudan geldiğinizi düşünerek bunu zaten yapmış olduğunuzu sayalım.
Kod:
import 'package:flutter/material.dart';import etmemiz gereken material'i import ettik şimdi devam edelim temiz bir dart dosyasındayız şu an
stless bir widget oluşturun ve adı ButtonLearn olsun daha sonra içerisine
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(
children: [şu hale gelecek şekilde hazırlayın yani bunları zaten anlattığım için parça parça kod atıyorum yapacağınız işlem Scaffold ile başlayan bir tasarım appBar: vermişiz ve daha sonra body: kısmına da Column vermişiz children diyerek alt alta gelecek olan widgetları yani burada butonları anlatacağım için button widgetlarını buraya vereceğiz ki alt alta gözüksün butonlarımız.
butonlar custom olarak da yazabiliriz flutterda butonlarda TextButton ve ElevatedButtonlar vardir
textbuttonunun default hali normal yazi gibi gozuken bir butondur
öncelikle TextButton'dan bahsedelim
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),
),şimdi elevatedbutton oluşturalım üstteki textbutton da fark ettiyseniz style kısmında butonla ilgili tema ile ilgili şeyler veriyoruz fakat bunu güzel bir şekilde yapmışız direkt olarak oraya tema kodlarımızı yazmak yerine Theme.of diyerek çekmişiz bu kullanımdan ve faydalarından serinin önceki konularında bahsetmiştim.
Kod:
ElevatedButton(
onPressed: () {},
child: const Text(
"deneme")), //onmantık hep aynı onPressed veriliyor childa da atıyorsunuz bir widget
IconButton oluşturalım bir de
Kod:
IconButton(
onPressed: () {},
icon: const Icon(Icons.abc_rounded),
),FloatingActionButton oluşturalım
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),
),OutlinedButton oluşturalım
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")),
),açıklamaları kod bloklarının içerisinde yaptım // satırlarını inceleyebilirsiniz serinin önceki konularında da hep böyleydi
diyelim sadece bir widget var ve ona tıklanabilirlik vermek istiyoruz diyelim o zaman InkWell kullanilabilir
Kod:
InkWell(onTap: () {}, child: const Text('custom')),
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")),bir elevatedbutton daha oluşturalı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),
),
),Bu sefer biraz Padding verdik ve shape kullanmışız. Şimdi buradaki özellikleri tek tek açıklamak yerine önceki konularda bahsettiğim taktikle hangi özelliğin karşısına örneğin shape: in karşısına neyi vermeniz gerektiğini basitçe anlayabiliyorsunuz ki zaten kolaylık da burada çünkü sizden önce bunları düşünüp yazan olmuş hep
Bu konuda çok kullanılan button çeşitlerinden bahsettim. Serinin bir sonraki konusunda görüşmek üzere
Gauloran <3
paylaşımın için teşekkürler hocam
