Flutter Widget Listesi&BottomNavigationBar

Bu yazımızda neler yapacağız hemen ondan bahsetmek istiyorum. Flutter ile çok basit düzeyde bir uygulama yapacağız. Bu uygulamada BottomNavigationBar kullanarak küçük bir menü yapmanın yanı sıra widget tipinde liste oluşturacağız. Oluşturacağımız bu listenin içine bir kaç widget atayıp, oluşturduğumuz alt menü yani BottomNavigationBar'da kullanacağız.

Uygulama Oluşturun.

Öncelikle kullanacağınız editörde yeni bir uygulama açıp uygulama adını belirleyin. Uygulamayı oluşturduğunuzu varsayarak devam ediyorum

Uygulamayı ilk oluşturduğumuzda "main.dart" isimli dosyamızda bizi örnek bir flutter uygulaması karşılıyor. Öncelikle bu sayfanın tamamını silin.

Sildikten sonra aşağıdaki adımları takip edin

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { 
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Projem',
theme: ThemeData( primarySwatch: Colors.green, ),
home: AnaSayfa(),
);
}
}
import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Projem',
theme: ThemeData( primarySwatch: Colors.green, ),
home: AnaSayfa(),
);
}
}
class AnaSayfa extends StatefulWidget { @override _AnaSayfaState createState() => _AnaSayfaState(); } 
class _AnaSayfaState extends State<AnaSayfa> {
int _aktifIcerikNo = 0;
List<Widget> _icerikler;
@override void initState() {
super.initState();
_icerikler = [
Text("BURADA ANASAYFA İÇERİKLERİ YER ALIR"),
Text("BURADA SEPET İÇERİKLERİ YER ALIR"), ]; }
@override Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.red[400]),
elevation: 0.0,
backgroundColor: Colors.white,
centerTitle: true,
title: Text( "widget Listesi ve BottomNavigationBar",
style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.grey),
),
),
body: _icerikler[_aktifIcerikNo],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _aktifIcerikNo,
selectedItemColor: Colors.red[400],
unselectedItemColor: Colors.grey[600],
items: [ BottomNavigationBarItem(
// ignore: deprecated_member_use
icon: Icon(Icons.home), title: Text("ANASAYFA")), BottomNavigationBarItem( // ignore: deprecated_member_use icon: Icon(Icons.shopping_cart),
title: Text("SEPET"))
],
onTap: (int tiklananButonPozisyonNo) {
setState(() {
_aktifIcerikNo = tiklananButonPozisyonNo; });
},
),
);
}
}
List<Widget> _icerikler;
@override void initState() { 
super.initState();
_icerikler = [
Text("BURADA ANASAYFA İÇERİKLERİ YER ALIR"),
Text("BURADA SEPET İÇERİKLERİ YER ALIR"),
];
}
bottomNavigationBar: BottomNavigationBar( 
currentIndex: _aktifIcerikNo,
selectedItemColor: Colors.red[400],
unselectedItemColor: Colors.grey[600],
items: [
BottomNavigationBarItem( // ignore: deprecated_member_use icon:
Icon(Icons.home),
title: Text("ANASAYFA")),
BottomNavigationBarItem( // ignore: deprecated_member_use icon: Icon(Icons.shopping_cart),
title: Text("SEPET"))
],
onTap: (int tiklananButonPozisyonNo) {
setState(() {
_aktifIcerikNo = tiklananButonPozisyonNo;
});
},
),
bottomNavigationBar: BottomNavigationBar()
selectedItemColor: Colors.red[400],
unselectedItemColor: Colors.grey[600],
items: [ 
BottomNavigationBarItem( // ignore: deprecated_member_use icon: Icon(Icons.home),
title: Text(“ANASAYFA”),
),
onTap: (int tiklananButonPozisyonNo) { 
setState(() {
_aktifIcerikNo = tiklananButonPozisyonNo;
});
int _aktifIcerikNo = 0;
body: _icerikler[_aktifIcerikNo],

EKRAN GÖRÜNTÜLERİ

Bir yazının daha sonuna geldik umarım sizler için bilgilendirici ve faydalı olmuştur.Eksik ya da hatalı olarak gördüğünüz yerleri tarafıma lütfen bildirin!

www.abdullahtas.net

info@abdullahtas.net

İyi çalışmalar =)

Bu uygulamanın tüm kodlarına aşağıdaki linkten ulaşabilirsiniz.

gistcode: https://gist.github.com/abdullah017/45d135fb3e583adc49b522463655d1e9

Bilgisayar Programıcısı-AÖF Yönetim Bilişim Sistemleri/DART&FLUTTER

Bilgisayar Programıcısı-AÖF Yönetim Bilişim Sistemleri/DART&FLUTTER