I am trying to make my main screen scrollable using SingleChildScrollView but it's not working as expected
here is my code:
SingleChildScrollView(
child: Column(
children: [
Row(...),
Container(
child: Column(
children: [
Text(...),
SizedBox(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, count) {
return Container(
height: 300,
child: Text("hi there $count"),
);
},
itemCount: 4,
),
)
],
),
)
],
),
);
change the column to list view
like this
SingleChildScrollView(
child: Column(
children: [
Row(...),
Container(
child: ListView(
children: [
Text(...),
SizedBox(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, count) {
return Container(
height: 300,
child: Text("hi there $count"),
);
},
itemCount: 4,
),
)
],
),
)
],
),
);
try this code
Related
Category screen create in flutter for mobile platform
Try as follows:
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Flexible(
child: SizedBox(
width: 150,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (ctx, i) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.grey,
border: Border.all(),
),
child: Column(children: [
const Icon(Icons.person),
Text("Cat" + i.toString())
]));
}))),
Flexible(
child: Container(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GridView.builder(
itemCount: 50,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
childAspectRatio: 3 / 2,
mainAxisSpacing: 4.0),
itemBuilder: (BuildContext context, int index) {
return Column(children: [
const CircleAvatar(
radius: 24, // Image radius
backgroundImage: NetworkImage(
'https://opengraph.githubassets.com/2ddb0ff05ef9ccfce35abb56e30d9c5068e01d1d10995484cfd07becee9accf7/dartpad/dartpad.github.io',
)),
Text("Title" + index.toString())
]);
},
),
]))))
])
I need 4 Scrollable Horizontal Listviews in a vertically scrollable column.
I have tried multiple things again and again but the vertical scrolling just doesn't seem to work.
This is the kind of layout I want.
Container(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),
Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),
);
Can anyone tell me what I am doing wrong?
I have been stuck in this for a long time now.
The horizontal list does scroll but the vertical scroll is not working.
Try using SingleChildScrollView and Row instead of ListView
For example,
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("4 Horizontals"),
),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
SizedBox(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
SizedBox(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
SizedBox(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
],
),
),
),
);
}
Widget getWid() {
return Container(
color: Colors.pink,
width: 200,
height: 200,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(5),
child: Center(
child: Text(
"Hello",
style: TextStyle(
color: Colors.white,
fontSize: 30
),
),
),
);
}
}
I want to make use 4 listView Builder which scroll horizontally in a SingleChildScrollView but even after trying everything the page isn't scrolling vertically, can anyone help me with this.
Example :
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: getLibrayCourse(),
builder: (context,snapshot){
if(snapshot.connectionState==ConnectionState.waiting){
return Center(child: CircularProgressIndicator());
}
return Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
],
),
);
},
);
}
If I use neverscrollable in my horizontal widget it will stop scrolling so that's an issue
I have tried adding Container height, using expanded etc still the problem persists
I copied and used your code and just moved the "column" to the "SingleChildScrollView". It worked for me, Both horizontal and vertical scrolling.
#override
Widget build(BuildContext context) {
return FutureBuilder(
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
return Container(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// your children
]
),
),
);
},
);
}
I hope it was useful for you.
This is my code implementation:
return Scaffold(
appBar: CustomAppBar(
scaffoldKey: widget.scaffoldKey,
// icon: AppIcon.settings,
// onActionPressed: onSettingIconPressed,
onSearchChanged: (text) {
setState(() {
if (text.length > 0) {
searching = true;
} else {
searching = false;
}
});
state.filterByUsername(text);
},
),
backgroundColor: Colors.white,
body:
// Column(children: [
RefreshIndicator(
backgroundColor: Colors.white,
onRefresh: () async {
HapticFeedback.selectionClick();
setState(() {
list3 = state2.getTweetList(authstate.userModel);
list3.shuffle();
onlyImages.shuffle();
});
state.getDataFromDatabase();
return Future.value(true);
},
// mesto povise greed, i ispod search boxa
child: Column(
children: <Widget>[
CarouselSlider.builder(
itemCount: images.length,
options: CarouselOptions(
// autoPlayInterval: Duration(milliseconds: 30),
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
itemBuilder: (context, index) {
return Container(
child: Center(
child: (imageUrl != null)
? Image.network(imageUrl)
: Placeholder(
fallbackHeight: 200,
fallbackWidth: double.infinity,
),
// Center(
// child: Image.network(images[index],
// fit: BoxFit.cover, width: 1000)
),
);
},
),
SizedBox(
height: 5,
),
Expanded(
// flex: 1,
child: CustomScrollView(slivers: <Widget>[
SliverToBoxAdapter(
child: Container(
padding: EdgeInsets.only(top: 0),
height: 30,
margin: EdgeInsets.only(top: 5, bottom: 5),
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_tagItem('#DAJGI'),
_tagItem('#Advertisements'),
_tagItem('Animal'),
_tagItem('Travel'),
_tagItem('Happy'),
_tagItem(
'Art',
),
]))),
]),
),
searching
? ListView.separated(
addAutomaticKeepAlives: false,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) =>
_UserTile(user: list[index]),
separatorBuilder: (_, index) => Divider(
color: Colors.transparent,
height: 0,
),
itemCount: list?.length ?? 0,
)
: Expanded(
child: GridView.count(
crossAxisCount: 3,
children:
List.generate(onlyImages.length, (index) {
return GestureDetector(
onTap: () {
FeedModel model = onlyImages[index];
onTweetPressed(context, model);
},
onLongPress: () {
_createPopupContext;
FeedModel model = onlyImages[index];
onTweetPressed(context, model);
},
child: Container(
child: Card(
child: onlyImages
.elementAt(index)
.imagesPath
.length >
0
? CachedNetworkImage(
imageUrl: onlyImages
.elementAt(index)
.imagesPath[0],
fit: BoxFit.cover,
)
:
//Container()
Center(
child: Text(onlyImages
.elementAt(index)
.description),
)),
));
}),
),
),
],
)))
Result:
hi in your column you have 2 Expanded Widget so your Tags get more space;
column(
children:[
CarouselSlider
Expanded(
// flex: 1,
child: CustomScrollView // Your Tags )
Expanded(
child: GridView.count( // Your Grid)
]
)
now you can remove Expanded and CustomScrollView and SliverToBoxAdapter
and make your column like below
column(
children:[
CarouselSlider
Container( // Your Tags )
Expanded(
child: GridView.count( // Your Grid)
]
)
I used a ListView inside a Drawer Widget and Used ListView.Builder inside that ListView to print out menus. Now All Menus are Printed Perfectly But The Drawer is not Scrolling. How to make it scroll?
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Guide to Make Money'),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/header_photo.jpg'),
fit: BoxFit.cover),
),
),
Container(
height: double.maxFinite,
child: ListView.builder(
padding: EdgeInsets.only(top: 0.0),
itemBuilder: (context, index) {
final profession = professionList[index];
return Ink(
color: selectedLink == index ? Colors.blueGrey : null,
child: ListTile(
title: Text(profession.heading),
onTap: () {
setState(() {
selectedLink = index;
});
Navigator.pushNamed(context, profession.destinationRoute);
},
leading: index == 0
? Icon(
Icons.home,
)
: Icon(Icons.description),
),
);
},
itemCount: professionList.length,
),
),
],
),
);
}
I need to make it Scroll... Please Help
P.S: Hi, I'm new to Flutter and also Stack overflow.. I wanted to upload image as well but this website say's I need to have 10 reputation at least... So, I have just a Code for you.. I hope you can figure out and help me with this.
Try this, Column instead ListView, and Expanded instead Container(height: double.maxFinite
return Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Guide to Make Money'),
],
),
decoration: BoxDecoration(
color: Colors.white,
),
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.only(top: 0.0),
itemCount: 22,
itemBuilder: (context, index) {
return Ink(
color: true ? Colors.blueGrey : null,
child: ListTile(
title: Text("profession.heading"),
onTap: () {},
leading: index == 0
? Icon(
Icons.home,
)
: Icon(Icons.description),
),
);
},
),
),
],
),
);
Container(
height: double.maxFinite,
child: ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, i) {
return new ListTile(
title: new Text(data[i]["title"]),
);
}))
We can just add
physics: ClampingScrollPhysics(),
to the ListView.builder and it scrolls perfectly