TabBarの基本的な使い方
Flutterでは、TabBarウィジェットを使用してタブを作成することができます。以下に基本的な使い方を示します。
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
)
このコードは、3つのタブを作成します。それぞれのタブには、車、公共交通機関、自転車のアイコンが表示されます。
TabBarウィジェットは通常、AppBarウィジェットのbottomプロパティとして設定されます。そして、TabBarViewウィジェットと一緒に使用され、各タブが選択されたときに表示するウィジェットを定義します。
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
)
このコードは、3つのタブを持つTabBarを作成し、各タブが選択されたときに対応するアイコンを表示します。DefaultTabControllerウィジェットは、タブ間の切り替えを管理します。lengthプロパティは、タブの数を指定します。
以上が、FlutterでのTabBarの基本的な使い方です。次のセクションでは、TabBarを左寄せにする方法について説明します。
TabBarを左寄せにする方法
Flutterでは、TabBarウィジェットのタブを左寄せにするためには、TabBarウィジェットをAlignウィジェットでラップします。以下に基本的な使い方を示します。
Align(
alignment: Alignment.centerLeft,
child: TabBar(
isScrollable: true,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
)
このコードは、3つのタブを作成し、それらを左寄せに配置します。AlignウィジェットのalignmentプロパティをAlignment.centerLeftに設定することで、子ウィジェット（この場合はTabBar）を左寄せにします。
ただし、この方法ではTabBar全体が左寄せになりますが、タブ自体はまだ中央寄せのままです。これは、TabBarウィジェットがデフォルトでタブを均等に分布させるためです。タブ自体を左寄せにするには、TabBarウィジェットのisScrollableプロパティをtrueに設定します。これにより、タブがスクロール可能になり、タブが自然に左寄せになります。
以上が、FlutterでのTabBarを左寄せにする基本的な方法です。次のセクションでは、カスタム開始位置でTabBarを左寄せにする方法について説明します。
カスタム開始位置でTabBarを左寄せにする方法
Flutterでは、TabBarウィジェットのタブを特定の位置から開始するためには、Paddingウィジェットを使用します。以下に基本的な使い方を示します。
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 50.0),
child: TabBar(
isScrollable: true,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
)
このコードは、3つのタブを作成し、それらを左寄せに配置します。ただし、タブは50ピクセルのパディングを持つため、左端から50ピクセルの位置から開始します。PaddingウィジェットのpaddingプロパティをEdgeInsets.only(left: 50.0)に設定することで、子ウィジェット（この場合はTabBar）の左側に50ピクセルのパディングを追加します。
以上が、Flutterでのカスタム開始位置でTabBarを左寄せにする方法です。次のセクションでは、TabBarのスクロール可能性と左寄せについて説明します。
TabBarのスクロール可能性と左寄せ
Flutterでは、TabBarウィジェットのisScrollableプロパティをtrueに設定することで、タブがスクロール可能になります。これにより、タブが自然に左寄せになります。以下に基本的な使い方を示します。
TabBar(
isScrollable: true,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
)
このコードは、3つのタブを作成し、それらを左寄せに配置します。isScrollableプロパティをtrueに設定することで、タブがスクロール可能になり、タブが自然に左寄せになります。
ただし、この方法ではタブ自体は左寄せになりますが、TabBar全体はまだ中央寄せのままです。TabBar全体を左寄せにするには、前述のようにAlignウィジェットを使用します。
以上が、FlutterでのTabBarのスクロール可能性と左寄せについての説明です。次のセクションでは、PreferredSizeとAlignウィジェットを使用したTabBarの左寄せについて説明します。
PreferredSizeとAlignウィジェットを使用したTabBarの左寄せ
Flutterでは、PreferredSizeとAlignウィジェットを組み合わせて、TabBarを左寄せにすることができます。以下に基本的な使い方を示します。
PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Align(
alignment: Alignment.centerLeft,
child: TabBar(
isScrollable: true,
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
)
このコードは、3つのタブを作成し、それらを左寄せに配置します。PreferredSizeウィジェットは、その子ウィジェットのサイズを指定することができます。この場合、preferredSizeプロパティをSize.fromHeight(kToolbarHeight)に設定することで、TabBarの高さを指定します。
AlignウィジェットのalignmentプロパティをAlignment.centerLeftに設定することで、子ウィジェット（この場合はTabBar）を左寄せにします。
以上が、FlutterでのPreferredSizeとAlignウィジェットを使用したTabBarの左寄せについての説明です。これらの方法を組み合わせることで、さまざまなレイアウトと配置を実現することができます。次のセクションでは、さらに詳細なカスタマイズ方法について説明します。