Want to hide the TabBar like a SliverAppBar in Flutter? Here is a solution without keys or MediaQuery “stuff” by using just SafeArea Widget.
Check the following Complete code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController _tabController; @override void initState() { _tabController = TabController(length: 3, vsync: this); super.initState(); } @override Widget build(BuildContext context) { // this sliver app bar is only use to hide/show the tabBar, the AppBar // is invisible at all times. The to the user visible AppBar is below return Scaffold( body: Stack( children: <Widget>[ NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverAppBar( primary: true, floating: true, backgroundColor: Colors.blue,//.withOpacity(0.3), snap: true, pinned: false, bottom: TabBar( tabs: [ Tab( child: Text( "1", textAlign: TextAlign.center, ), ), Tab( child: Text( "2", textAlign: TextAlign.center, ), ), Tab( child: Text( "3", textAlign: TextAlign.center, ), ), ], controller: _tabController, ), ), ]; }, body: TabBarView( children: [ MyScreen1(), MyScreen2(), MyScreen3(), ], controller: _tabController, physics: new NeverScrollableScrollPhysics(), ), ), // Here is the AppBar the user actually sees. The SliverAppBar // above will slide the TabBar underneath this one. // by using SafeArea it will. Positioned( top: 0.0, left: 0.0, right: 0.0, child: Container( child: SafeArea( top: false, child: AppBar( backgroundColor: Colors.blue, // iconTheme: IconThemeData( // color: Colors.red, //change your color here // ), automaticallyImplyLeading: true, elevation: 0, title: Text("My Title",), centerTitle: true, ), ), ), ), ], ), ); } } class MyScreen1 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.yellow, child: Center( child: Text("My Screen 1"), ), ); } } class MyScreen2 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Center( child: Text("My Screen 2"), ), ); } } class MyScreen3 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Center( child: Text("My Screen 3"), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
