Flutter의 BottomNavigationBar 템플릿 코드

Flutter의 BottomNavigationBar 템플릿 코드


공식 문서대로지만,
· BottomNavigationBar를 위해서만, BottomNavigationBar의 페이지를 StatefulWidget로 만드는,
・BottomNavigationBar의 페이지의 Scaffold에는 body,BottomNavigationBar의 2개를 쓰고, AppBar를 각 페이지로 전환하고 싶은 경우는BottomNavigationBar의 페이지가 아니고 각 페이지에 쓰고,AppBar를 각 페이지로 전환하지 않아도 좋을 때는BottomNavigationBar의 페이지에 쓰기,
・전환용의 변수 selectedIndex, List 형식으로 pageList를 만들어 두는, 각 페이지에의 변수의 전달 방법을 모르기 때문에, global에 변수를 두어 두는지, Provider등의 상태 관리 방법을 채용하는,
・body에는 「pageList[selectedIndex]」를 두고, selectedIndex의 전환으로 페이지를 전환한다, currentIndex, onTap는 이하와 같이,
・material 디자인에는 대량의 아이콘이 준비되어 있다.
htps : // 아피. fぅ r. 에서 v/fぅ는 r/마테리아 l/이콘 s-cぁ s. HTML
・상기의 흐름은 나중에 바꾸면 약간 번거롭기 때문에 BottomNavigationBar의 레이아웃으로 앱을 만들고 싶은 경우는 처음부터 만드는 것,

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selectedIndex = 0;
  List<Widget> pageList = [
    TodoPage(),
    WeightPage(),
    MyPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pageList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.check_box),
              label: '入力',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.multiline_chart),
            label: 'グラフ',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '設定',
          ),
        ],
        currentIndex: selectedIndex,
        onTap: (int index) {
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }
}

class TodoPage extends StatefulWidget {...
class WeightPage extends StatefulWidget {...
class MyPage extends StatefulWidget {...