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
),
),
),
);
}
}
Related
I want to have nested listview where there will be vertical listview inside a horizontal listview and that will be wrapped with SingleChildScrollView because I want to scroll all the vertical lists together.
So here's what I have done
Expanded(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Theme.of(context).primaryColorDark,
Theme.of(context).primaryColorLight,
],
)),
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
child: SizedBox(
height: 200.w,
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemCount: 5,
itemBuilder: (context, index) {
return SizedBox(
height: double.infinity,
width: 24.w,
child: Column(
children: [
Container(
width: double.infinity,
padding: EdgeInsets.fromLTRB(
0.w, 3.w, 0, 3.w),
color: Colors.white,
child:
Center(child: Text("Header"))),
ListView.builder(
physics:
const NeverScrollableScrollPhysics(),
itemCount: 20,
shrinkWrap: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {},
child: Padding(
padding: EdgeInsets.fromLTRB(
0.w, 2.w, 0.w, 2.w),
child: Center(
child: Text(
"8:44",
style: TextStyle(
color: Colors.white,
fontSize: 14.sp)),
),
),
);
},
)
],
),
);
},
),
))
],
))
Desired output :
But in this if I don't put vertical listview in SizedBox and don't give fixed height then it causes an issue.
I want to have expanded or something like wrap_content for vertical inside listview so it takes the required space on it's own.
So what to do for this? Can someone help?
Thanks in advance.
have you tried
height: double.maxFinite,
in the SizedBox... this will le
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'm new on Flutter and I'm practicing trying to build UIs. I wanna achieve this:
I'm using flutter_rating_bar for rating stars but I can't understand how to add this widget inside a ListTile; I already have the user vote I just need to show it with stars.
return Container(
child: ListView.builder(
itemCount: 5,
shrinkWrap: true,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: FlutterLogo(size: 72.0),
title: Text(title),
subtitle: Text(text),
trailing: Icon(Icons.more_vert),
isThreeLine: true,
),
);
}));
This is the code I'm using but when I try to add for example:
RatingBarIndicator(
rating: userRat,
itemBuilder: (context, index) => Icon(
Icons.star,
color: Colors.amber,
),
itemCount: 5,
itemSize: 50.0,
direction: Axis.vertical,
)
I receive the error:
Positional arguments must occur before named arguments. Try moving all
of the positional arguments before the named
arguments.dart(positional_after_named_argument)
I'm not also able to poistion the user image at bottom with user's name at right. Can anyone explain me why this error occurs and give me a code example to understand please?
try this, you have to replace the size value of your array in itemCount, and then customize this widget to suit you.
Container(
child: ListView.builder(
itemCount: 5,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
margin: EdgeInsets.symmetric(vertical: 1),
decoration: BoxDecoration(
color: Colors.grey[300],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Frame', style: TextStyle(color: Colors.grey[500])),
Text('Title'),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
children: [
RatingBar.builder(
itemSize: 25,
initialRating: 3,
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.blue,
),
onRatingUpdate: (rating) {
print(rating);
},
),
SizedBox(width: 50),
Row(
children: [
Text('4.0', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
Text('/ 5.0', style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold),)
],
)
],
),
),
Text('Text...'),
Row(
children: [
Icon(Icons.person),
Text('Name')
],
)
],
),
);
},
),
);
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.
i am very new in flutter, i have a list of rows which are part of a listview that contain strings from lists and i want to add a seperate header on top of the listview in order to put a different content,but i keep getting errors cause the listview is combined with a futureBuilder, what sort of code should i add?
`body: FutureBuilder<Album>(
future: futureAlbum,
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Container(
child: ListView.builder(
itemBuilder: (context, index) {
return Card(
child: Container(
width: double.infinity,
padding: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
_sell[index]["text"],
style: TextStyle(fontSize: 20),
),
Text(
(snapshot.data.sellprice[index]).toString(),
style: TextStyle(fontSize: 20,color:Colors.grey),
),
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
_buy[index]["text"],
style: TextStyle(fontSize: 20),
),
Text(
_buy[index]["symbol"],
style: TextStyle(
fontSize: 20, color: Colors.grey),
),
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
_currency[index]["text"],
style: TextStyle(fontSize: 17),
),
Text(
_currency[index]["symbol"],
style: TextStyle(
fontSize: 17, color: Colors.grey),
),
],
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
_picture[index],
height: 50,
width: 50,
),
],
),
),
],
),
),);
},
itemCount: 7),
`
lets say your header widget is of type HeaderWidget (could be another Container or a Row or a custom widget). Then you have to ask yourself the following question: Does the header disappear when i scroll far enough in the listview or does it always stay on top?
Scrollable:
ListView.builder(
itemBuilder: (context, i) => i < 1 ? HeaderWidget() : buildChild(i-1),
itemCount: 7,
)
Non-scrollable / fixed:
Column(
children: <Widget>[
HeaderWidget(),
ListView.builder(
itemBuilder: (context, i) => buildChild(i),
itemCount: 7,
),
],
)
Try something like:
body: FutureBuilder<Album>(
future: futureAlbum,
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Container(
child: ListView.builder(
itemBuilder: (context, index) {
return Card(
child: Container(
width: double.infinity,
padding: EdgeInsets.all(5),
child: _content(index),
),);
},
itemCount: 7),
}
}
_content(index){
if(index == 0){
return /*Different header*/
} else {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
_sell[index]["text"],
style: TextStyle(fontSize: 20),
),
Text(
(snapshot.data.sellprice[index]).toString(),
style: TextStyle(fontSize: 20,color:Colors.grey),
),
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
_buy[index]["text"],
style: TextStyle(fontSize: 20),
),
Text(
_buy[index]["symbol"],
style: TextStyle(
fontSize: 20, color: Colors.grey),
),
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
_currency[index]["text"],
style: TextStyle(fontSize: 17),
),
Text(
_currency[index]["symbol"],
style: TextStyle(
fontSize: 17, color: Colors.grey),
),
],
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
_picture[index],
height: 50,
width: 50,
),
],
),
),
],
),
}
}
What worked for me was wrapping the ListView and the header in a column. I order to make the ListView cover the remaining height, wrap it in an Expanded widget as shown below:
Column(
children: <Widget>[
Text("Header Title")
Expanded(
child: ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index){
return (
Container()
)
}
)
),
],
)