Flutter Doc JP の BottomNavigationBar で詰まった話（2024）

エラーだらけだが？？？

## 書いた人
今まではPHPによるサーバサイドの開発に主に従事していましたが、
唐突にスマホアプリ開発の勉強したいな、と思い立ってFlutter（Dart）の勉強を始めた超超初学者です。

## 本題
[こちらの記事](https://qiita.com/saberkohei/items/a258b4a95e5f5801877c)を参考にしてみましたがそれでも解消せず。
ちゃんとエラーメッセージ見ながら解消していきましょう。（当たり前体操）

結論、3箇所が引っかかっていました。

### ①MainPageクラスを指定する必要がある

これは上記記事にも記載があります。
何でこんな大事なことがガイドの方に記載無いのかは不明・・・

以下を追加。
```dart
class MainPage extends StatefulWidget{
  @override
  _MainPageState createState () => _MainPageState();
}
```

### ②BottomNavigationBarItemの引数の型が異なる

Flutter1.22から型が変わったとのことです。
なので2024年6月時点で最新バージョンから学習を始め、ドキュメントの通りにコピペしていくと詰みます。
`Title型のtitle`ではなく`String?型のlabel`が正しいです。

修正前：
```dart
items: <BottomNavigationBarItem>[
  BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
  ...
],
```

修正後：
```dart
items: <BottomNavigationBarItem>[
  BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
  ...
],
```

### ③引数が渡されていない問題
呼び出し元で`key`を渡していないので引数`key`の型をNULL許容に、`color`と`title`が曖昧なので必須にしてやります。

修正前：
```dart
PageWidget({Key key, this.color, this.title}) : super(key: key);
```

修正後：
```dart
PageWidget({Key? key, required this.color, required this.title}) : super(key: key);
```

<details><summary>ということで、修正後全体</summary>

```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget{
  @override
  _MainPageState createState () => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  int _currentIndex = 0;
  final _pageWidgets = [
    PageWidget(color:Colors.white, title:'Home'),
    PageWidget(color:Colors.blue, title:'Album'),
    PageWidget(color:Colors.orange, title:'Chat'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar'),
      ),
      body: _pageWidgets.elementAt(_currentIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.photo_album), label: 'Alubm'),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chat'),
        ],
        currentIndex: _currentIndex,
        fixedColor: Colors.blueAccent,
        onTap: _onItemTapped,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  void _onItemTapped(int index) => setState(() => _currentIndex = index );
}

class PageWidget extends StatelessWidget {
  final Color color;
  final String title;

  PageWidget({Key? key, required this.color, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Center(
        child: Text(
          title,
          style: TextStyle(
            fontSize: 25,
          ),
        ),
      ),
    );
  }
}
```
</details>


## 参考
https://qiita.com/saberkohei/items/a258b4a95e5f5801877c

https://minpro.net/bottomnavigationbaritem-deprecated

https://engineering.webstudio168.jp/2022/02/flutter-main-dart-key-question/