透明なアプリバーと下部のアプリバーを持つフラッターレイアウトを構築しようとしています. ただし、タブ間をスワイプできるようにしたいです。問題は、スワイプ可能なタブを使用できるが、本体がアプリ バーの下に収まらないことです。または、アプリ バーの下に本文を配置できますが、タブはスワイプできません。
Scaffold() ではなく Stack() を使用する実装を既に試しました。ただし、ボディ バーとアプリ バーを区別できないため、TabBarView がアプリ バーの前に配置されると思います。
これは、アプリ バーが表示されないコードです。
class _AppStateTab extends State<App>{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Stack(
children: <Widget>[
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
color: Colors.white,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.cached),
color: Colors.white,
onPressed: () {},
),
],
),
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: BottomAppBar(
color: Colors.transparent,
elevation: 0.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.dialpad),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon: Icon(Icons.camera_alt),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon: Icon(Icons.edit),
color: Colors.white,
onPressed: (){},
),
],
),
),
),
TabBarView(
children: <Widget>[
Calculator(),
Camera(),
Solution(),
],
)
],
),
),
);
}
}
これは、本体がアプリ バーの下を移動しないコードです。
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('data'),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: TabBarView(
controller: _tabController,
children: _tabList,
),
bottomNavigationBar: BottomAppBar(
color: Colors.transparent,
elevation: 0.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.dialpad),
color: Colors.white,
onPressed: (){
_tabController.animateTo(0);
},
),
IconButton(
icon: Icon(Icons.camera_alt),
color: Colors.white,
onPressed: (){
_tabController.animateTo(1);
},
),
IconButton(
icon: Icon(Icons.edit),
color: Colors.white,
onPressed: (){
_tabController.animateTo(2);
},
),
],
),
),
);