iOS本日はFlutterのTabBarとTabBarViewについて学習します。iOSでいえばスマートニュースやグノシーみたいなニュース系アプリに使われているトップ画面のメニューバーみたいなUIを実現できます。TabBarの基本的な書き方TabBarの基本的な書き方は次の通りです。上記で登場したTabクラスのインスタンスの作成方法は次の通りです。[Textウィジェット])これでTabの部分のインスタンスが作成できます。次にTabBarViewの基本的な書き方です。)このように見るとTabBarとTabBarViewにはTabControllerというインスタンスが必要なのが分かります。Controllerという命名なくらいなのでTabControllerはTabとTabBarViewの架け橋的な存在なのが分かりますね。)ここで見慣れないTickerProviderというクラスが初めて登場します。TickerProviderとはアニメーションのコールバックに用いれるTickerクラスを生成するものらしいです。これによって生成されるTabBarViewの部分が横スクロールすることを実現させているそうです。TabBarViewは横スクロールがデフォルトで実装されているぽいですね。練習用のサンプルソースコードを書いていこうと思います。}}こちらをビルドして実行すると次のような画面が表示されます。HomeNewsSettinghome画面News画面Setting画面このように3画面が表示されます。それぞれのタブをタップするとスクロールしてそれぞれの画面に遷移しているように見えます。これでTabBarViewが実装できたことを確認できました。本日はTabBarViewの基本的な使い方について学習しました。画面遷移の方法について学習しました。本日...2020-02-04Flutterで画面遷移に使うNavigatorについて学習する本日は複数画面の切り替え機能である「ナビゲーション機能」に...2020-02-02FlutterのTabbarであるBottomNavigationBarについて学習する今回はiOSでいうところのUITabbarControllerに当たるBottomNavi...2020-01-29FlutterでListViewをタップした時の挙動を実装する前回はListViewの表示について学習しました。»プロフィール都内で働くiOSエンジニアtamappeです。EntrytamappeのQiita投稿スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。