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 {
  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

KAPAT
%d blogcu bunu beğendi: