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
Related
/*Grid layout*/
Container(
height: 225.h,
width: double.infinity,
padding: EdgeInsets.zero,
child: GridView.builder(
scrollDirection: Axis.horizontal,
primary: false,
shrinkWrap: true,
padding: EdgeInsets.only(left: 16.w,top: 8.h,right: 16.w),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.5,
mainAxisSpacing: 16.0,
crossAxisSpacing: 0.0),
itemCount: drConsultationModelList.length,
itemBuilder: (context, i) {
return Container(
width: 210.w,
margin: EdgeInsets.only(bottom: 15.h),
padding: EdgeInsets.only(left: 16.w,bottom: 10.h,right: 20.h,top: 10.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.r),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Color(0x14000000),
offset: const Offset(
0.0,
4.0,
),
blurRadius: 14.0,
spreadRadius: 0.0,
), //BoxShadow
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(drConsultationModelList[i].tvTitle,style: TextStyle(fontFamily: fontInterSemibold,fontSize: 15.sp,color: blackes_1a1b25),),
SizedBox(height: 6.h,),
Text(drConsultationModelList[i].tvSubTitle,style: TextStyle(fontFamily: fontInterRegular,fontSize: 11.sp,color: dark_silver_6a7382),)
],
),
),
Stack(
alignment: Alignment.center,
children: [
Container(
height: 50.h,width: 50.w,
decoration: BoxDecoration(
color: Color(0xffe7f5f0),
borderRadius: BorderRadius.circular(8.r),
),
),
SvgPicture.asset(drConsultationModelList[i].imgLogo,width: 34.w,height: 34.h,fit: BoxFit.fill,),
],
)
],
),
);
},
),
),
I used container fixed height but I am trying to set dynamic height so please give me proper suggestion.
Now the problem is that, to show layout in listview I have to pass fixed height in sizebox. If I remove height then layout will be gone. So, How do I display item layout without giving fixed height in sizebox.
Fixed height problem issued when we increased device default font size. So, cant fixed layout height. Plz give solution, Thanks in advance
I made an application like this:
I want to add a little info text on top of this gridView structure. How can I do it? I'm a beginner and I just couldn't do it.
Codes:
body: Container(
padding: EdgeInsets.all(7),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: subjects.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(subjects[index].subjectImage, fit: BoxFit.cover, height: 50, width: 50,),
SizedBox(height: 15,),
Text(subjects[index].subjectName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),),
],
),
),
onTap: () {},
),
),
);
},
),
How can I do it? Thanks in advance.
Try below code. I have added text like Text("1234567890")
body: Container(
padding: EdgeInsets.all(7),
child: Column(
children: [
Text("1234567890"), //<------------
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: subjects.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
subjects[index].subjectImage,
fit: BoxFit.cover,
height: 50,
width: 50,
),
SizedBox(
height: 15,
),
Text(
subjects[index].subjectName,
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.w500),
),
],
),
),
onTap: () {},
),
),
);
},
),
),
],
),
);
You can use #DholaHardik's answer. Just need to wrap the Grid View Builder to a Sized Box and give it a height let's say height = MediaQuery.of(context).size.height and if the error says Overyflow by say 45 pixels.. You can change height to MediaQuery.of(context).size.height - 45;
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 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 create a layout like this,
Image
I want to create a flutter app which can scroll vertically and also some content of the app should scroll horizontally as describe in the picture. I used ListView with scroll horizontal inside the SingleChildScrollView but it not work. It hide the content Horizontal listView content and the content below the ListView.
So How to make this layout
Code I used,
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10),
child: CustomizedAppBar(),
),
SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.only(left: 10,bottom: 5),
child: Text(
'Hello Jessica.',
style: kArtistNamePlayScreen,
),
),
Padding(
padding: const EdgeInsets.only(left: 10,bottom: 40),
child: Text(
'Recommendeddd',
style: kSongNamePlayScreen,
),
),
//TODO Insert Carousel Here
ListView(
children: <Widget>[
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
new BoxShadow(
color: Colors.grey,
offset: Offset(1.5,1.5),
blurRadius: 3,
),
],
),
),
],
),
Text(
'Popular artists',
style: kSongNamePlayScreen,
),
Container(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
width: 60,
height: 75,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
)
),
),
)
],
),
),
SongList(
songListSongName: 'Beautiful People',
songListArtistName: 'Ed Sheeran',
songListAvatarImage: AssetImage('images/beautiful_people_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Panini',
songListArtistName: 'Lil Nas X',
songListAvatarImage: AssetImage('images/Panini_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Do You Sleep',
songListArtistName: 'Sam Samith',
songListAvatarImage: AssetImage('images/Do_you_sleep_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Bad Guys',
songListArtistName: 'Billie Eilish',
songListAvatarImage: AssetImage('images/Bad_guys_l.jpg'),
heartClick: (){},
)
],
),
)
Instead of ListView, you can use SingleChildScrollView with Row as child. Then give the SingleChildScrollView the scrollDirection: Axis.horizontal Code:
//TODO Insert Carousel Here
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
new BoxShadow(
color: Colors.grey,
offset: Offset(1.5, 1.5),
blurRadius: 3,
),
],
),
),
],
),
),
You could use a ListView with horizontal scroll, it has to be wrapped inside a Container or SizedBox with a specific height.
Using ListView.builder could be more efficient, here is a quick example:
final _items = List.generate(20, (e) => e);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text("A"),
SizedBox(
height: 100.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _items.length,
itemBuilder: (context, index) {
print('$index');
return SizedBox(
width: 150.0,
child: Center(child: Text('${_items[index]}')),
);
}),
),
Text("B"),
],
),
),
);
}
You could see the prints in the console, indicating the items are created only when they're scrolled onto the screen.