How to make a scrollable screen in flutter? - flutter

Question

As you can see, Actually I want to make the screen scrollable, In my Flutter project, on one screen I have used some rows, columns, and listview but when I scroll my screen this is not happening, while I have to take SingleChildScrollView but it didn't work. and I have tried replacing the column with Listview but it didn't work. I don't understand where is the problem, please give me a solution. and I have attached my code and share a screenshot of the app screen below.
it shows pixel error.
.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:movie_app/core/constants/constants.dart';
import 'package:movie_app/ui/views/movielist/movie_detail_view.dart';
class MovieListView extends StatefulWidget {
const MovieListView({Key? key}) : super(key: key);
#override
_MovieListViewState createState() => _MovieListViewState();
}
class _MovieListViewState extends State<MovieListView> {
int counter = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff070d2d),
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Container(
child: Column(
children: [
_buildHeaderSection(),
_buildSearchBar(),
SizedBox(height: 30),
buildCategoriesSection(),
SizedBox(height: 20),
buildListCategories(),
SizedBox(height: 30),
_buildPopularTitle(),
SizedBox(height: 30),
_buildPopularSection(),
],
),
),
),
),
],
),
),
);
}
Widget _buildHeaderSection() {
return Container(
padding: EdgeInsets.fromLTRB(30.0, 80.0, 30.0, 60.0),
// color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MovieDetailView()),
);
},
child: Text(
"Hi, Edwards!",
style: TextStyle(
fontSize: 25,
//fontWeight: FontWeight.bold,
color: Colors.white),
),
),
Stack(
children: [
new IconButton(
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
//counter = 0;
});
}),
counter != 0
? new Positioned(
left: 20,
top: 20,
child: new Container(
padding: EdgeInsets.all(2),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 14,
minHeight: 14,
),
child: Text(
'$counter',
style: TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
)
: new Container(),
ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9CbZTM7W7VmNIGF36hIjpJcVoWEhbPGEGSw&usqp=CAU",
height: 50.0,
width: 50.0,
),
),
],
)
],
),
);
}
Widget _buildSearchBar() {
return Container(
height: 50,
margin: EdgeInsets.only(left: 30, right: 30),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
color: Colors.white,
),
hintText: "search your movie",
hintStyle: TextStyle(color: Colors.white),
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.grey,
width: 2.0,
),
),
)),
);
}
Widget buildCategoriesSection() {
return Container(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
children: [
Text(
"Categories",
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
SizedBox(
width: 150,
),
Text(
"See more",
style: TextStyle(
color: Colors.grey,
fontSize: 15,
),
)
],
),
);
}
Widget buildListCategories() {
return Container(
height: 80,
padding: EdgeInsets.only(left: 20),
width: MediaQuery.of(context).size.width,
child: Container(
child: ListView.builder(
itemCount: categoryList.length,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, position) {
return _buildCategoryItem(categoryList[position]);
},
),
),
);
}
Widget _buildCategoryItem(String category) {
return Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red.withOpacity(0.3),
),
margin: EdgeInsets.only(right: 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.adb, color: Colors.white,),
SizedBox(height: 8),
Text(
category,
style: TextStyle(color: Colors.white),
),
],
),
);
}
_buildPopularTitle() {
return Container(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
children: [
Text(
"Popular",
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
SizedBox(
width: 150,
),
Text(
"See more",
style: TextStyle(
color: Colors.grey,
fontSize: 15,
),
)
],
),
);
}
_buildPopularSection() {
return Container(
height: 200,
padding: EdgeInsets.only(left: 20),
width: MediaQuery.of(context).size.width,
child: Container(
child: ListView.builder(
itemCount: 6,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, position) {
return _buildPopularItem();
},
),
),
);
}
_buildPopularItem() {
return Column(
children: [
Container(
height: 200,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
),
margin: EdgeInsets.only(right: 16),
child: Image.network(
'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/movie-poster-template-design-21a1c803fe4ff4b858de24f5c91ec57f_screen.jpg?ts=1574144362',
fit: BoxFit.cover,
),
),
SizedBox(height: 5,),
Container(
color: Colors.green,
child: Text("data",style: TextStyle(
color: Colors.red
),
),
),
],
);
}
}

Answer 1

As you have mentioned SingleChildScrollView should work, but your problem is that you don't have enough items to be scrolled according to your screenshot.
So please use enough items and try again.
And in your _buildPopularItem() widget, decrease the container width, that's why it says pixel overflow.

Answer 2

This overflow is made from _buildPopularTitle() while you set fixed height from _buildPopularSection having height: 200,
if you look closely, inside _buildPopularItem
There is a Container with height: 200, and it is taking full height, so for rest of children SizedBox h:5 and Container Text aren't having any spaces here, and creating overflow.
Solutions
increase the height of _buildPopularSection
reduce the container height inside _buildPopularItem
wrap with FittedBox(child: _buildPopularItem());

Answer 3

From the screenshot I can see that your container is smaller by 21 pixels in height. Please increase it.
_buildPopularSection() {
return Container(
height: 230,
padding: EdgeInsets.only(left: 20),
width: MediaQuery.of(context).size.width,
child: Container(
child: ListView.builder(
itemCount: 6,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, position) {
return _buildPopularItem();
},
),
),
);
}
_buildPopularItem() {
return Column(
children: [
Container(
height: 225,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
),
margin: EdgeInsets.only(right: 16),
child: Image.network(
'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/movie-poster-template-design-21a1c803fe4ff4b858de24f5c91ec57f_screen.jpg?ts=1574144362',
fit: BoxFit.cover,
),
),
SizedBox(height: 5,),
Container(
color: Colors.green,
child: Text("data",style: TextStyle(
color: Colors.red
),
),
),
],
);
}
Replace the above code and it should work...