Neelu Modanwal
Reputation: 87
How to make a scrollable screen in flutter?
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
),
),
),
],
);
}
}
Upvotes: 2
Views: 174
Answers (3)
GOKU
Reputation: 638
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...
Upvotes: 1
Md. Yeasin Sheikh
Reputation: 63559
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());
Upvotes: 1
Sachin Mamoru
Reputation: 486
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.
Upvotes: 2
Related Questions
- Scrollable Screen in Flutter
- How to make a screen scrollable in Flutter?
- Flutter - How to make a column screen scrollable
- Making a scrollable page in Flutter
- How to make the entire page in flutter scrollable
- How to make screen scrollable in flutter?
- How to make the page scrollable in the following structure (Flutter)
- How to make scrollable box in flutter?
- Flutter: How to make a scrollable menu of the screen?
- flutter how can I make this whole page scrollable?