Flutter implementing instagram profile page - flutter

Question

in this below code i want to make a simple Instagram profile page, my problem is adding tabs and TabBarView in side Sliver which i get some error
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: InstagramProfile(),
);
}
}
class InstagramProfile extends StatefulWidget {
#override
_InstagramProfileState createState() => _InstagramProfileState();
}
class _InstagramProfileState extends State<InstagramProfile> with TickerProviderStateMixin {
TabController tab;
#override
void initState() {
super.initState();
tab = TabController(length: 4, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.grey[100],
title: Container(
color: Colors.grey[100],
height: 200,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
"Head",
style: TextStyle(color: Colors.black),
),
),
),
),
SliverAppBar(
pinned: true,
backgroundColor: Colors.white,
title: Container(
color: Colors.white,
constraints: BoxConstraints.expand(height: 50),
child: TabBar(
controller: tab,
tabs: [
Tab(text: "Event"),
Tab(text: "History"),
Tab(text: "Page"),
Tab(text: "Group"),
]),
),
),
SliverPadding(
padding: const EdgeInsets.all(0),
sliver: SliverList(
delegate: SliverChildListDelegate([
TabBarView(
controller: tab,
children: [
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
],
),
]),
),
)
],
),
);
}
}
Error:
RenderBox was not laid out: _RenderScrollSemantics#6cf1a relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 545 pos 12: 'child.hasSize': is not true.
The relevant error-causing widget was:
SliverList file:///C:/Users/mahdi/AndroidStudioProjects/social_calendar_pro/lib/tabbar.dart:57:21

Answer 1

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: InstagramProfile(),
);
}
}
class InstagramProfile extends StatefulWidget {
#override
_InstagramProfileState createState() => _InstagramProfileState();
}
class _InstagramProfileState extends State<InstagramProfile>
with TickerProviderStateMixin {
TabController tab;
#override
void initState() {
super.initState();
tab = TabController(length: 4, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: CustomScrollView(
shrinkWrap: true,
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.grey[100],
title: Container(
color: Colors.grey[100],
height: 200,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
"Head",
style: TextStyle(color: Colors.black),
),
),
),
),
SliverAppBar(
pinned: true,
title: Container(
// color: Colors.black12,
constraints: BoxConstraints.expand(height: 50),
child: TabBar(controller: tab, tabs: [
Tab(text: "Event"),
Tab(text: "History"),
Tab(text: "Page"),
Tab(text: "Group"),
]),
),
),
SliverPadding(
padding: const EdgeInsets.all(10),
sliver: SliverList(
delegate: SliverChildListDelegate([
Container(
child: TabBarView(
controller: tab,
children: [
Container(
child: Text("Articles Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
Container(
child: Text("User Body"),
),
],
),
height: 600,
)
]),
),
)
],
),
);
}
}
I hope this will work for you