底部导航栏

2019-10-16  本文已影响0人  CaptainRoy
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    return TabbarWidget();
  }
}

class TabbarWidget extends StatefulWidget {
    @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TabBarState();
  }
}

class TabBarState extends State<TabbarWidget> {
    int _selectedIndex = 0;
    static const TextStyle optionStyle = TextStyle(fontSize: 30.0,fontWeight: FontWeight.bold);
    static const List<Widget> _widgetOption = <Widget>[
        Text("Index 0 : Home",style: optionStyle,),
        Text("Index 1 : Business",style: optionStyle,),
        Text("Index 2 : School",style: optionStyle,),
    ];

    void _onItemTapped(int index) {
        setState(() {
          _selectedIndex = index;
        });
    }

    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
                title: Text("TabBar Demo"),
            ),
            body: Center(
                child: _widgetOption.elementAt(_selectedIndex),
            ),
            bottomNavigationBar: BottomNavigationBar(
                    items: <BottomNavigationBarItem>[
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home),
                            title: Text("Home"),
                        ),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.business),
                            title: Text("Business"),
                        ),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.school),
                            title: Text("School"),
                        ),
                    ],
                currentIndex: _selectedIndex,
                selectedItemColor: Colors.amber,
                onTap: _onItemTapped,
            ),
        ),
    );
  }
}
上一篇 下一篇

猜你喜欢

热点阅读