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
),
),
),
],
);
}
}