Bu yazımda, tabbar widgetinin Flutter’da nasıl çalıştığını öğreneceğiz. TabBar bir veya daha fazla sekme içerebilir. Flutter uygulamasında tabbar oluşturmak için adım adım ilerleyeceğiz.
1. material.dart paketini uygulamanızın main.dart dosyasında içe aktarın.
import 'package:flutter/material.dart';
2. void main runApp () metodunu oluşturun ve MyApp sınıfını çağırın.
void main() {
runApp(MyApp());
}
3. MyApp sınıfı için durumsuz (Stateless) widget oluşturun.
class MyApp extends StatelessWidget {
}
4. MyApp sınıfında MaterialApp widgetini oluşturun ve home bölümüne DefaultTabController ekleyin.
- DefaultTabController : Kaydırılabilir tabbar görünümü oluşturmak için kullanılır.
- length : Sekme sayısı.
- tabs : Sekmeler için başlık.
- title : Appbar başlığı.
- TabBarView : Ekranları çağırmak için.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(text: 'Birinci'),
Tab(text: 'İkinci',),
Tab(text: 'Üçüncü'),
],
),
title: Text('AppBar Başlığı'),
),
body: TabBarView(
children: [
FirstScreen(),
SecondScreen(),
ThirdScreen()
],
),
),
),
);
}
}
5. Birinci sayfa için classı FirstScreen olan durumsuz (StatelessWidget) widget oluşturun.
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('Birinci sayfa için',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
6. İkinci sayfa için classı SecondScreen olan durumsuz (StatelessWidget) widget oluşturun.
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('İkinci sayfa içi',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
7. Üçüncü sayfa için classı ThirdScreen olan durumsuz (StatelessWidget) widget oluşturun.
class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('Üçüncü sayfa için',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
8. main.dart dosyası için eksiksiz tabbar kaynak kodu;
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(text: 'Birinci'),
Tab(text: 'İkinci',),
Tab(text: 'Üçüncü'),
],
),
title: Text('Tabbar Başlığı'),
),
body: TabBarView(
children: [
FirstScreen(),
SecondScreen(),
ThirdScreen()
],
),
),
),
);
}
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('Birinci sayfa için',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('İkinci sayfa için',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
class ThirdScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child:
Text('Üçüncü sayfa için',
style: TextStyle(fontSize: 21),)
)
)
);
}
}
Kod Çıktısı:
