プログラミング

FlutterでTwitterクライアント作成②フッター追加

2020-03-22




前回、FlutterでTwitterのクライアントアプリを作ろうということでヘッダーを追加したところまでやりました。

FlutterでTwitterクライアント作成①ヘッダー追加

前回、Flutterの環境作成と開発者ツールの導入をしました。 さて、本格的に作るとして何しよう? …特に浮かばないので、おなじみTwitterのクライアントを作ってみようと思います。 今回はプロジェ ...

続きを見る

今回はフッターを追加して画面を切り替えられるようにしたいと思います。

フッターを追加する

footer.dartを追加

ヘッダーと同じように、フッターも別ファイルに書きます。
footer.dartを作成して以下を追加。

ヘッダーと同じようにStatefulWidgetを使ってます。
フッターの場合はBottomNavigationBarの中にBottomNavigationBarItemを追加して返します。

Twitterアプリを見るとアイコンの下にテキストがなかったので、同じように省略したらエラーになってしまいました。。。
BottomNavigationBarItemを使う場合はtitle必須のようです。

最後の2行は色の指定です。

main.dartを修正

作成したフッターを読み込みます。
ヘッダーと同じように修正します。
※コード一部省略

保存するとこんな感じ。
現段階だと、タップはできるけど何も変化しない状態です。

フッターのボタンをタップで切り替える

footer.dartを修正します。
こちらを参考にしました。

全体はこんな感じ。

アイコン情報の定義

アイコンのtitleとIconをそれぞれMapで紐づけました(_footerIcons)
本当はこれだけで済ませたかったんですが。。。

今選択しているIconのインデックスが必要だったので、別途アイコンの順番を定義しました(_footerItemOrder)
並び順を変える場合はこっちの順番だけ変えればいいようになってます。

アイコンを作成する処理

この2つのメソッドでアイコンを作成しています。

initState()はクラスのコンストラクターが呼び出された直後に1回だけ呼ばれます。
ここで_footerItemOrderに定義された順番通りにアイコン名を渡して_CreateIconを実行。

_CreateIconは受け取ったアイコン名(ホームとか)を使ってBottomNavigationBarItemを作成。
_bottomNavigationBarItemsに必要なアイコンをすべて追加します。

アイコンのタップイベント

BottomNavigationBarはタップされたときに該当アイコンのindexを返します。
ここではそれを受け取って、_selectedIndexに代入。
値を保持しているだけです。

フッターの作成

BottomNavigationBarを作成します。
selectedItemColorとunselectedItemColorをそれぞれ指定することで、タップしたときのアイコンの色を自動で切り替えてくれます。

注意点

さて、ここまでを保存するのですが。
今回は1回しか呼ばれないinitState()の処理があるので、アプリの再起動が必要です。
Hot Restartを実行すると…。

アイコンタップでフッターの状態が切り替わるようになりました。

フッタータップで画面を切り替える

フッターアイコンと連動して画面を切り替えられるようにします。

画面を作成する

画面遷移したことがわかるくらいの簡単な画面を4画面用意します。
routesフォルダを作成し、以下4ファイルを追加しました。
※routeとはFlutterで画面を指します

  • routes/home_route.dart
  • routes/search_route.dart
  • routes/notice_route.dart
  • routes/message_route.dart

中身はimportを追加し、クラス名と文字の部分を画面に合わせて変えただけ。
ちなみに通知用画面はnotificationと訳されることが多いと思いますが、Flutterの既存クラスと重複してエラーが出るのでnoticeとします。

footer.dartをroot.dartに変更する

このファイルで各画面に遷移するので、ファイル名をfooter.dartからroot.dartに変更します。
ついでにクラス名もFooter→RootWidgetに変更します。

1つずつ変更するとミスが起きやすいので、全置換しましょう。
Ctrl + Hで置換用のウィンドウが表示されます。

ファイル名を変更したので、main.dartでエラーが出るようになりました。
こちらもファイル名を修正します。

アイコンと画面を紐づける

アイコンがタップされたときに画面を切り替えられるようにします。
以下変更したところだけ。

作成したroutesを読み込みます。

_RootWidgetIconsにrouteの情報を追加。
分割して情報を管理するのが嫌だったので、Mapで連想配列を入れ子にしました。

_RootWidgetIconsの情報の取り出し方を修正。

returnをScaffoldにして、bodyでHome()などを呼べるようにしました。

保存すると、フッタータップで画面が切り替わるようになりました。

 

ヘッダーの文字を画面に合わせて変える

せっかく画面が切り替わるようになったのに、ヘッダーのタイトルがホームのままになっています。
画面に合わせてタイトルを変更するようにします。

まずはheader.dartを修正します。

titleでheaderTitleを使うようにします。

次に各routeファイルを修正します。

home_route.dartを修正。
他のファイルも同じように修正します。

これで保存してみると…。
画面と一緒にヘッダータイトルも切り替わるようになりました。

 

フッターもとりあえず完成

まだ中身は何もないですが、なんとなくアプリっぽくなってきました。
それにしてもFlutterはUI周りの処理が簡単でいいですね。

今回はここまで。
次回はホーム画面の中身を作っていこうと思います。

FlutterでTwitterクライアント作成③タイムライン取得

前回の続き。 今回はホーム画面にTwitterのタイムライン情報を読み込んでみます。 目次1 まずはお試し1.1 http通信を使えるようにする1.2 http通信して情報を表示する1.2.1 パッケ ...

続きを見る

ここまでのコードはGitHubにあるのでどうぞ。

とにかくリファレンスを読め

Flutterはまだ日本語の情報が少なくて、基本は英語のリファレンスに頼ることになります。
※昔よりはだいぶ増えたらしいですが

もちろん日本人が書いたソースも参考にはなりますが、力業で実装してたりもするので要注意。
こんなめんどくさいことしないといけないの?って思ったらリファレンスを読んだほうがいいです。
実はライブラリ側で便利に使えるpropertyが用意されてたりします。

例えば今回参考にしたサイトではアイコンのアクティブ状態を切り替えるのにメソッド2つ作ってましたけど

リファレンス読んだらbuildに2行追加するだけで実現できました。

Flutterはまだまだ発展途上なので、今不便なことも将来的には簡単になるかも?
しばらくはFlutterのバージョンが上がるたびにリファレンス読んだ方がいいかもしれませんね。

-プログラミング
-,

© 2024 そんなこと猫でもできる Powered by AFFINGER5