Flutter ile bizlere yardımcı olması için IOS veya Android app ler için kullanılan menü çeşitidir . Bottom Navigation Bar’ı diğer menülerden ayıran yanı ise küçültülmüş ekranda değil sayfanın altında gözükmesidir ve bu sayfalar arası geçişi kolaylaştırmaktadır. Buyurun birlikte bir göz atalım ;
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { static const String _title = 'Flutter kod deneme'; @override Widget build(BuildContext context) { return MaterialApp( title: _title, home: MyStatefulWidget(), ); } } class MyStatefulWidget extends StatefulWidget { MyStatefulWidget({Key key}) : super(key: key); @override _MyStatefulWidgetState createState() => _MyStatefulWidgetState(); } class _MyStatefulWidgetState extends State { int _selectedIndex = 0; static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold); static const List _widgetOptions = [ Text( 'Index 0: Ana Sayfa', style: optionStyle, ), Text( 'Index 1: İş', style: optionStyle, ), Text( 'Index 2: Okul', style: optionStyle, ), ]; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('NavBar Deneme'), ), body: Center( child: _widgetOptions.elementAt(_selectedIndex), ), bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'AnaSayfa', ), BottomNavigationBarItem( icon: Icon(Icons.business), label: 'İş', ), BottomNavigationBarItem( icon: Icon(Icons.school), label: 'Okul', ), ], currentIndex: _selectedIndex, selectedItemColor: Colors.amber[800], onTap: _onItemTapped, ), ); } }
Bir yorum bırak