Overflow bawah karena bilah navigasi bawah dan bilah tab
@override
Widget build(BuildContext context) {
super.build(context);
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
),
child: Scaffold(
key: _scaffoldKeyProfilePage,
body: DefaultTabController(
length: 2,
child:RefreshIndicator(
onRefresh: _onRefresh,
child: NestedScrollView(
headerSliverBuilder: (context, _) {
return [
SliverList(
delegate: SliverChildListDelegate(
[ BuildMainProfile(
....//
),
Padding(
...//another design
),
];
},
// You tab view goes here
body: Column(
children: <Widget>[
TabBar(
tabs: [
Tab(text: 'A'),
Tab(text: 'B'),
],
),
Expanded(
child: TabBarView(
children: [
BuildPost(,
),
BuildWings()
],
),
),
],
),
),),
),
}
Di atas adalah contoh kesalahan yang saya dapatkan
kesalahan: RenderFlex meluap sebesar 48 piksel di bagian bawah.
Bagaimana cara mengatasi masalah ini? Mencoba menggunakan diperluas pada TabBar dan memberikan kelenturan 1 ke bilah tab dan kelenturan 10 ke tabView, tetapi dengan bilah tab itu menyusut saat menggulir ke bawah.
Berikut dibawah ini adalah kode untuk tampilan tabBar A dan B bahkan mirip
class BuildPost extends StatefulWidget {
final String uid;
const BuildPost({
Key key,
@required this.uid,
}) : super(key: key);
@override
_BuildPostState createState() => _BuildPostState();
}
class _BuildPostState extends State<BuildPost> {
List<Post> _post = [];
getUsersPost() async {
final database = FirestoreDatabase();
List<Post> _postModel = await database.getUsersPost(widget.uid);
setState(() {
_post = _postModel.toList();
});
}
@override
void initState() {
getUsersPost();
super.initState();
}
@override
Widget build(BuildContext context) {
return _post.isEmpty
? Container(
height: 500,
width: double.infinity,
)
: GestureDetector(
child: Directionality(
textDirection: TextDirection.ltr,
child: AnimationLimiter(
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.all(10),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
itemCount: _post.length,
itemBuilder: (context, index) {
return AnimationConfiguration.staggeredGrid(
position: index,
duration: const Duration(milliseconds: 500),
columnCount: 3,
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
duration: Duration(milliseconds: 1000),
child: BuildData(
totalPost: _post.length,
postList: _post,
index: index,
post: _post[index],
)),
),
);
},
staggeredTileBuilder: (index) => StaggeredTile.count(
index % 7 == 0 ? 2 : 1,
index % 7 == 0 ? (2.1) : (1.05)),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
)),
);
}
}
Jawaban
Itu karena tinggi badan NestedScrollViewadalah dari 0 ke MediaQuery.of (konteks) .size.height, sedangkan TabBar Anda di dalam kolom membuatnya tata letak ketinggian minimal TabBar.
Pindahkan TabBar di dalam pembangun
Dari contoh NestedScrollView , Anda dapat melihat TabBar ada di dalam headerSliverBuilder. Anda cukup memindahkan TabBar di dalamnya (membungkus SliverToBoxAdapteratau SliverAppBarmembuatnya menjadi sliver).
Kemudian Anda dapat menghapus Columndan ExpandWidget di atas TabBarView
child: NestedScrollView(
headerSliverBuilder: (context, _) {
return [
SliverList(
...
),
SliverAppBar(
pinned: true,
primary: false, // no reserve space for status bar
toolbarHeight: 0, // title height = 0
bottom: TabBar(
tabs: [
Tab(text: 'A'),
Tab(text: 'B'),
],
),
)
];
}
body: TabBarView(
children: [
...
The bodymilik NestedScrollViewmendapat kendala ketinggian ketat sama dengan ruang yang tersisa dengan headerSliverBuilder(mengingat posisi scroll). Dalam kode Anda, Anda sebagai isi Columnwidget dengan tinggi tetap TabBarwidget di sana. Jadi ketika batasan tinggi badan menjadi lebih kecil dari TabBarketinggian, itu akan meluap Column.
Jadi di bodydalamnya, harus ada widget yang bisa menyusut ke ketinggian nol, kemungkinan besar scrollable ( ListView, CustomScrollView). Dalam kasus Anda, Anda dapat memindahkan TabBarke bagian bawah headerSliverBuilder, membungkusnya dengan:
SliverPersistentHeader(
pinned: true,
delegate: SimpleHeaderDelegate(
child: TabBar(...),
),
)
menggunakan:
class SimpleHeaderDelegate extends SliverPersistentHeaderDelegate {
SimpleHeaderDelegate({@required this.child});
final PreferredSizeWidget child;
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => child;
@override
double get maxExtent => child.preferredSize.height;
@override
double get minExtent => child.preferredSize.height;
@override
bool shouldRebuild(covariant SimpleHeaderDelegate oldDelegate) => oldDelegate.child != child;
}