Flutter开发笔记05 - 开发底部导航栏

 GitHub Demo 地址：https://github.com/LINGLemon/lxf_flutter_demo

这里是使用iOS样式的底部导航栏控件CupertinoTabScaffold

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: CupertinoTabScaffold(
            tabBar: CupertinoTabBar(
              currentIndex: 0,
              items: [
                _bottomNavigationBarItem(Icons.list, "样例"),
                _bottomNavigationBarItem(Icons.settings, "设置"),
              ],
            ),
            tabBuilder: (context, index) {
              switch (index) {
                case 0:
                  return const ExampleListPage();
                default:
                  return const BlankPage();
              }
            },
          ),
        );
  }

  BottomNavigationBarItem _bottomNavigationBarItem(
      IconData icon, String title) {
    return BottomNavigationBarItem(
      icon: Icon(icon),
      activeIcon: Icon(icon),
      label: title,
    );
  }
}