Question posted in 
I am doing the homepage of an app in flutter but when I try to wrap the container in a ListView it disappears… I think it’s affected because the container it’s wrapped in a Column?
Here is the code for homepage
import 'package:flutter/material.dart';
import 'post_detail.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/cupertino.dart';
import 'package:flashy_tab_bar2/flashy_tab_bar2.dart';
import 'Influencerprofile.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
List<Widget> tabItems = [
Center(child: Text("0")),
Center(child: Text("1")),
Center(child: Text("2")),
Center(child: Text("3")),
Center(child: Text("4"))
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.black,
title: Text(
'INFLUFIT.CLUB',
style: GoogleFonts.bebasNeue(
fontWeight: FontWeight.bold, fontSize: 30, color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
),
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Container(
child: Stack(alignment: Alignment.bottomLeft, children: [
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: TextField(
readOnly: true,
decoration: InputDecoration(
hintText: "Search influencer",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide.none,
),
fillColor: Colors.black.withOpacity(0.1),
filled: true,
),
)))
])),
SizedBox(
height: 10,
),
Container(
alignment: Alignment.centerRight,
child: Text(
'Location',
style: TextStyle(),
)),
PostDetail(),
]),
),
bottomNavigationBar: FlashyTabBar(
selectedIndex: _selectedIndex,
showElevation: true,
onItemSelected: (index) => setState(() {
_selectedIndex = index;
}),
items: [
FlashyTabBarItem(
icon: Icon(Icons.home),
title: Text('Feed'),
),
FlashyTabBarItem(
icon: Icon(Icons.favorite),
title: Text('Favourites'),
),
FlashyTabBarItem(
icon: Icon(Icons.add),
title: Text('Add'),
),
FlashyTabBarItem(
icon: Icon(
Icons.notifications_active_outlined,
),
title: Text('Alerts'),
),
FlashyTabBarItem(
icon: Icon(Icons.person),
title: Text('My profile'),
),
],
),
);
}
}
And here is the code for PostDetail() that I try to wrap in a ListView in the homepage and duplicate it 5 times
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'Influencerprofile.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class PostDetail extends StatefulWidget {
@override
PostDetailState createState() => PostDetailState();
}
class PostDetailState extends State<PostDetail> {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 10, left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 15),
Container(
height: MediaQuery.of(context).size.height / 2.2,
width: MediaQuery.of(context).size.width / 1.1,
child: Padding(
padding: EdgeInsets.all(30),
child: Column(
children: [
Image.asset(
'assets/avatar.png',
height: 100,
),
SizedBox(
height: 20,
),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Influencerprofile()),
);
},
child: Text(
'User Name',
// widget.UserName,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('@username'
// widget.Post,
),
SizedBox(
width: 10,
),
SizedBox(
height: 20,
width: 20,
child: Image.asset('assets/verified.png'))
],
),
SizedBox(
height: 20,
),
Container(
height: 75,
width: MediaQuery.of(context).size.width * 0.90,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: Colors.grey[200],
shadows: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 2,
),
],
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Subscribers',
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('356'),
],
),
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Programs',
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('8'),
],
),
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Ratings',
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('5.0'),
],
),
),
])),
SizedBox(
height: 30,
),
Container(
child: Container(
width: MediaQuery.of(context).size.width / 1.5,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32),
),
),
onPressed: () {},
child: Text(
"SUBSCRIBE",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
),
],
)),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60),
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
)
],
),
),
SizedBox(
height: 15,
),
SizedBox(
height: 50,
),
]),
);
}
}
What I should add for the PostDetail() to not disappear anymore in the homepage?
2
Answers
Please, give me more code сonsidering that it gives you an error and i will help you with your qiestion
And you can try use SingleChildScrollView
Column tries to expands in vertical axis, and so does the ListView, hence you need to constrain the height of ListView.
Use either Expanded or Flexible if you want to allow ListView to take up entire left space in Column.
Try this where you have put PostDetail() in the homepage column (See last paragraph of this answer to know why I used ListView.builder instead of ListView):
itemCount is the number of times you want to display the container. You can specify it as any integer like 5,6,7… or like I did that is length of your tabItems list.
We can do the same task with the help of ListView instead of ListView.builder but when we have numerous items(for ex: 10000) then it is inefficient to create these items with ListView because it loads all the list items at once but ListView.builder make this task quicker by creating layouts for items visible on the screen with the help of itemBuilder & lazily build other layouts/containers as the user scrolls.
Hope this helps.