bottomNavigationBar
MaterialApp({ title,theme, home: Scaffold({ appBar, body, floatingActionButton, floatingActionButtonLocation, floatingActionButtonAnimator, persistentFooterButtons, drawer, endDrawer, bottomNavigationBar, bottomSheet, backgroundColor, resizeToAvoidBottomPadding, resizeToAvoidBottomInset }), })
açıklama
Scaffold un(ekranın) alt kısmına sayfalar arasında geçiş sağlamak için kullanılan Navigasyon barı oluşturur.
konum
MaterialApp({ title,theme, home: Scaffold({ appBar, body, bottomNavigationBar,...}), })
parametreler
MaterialApp({
title,
theme,
home: Scaffold({
appBar,
body,
floatingActionButton,
floatingActionButtonLocation,
floatingActionButtonAnimator,
persistentFooterButtons,
drawer,
endDrawer,
bottomNavigationBar,
bottomSheet,
backgroundColor,
resizeToAvoidBottomPadding,
resizeToAvoidBottomInset..
}),
})
örnek uygulama
import 'package:flutter/material.dart';
import 'tab_screen.dart';
class TabsDemoScreen extends StatefulWidget {
TabsDemoScreen() : super();
final String title = "Flutter Bottom Tab demo";
@override
_TabsDemoScreenState createState() => _TabsDemoScreenState();
}
class _TabsDemoScreenState extends State {
int currentTabIndex = 0;
List tabs = [
TabScreen(Colors.green),
TabScreen(Colors.orange),
TabScreen(Colors.blue)
];
onTapped(int index) {
setState(() {
currentTabIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: tabs[currentTabIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTapped,
currentIndex: currentTabIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text("Messages"),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("Profile"),
)
],
),
);
}
}
dosya adı: tab_screen.dart
import 'package:flutter/material.dart'; class TabScreen extends StatelessWidget { final Color color; TabScreen(this.color); @override Widget build(BuildContext context) { return Container( color: color, ); } }