前提・実現したいこと
FlutterでタブバーをAppBarではなくページ中央に配置したいと思っています。
縦スクロール可能なページ内にタブを配置し、そのタブとタブが制御するウィジェットが横スクロールできる画面を実装したいと思っています。
試したこと
下記コードで、AppBarにタブバーを表示できることは確認済みです。
dart
1import 'package:flutter/material.dart'; 2 3void main() { 4 runApp(const TabBarDemo()); 5} 6 7class TabBarDemo extends StatelessWidget { 8 const TabBarDemo({Key? key}) : super(key: key); 9 10 11 Widget build(BuildContext context) { 12 return MaterialApp( 13 home: DefaultTabController( 14 length: 3, 15 child: Scaffold( 16 appBar: AppBar( 17 bottom: const TabBar( 18 tabs: [ 19 Tab(icon: Icon(Icons.directions_car)), 20 Tab(icon: Icon(Icons.directions_transit)), 21 Tab(icon: Icon(Icons.directions_bike)), 22 ], 23 ), 24 title: const Text('Tabs Demo'), 25 ), 26 body: const TabBarView( 27 children: [ 28 Icon(Icons.directions_car), 29 Icon(Icons.directions_transit), 30 Icon(Icons.directions_bike), 31 ], 32 ), 33 ), 34 ), 35 ); 36 } 37} 38
期待することは、このタブバーをAppBarから切り離して画面中央部に表示し、スクロール等で上下に動かせるページウィジェットの中に表示させたいと思っています。
試したところ動作せず
- homeプロパティにColumnウィジェットを設定し、そのメンバにページウィジェット等を含める
- TabbarとTabbarViewをColumnのメンバに設定してhomeプロパティに設定
補足情報(FW/ツールのバージョンなど)
- Flutter: 2.2.3
- Dart: 2.13.4
あなたの回答
tips
プレビュー