Flutter’da Button Çeşitleri ve Özellikleri
Ortak özelliklere sahip olmasının yanı sıra kendine has özellikleriyle Flutter’da button çeşitleri bulunmaktadır.
Flutter’da Button Çeşitleri
Flutter’da türü fark etmeksizin her button onPressed ( ) { } adında bir metot ile beraber kullanılır. Temel olarak onPressed ile kullanıcı tarafından ilgili butona bastığında çalışacak bir işleve yönlendirmeyi ifade edilir.
Flutter’da kullanılan button türleri aşağıda listede derlenmiştir:
- TextButton (
FlatButton) - ElevatedButton (
RaisedButton) - FloatingActionButton
- IconButton
- Inkwell Button
- DropdownButton
- PopupMenuButton
TextButton Özellikleri
TextButton, kullanımdan kaldırılan FlatButton yerine kullanılan bir buton çeşididir. TextButtoon, gölgesiz basit, düz bir buton olmakla beraber onPressed ( ) { } ve child property’lerinin kullanılmasını zorunlu tutar. İçine aldığı widget’a bağlı olarak şekillenir. Diğer property’ler için TextButton resmi dökümanlarından faydalanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Center(child: Text("Buttons")), ), body: Center( child: TextButton( onPressed: () {}, child: Text( "TextButton", style: TextStyle( fontSize: 25, color: Colors.red, fontWeight: FontWeight.bold), ), ), ), ), ), ); |
Çıktı:
ElevatedButton Özellikleri
ElevatedButton, kullanımdan kaldırılan RaisedButton yerine kullanılan bir buton çeşididir. İçindeki widget’ı baz alan ve dikdörtgen bir gövdeye sahip bir butondur. Benzer şekilde, onPressed ( ) { } ve child property’lerinin kullanılmasını zorunlu tutar. Diğer property’ler için ElevatedButton resmi dökümanlarından faydalanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Center(child: Text("Buttons")), ), body: Center( child: ElevatedButton( onPressed: () {}, child: Text( "ElevatedButton", style: TextStyle( fontSize: 25, color: Colors.black, fontWeight: FontWeight.w400), ), ), ), ), ), ); |
Çıktı:
FloatingActionButton Özellikleri
FloatingActionButton uygulamamızdaki birincil eylemi tetikleyen dairesel bir simge düğmesidir. Günümüz uygulamalarında en çok kullanılan buton tiplerinden biridir. Bu düğmenin içerik eklemek, yenilemek veya paylaşmak için kullanıldığını görülebilir.
Ayrıca Flutter, ekran başına en fazla bir FloatingActionButton düğmesi kullanılmasını önermektedir. FloatingActionButton yaygın olarak Scaffold’da kullanılır.
onPressed ( ) { } property’sinin kullanılmasını zorunlu tutar. Diğer property’ler için FloatingActionButton resmi dökümanlarından faydalanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Center(child: Text("Buttons")), ), floatingActionButton: FloatingActionButton( onPressed: () {}, child: Icon(Icons.add, color: Colors.grey.shade900), backgroundColor: Colors.red.shade400, hoverColor: Colors.blue, ), ), ), ); |
Çıktı:
IconButton Özellikleri
IconButton, Material widget’ına yazdırılan bir resimdir. Flutter kullanıcı arayüzüne malzeme tasarımı hissi veren kullanışlı bir pencere öğesidir.
onPressed ( ) { } ve icon property’lerinin kullanılmasını zorunlu tutar. Diğer property’ler için IconButton resmi dökümanlarından faydalanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import 'package:flutter/material.dart'; void main() => runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Center(child: Text("Buttons")), ), body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ IconButton( onPressed: () {}, icon: Icon(Icons.mail), iconSize: 44.0, color: Colors.red, ), Text("Mail") ], ), ), ), ), ); |
Çıktı:
DropdownButton Özellikleri
Halihazırda seçili olan öğeyi ve birden çok seçenek arasından bir öğeyi seçmek için kullanılan bir menüyü açan bir oku gösterir. Uygulamamızda herhangi bir yere yerleştirebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _title = 'DropdownButton'; @override Widget build(BuildContext context) { return MaterialApp( title: _title, home: Scaffold( appBar: AppBar(title: const Text(_title)), body: const Center( child: MyStatefulWidget(), ), ), ); } } class MyStatefulWidget extends StatefulWidget { const MyStatefulWidget({Key? key}) : super(key: key); @override State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); } class _MyStatefulWidgetState extends State<MyStatefulWidget> { String dropdownValue = 'Python'; @override Widget build(BuildContext context) { return DropdownButton<String>( value: dropdownValue, icon: const Icon(Icons.arrow_downward), elevation: 20, style: const TextStyle(color: Colors.deepPurple), underline: Container( height: 5, color: Colors.red, ), onChanged: (String? newValue) { setState(() { dropdownValue = newValue!; }); }, items: <String>['Python', 'Dart', 'Flutter', 'JavaScript'] .map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), ); } } |
Çıktı:
Teşekkür ederim.
🙏