どのようにタブバーを作成するフラッタ完全なガイドのタブバーを作成する- flutter隅.コム

ここのソースコードによる完全な記事
こんにちはみんなどのようにあなたはすべてですか?この動画はお気に入りから削除されています.今日、我々はTabbarを作るためにフラッター完全なガイドでTabbarをつくる方法を学びそうです.
タブバーは1つ以上のタブを含むことができます.タブバーを含むAppBarがどのように見えるかは、ここにあります.非常に簡単な方法で我々のフラッタアプリでTabBarを作成します.だからあなたの時間を無駄にせず.この記事を始めましょう.
タブバーを作成するために完全なガイドのタブバーを作成する方法
フラッタのタブバーを作成する方法
まずは輸入素材.あなたのアプリケーションのメインでダーツパッケージ.ダートファイル.

import 'package:flutter/material.dart';
Create Stateless widget and Define in runApp.
void main() => runApp(MyApp());
Create new StateLess Widget named MyApp And Define Home like below.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

我々のチュートリアルのTabBarビューに進むことができます.
StatHomekerProviderStateMixinを使用して、Help PremiPageStateを使用してMyHomePageという名前のステートセットウィジェットを作成します.以下同様です.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
}

この完全なタブバーを作成するには
タブバー
タブバーの制御装置
タブバーの眺め
まず第一に、私たちのLang HomePageStatesのScaffoldクラスを定義してください、そして、我々の足場で、タブバー・ビューを作ることができます.
私たちのAppBarでは、我々は、このプロパティとしてBottomプロパティのようなプロパティがあります.
底は、我々のAppBar底です.
底では、我々はtabbarクラスを使用します、そして、tabbarは多くの特性を持ちます、しかし、我々はタブ、コントローラ、指標色だけを探しています.以下のように.

      appBar: AppBar(
        title: Text("Tab Bar Example - FlutterCorner"),
        backgroundColor: Colors.black,
        bottom: TabBar(
          unselectedLabelColor: Colors.white,
          labelColor: Colors.green,
          tabs: [
            Tab(
              child: Text("CALLS"),
            ),
            Tab(
              child: Text("CHATS"),
            ),
            Tab(
              child: Text("CONTACTS"),
            )
          ],
          controller: _tabController,
          indicatorColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.tab,
        ),
        bottomOpacity: 1,
      ),

TabBarの後、我々は我々のアプリでこのように表示することができます.
タブバーを作成するために完全なガイドのタブバーを作成する方法
今、Tabbarのための私達の機能に移動することができます.
以下のようにtabcontrollerを定義します.

  TabController _tabController;

initstateでtabcontrollerを初期化した後に.

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

長さ:3は、3つのタブレイアウトを持っていることを意味します.
その後、すべてのタブバー本体を作成する必要があります.
だから、私たちの体にtabbarviewを使用するつもりです.TabBarViewには、子供とコントローラのプロパティがあります.それを使用します.

      body: TabBarView(
        children: [
          Center(child: Text("Call Tab Bar View")),
          Center(child: Text("Chats Tab Bar View")),
          Center(child: Text("Contacts Tab Bar View")),
        ],
        controller: _tabController,
      ),

私はちょうどそれがタブを確認するセンターテキストを追加します.必要に応じてカスタマイズできます.
ここで私の完全なソースコードです.バッター理解のために.
ここのソースコードによる完全な記事