bottomNavigationBar

bottomNavigationBar

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

Flutter_Bottom_Tabs
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<TabsDemoScreen> {
  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,
    );
  }
}

Bir cevap yazın