フラッタータブバー基本

アプリの多くは、tabbarが付属しています.それはあなたがすぐにアプリをナビゲートするために参照してくださいアイコンバーです.
これらのタブバーのいくつかの例は、TwitterやInstagramアプリケーションで見つけることができます.

はい、私たちは今日フラッタでこれを作成する方法を学びます.

フラッタのタブバーを作成する

我々のbasic Flutter applicationから始めて、今日そこから働きましょう.私たちはlib/main.dartファイルですべてのコードをしています.
さあ、私たちの主な機能をtabbarを含むように修正しましょう.

void main() async {
  runApp(
    MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tabs Demo'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    ),
  );
}

これはフラッタのタブバーの最も基本的なセットアップです.あなたが見ることができるように、それはAppBarを活用し、それの底部を提供します.
この下部にはいくつかのアイコンを持つタブバーが含まれます.
それから、我々のアプリケーションの実際の体で、我々は等しい量の子供とともにtabbarviewを加えなければなりません.
これで、我々はアイコンをクリックすることもできますもスワイプでそれらをスクロール!

完全なコード例を見つけるために、GitHubからそれをダウンロードしてください.
デフォルトのフラッタのタブバーが上部に配置されていることに注意してください.後の記事では、どのように下部に設定する方法を見ていきます.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook