底部导航栏

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,
            ),
        ),
    );
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容