iOS本日は複数画面の切り替え機能である「ナビゲーション機能」について学習します。ナビゲーション機能はNavigatorというクラスが用意されているようです。iOSでいうところのUINavigationControllerみたいなものだと推測しています。クラスについて端的に説明するとNavigatorクラスは次の2つのメソッドを覚えればいいそうです。[Route]);前の画面に戻る時Navigator.pop([BuildContext]);サンプルコードについてでは早速サンプルコードを書いていきます。second_screen.dartの3つのクラスを使っています。画面遷移の方法としてBottomNavigationBarを作成してiOSでいうところのUITabbarControllerを使ってTabbarを設置しました。プロジェクトファイルの構成これでアプリをビルドすると下の方は画面が表示されます。下のタブバーのボタンをタップするとそれぞれの画面が表示されます。PageRouteのサブクラスです。PageRouteというのはRouteのサブクラスです。Routeのサブクラスです。PageRouteクラスは、現在の画面情報だけでなくプッシュ先の画面情報も保存しているクラスになります。簡単に言えば、画面情報や移動先の情報を保存している感じになります。MaterialPageRouteの呼び出しにはbuilderという引数があります。builderはWidgetBuilderという関数シグネーチャーを引数に指定します。今回はSecondScreenにプッシュさせますのでこちらを指定しています。画面遷移させることができます。「ルーティング」の概念に位置づけれられいるそうです。画面遷移の解説がされています。これを見ればWebでいうところの「ルーティング」と一緒ということが分かります。flutter.ctrnost.comということで今回は以上になります。iOS今回はiOSでいうところのUITabbarControllerに当たるBottomNavigationBarについて学習します。AppBarのように画面の上側ではなく、下側にもバーを表示させたいことがあります。BottomNavigationBarが用意されています。BottomNavigationBarの基本は以下の通りです。)それぞれのプロパティの解説は次のようになります。現在、選択されているindex。アイコンをタップしたときの処理。アイコンをタップしたときの処理はonTapに入る関数内で書きます。この関数にはタップした項目のindexを示す引数が必要で以下のように定義すれば大丈夫です。処理内容}ただタップした項目を選択状態にするためには、この引数のvalueとBottomNavigationBarの引数currentIndexの値が同じにする必要があります。そのため、変数を用意してメソッドの中で変数を更新させcurrentIndexにも同じ変数を設定する必要があります。サンプルコードについてそれではBottomNavigationBarに関するサンプルコードを書いていきます。}}このサンプルコードを実行すると次のような画面が表示されます。みたいなタブバーが表示されて、アイコンをタップすると画面が切り替わるのが分かります。本日はBottomNavigationBarについて学習しました。これだけではアイコンをタップしたことで文字を変更できるだけで画面遷移しているわけではありません。ルーティングについて学ぶ必要があるそうです。iOS今回はFlutterのScrollViewことSingleChildScrollViewについて学習します。SingleChildScrollViewは特別な設定をしなくてもウィジェットを中に入れておくだけで、そのサイズに応じて自動的にスクロール表示ができるウィジェットです。Scroll用のウィジェットになります。これを使えば前回のような下側のバナーエラーが表示されることがなくなります。SingleChildScrollViewについてSingleChildScrollViewのインスタンスの生成方法についてです。)引数のchildの中にリストで表示させたいウィジェットを入れていきます。childに入れたウィジェットで画面内に収まらないサイズになると上下にスクロールできるようになります。iOSのUITableViewみたいにdelegateも必要ないのがとても新鮮です。サンプルコードを書いていきます。}}これをビルドすると下記のように画面が表示されます。SingleChildScrollViewのサンプル1SingleChildScrollViewのサンプル2実際にシミュレータなどで試して頂くと上下にスクロールできることが分かります。まで学習するとFlutterで有名なiOSアプリのレイアウトを真似して何かしらアプリを開発できるようになりそうですね。SingleChildScrollViewにGridViewを乗せればインスタグラムみたいなアプリのレイアウトをサクッと作れそうです。あとはiOSのTableViewみたいにheaderやfooterViewの作り方やカスタムなウィジェットをタップしたときの挙動を制御するためのやり方が分かれば動的な画面遷移も実装できるようになりそう。これらも学習していく予定です。iOS前回はListViewの表示について学習しました。実際のアプリ開発では画面の表示だけでなくそのUIをタップしたときの挙動も実装しなければならないことが多いです。今回はそのListViewで表示されているものをタップしたときの処理を実装していきます。ListViewの中にFlatButtonなどのButtonを追加してもいいですが、ListViewには専用のウィジェットListTileが用意されています。ListTileについてまずはListTileのインスタンスの生成の仕方について学びます。[その項目の選択状態を管理するフラグ。},これだけ覚えればListTileの基本はできたようなものです。実際にサンプルコードを見ていきます。}}以上がサンプルのコードになります。こちらをビルドすると次のスクショのように表示されます。onTapで処理が走ったあとにselectedの値がtrueであれば選択状態を表しているみたいです。今回はListViewの各項目にindexで数字の連番を張って、ウィジェットに_indexの変数をもたせて_indexとindexを比較して同じであれば項目が選択状態になるように実装しました。ここまででListViewとListTileのそれぞれの実装方法について学習できました。ListTileを実装してもその項目が画面上にすべて収まらないときにはエラーのバナーが見えてしまいますね。これはListViewにはスクロール機能がないために起きる現象なので、次回はスクロールできるウィジェットについて学習しようと思います。iOS本日はFlutterのListViewについて学習します。ListViewとは少し前に複数ウィジェットを配置するための縦に並べるColumnと横に並べるRowについて学習しました。ListViewはこのColumnに似ています。どちらかというとAndroidの知識があるとAndroidにすでにListViewがありますので役割自体はそのListViewと同じです。Columnはウィジェットを縦に並べるウィジェットですが、FlutterのListViewはリストを表示するためのウィジェットです。これを使うことで複雑な構造のウィジェットを構築することが容易になります。サンプルコードについて今回はSampleListViewを作成してリストを表示させます。}}これをビルドすると下記のような表示が見られます。ListViewを使ったサンプル今回はfor文を使ってTextを10回作成して表示させるようにしました。ListViewにTextを10回乗せて数字を表示させています。サンプルコードからListViewの基本形が次のようにわかります。<Widget>[],shrinkWrapは追加されたウィジェットの大きさを自動調整するかどうかのフラグです。今回は大きすぎたら自動調整するようにtrueと設定しました。あとはchildrenに必要なウィジェットをリストで渡してやればいいだけです。ListView自体はScroll機能がないのかScroll機能があるウィジェットは別にSingleChildScrollViewウィジェットとして存在しているみたいです。ちなみにListViewで画面に収まらないぐらいウィジェットを渡すとエラーみたいなバナーが表示されます。ListViewで画面に収まらないときの表示こちらの現象については今後調査してみたいと思います。本日はListViewについて学習しました。22:00FlutterのListViewについて学習するTweetもっと読むコメントを書く次のページプロフィール都内で働くiOSエンジニアtamappeです。EntrytamappeのQiita投稿スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。