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')
],
)
],
),
);
},
),
);
Related
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
),
),
),
);
}
}
my screen is not scrollable , and has limit height ( only scrollable in the limit height )
I do want to make my page on there for scrollable,
here is my current page now :
if you see in the gif above, my page is not scrollable and only stuck in the one box and scrollable inside, I do love to scroll able them for all page normally, should I use ListView here ?? but how can I make the pic and text for responsive like above ? but I do make the hight of text too close also, can I know how u tiny up the text on the list also ??
here is my code for that Widget
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
data['title'],
softWrap: true,
),
),
body: Container(
padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.05),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: Image.network('https://i.ibb.co/nrWqyMx/belgium.png'),
)
),
Expanded(
flex: 2,
child: Align(
alignment: Alignment.topLeft,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text(data['ingredients'][index], style: TextStyle(height: 1.3),),
)
);
},
itemCount: data['ingredients'].length,
),
)
)
],
),
),
);
}
link : flutter codepen
Scaffold(
appBar: AppBar(
title: Text(
'MyAppBar',
style:
TextStyle(color: Colors.cyan[100], fontWeight: FontWeight.bold),
),
),
body: ListView(
children: <Widget>[
Container(
child: Image.network
('https://i.ibb.co/nrWqyMx/belgium.png'),
),
ListView.builder(
physics: ScrollPhysics(),
shrinkWrap: true,
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text("data['ingredients'][index]", style: TextStyle(height: 1.3),),
)
);
},
itemCount:25,
)
],
),
);
You will need put a ScrollView as a main container of your widget. Something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
color: Colors.red,
child: SingleChildScrollView(
child: Column(
children: [
Text("Title"),
ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, index) {
return Container(
height: 300,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.black,
style: BorderStyle.solid
)
),
);
},
)
],
),
),
)
);
}
}
I need an AlertDialog with minHeight of 50. It contains a ListView. If the ListView exceeds the screen it should become scrollable. But I can't scroll for some reason. Can anyone explain to me why it's not working :)
AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
title: ... ,
content: ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 50,
),
child: Column(
children: <Widget>[
Row(...),
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () => _onTap(list[index]),
child: Row(
children: <Widget>[
Flexible(
flex: 1,
child: Checkbox(...),
),
Flexible(
flex: 3,
child: Text(list[index]),)
],
)
);
},
)
)
],
),
),
actions: <Widget>[
MaterialButton(
minWidth:100,
child: Text('Cancel'),
onPressed: (){
Navigator.of(context).pop();
}
),
MaterialButton(
minWidth:100,
elevation: 5.0,
color: Theme.of(context).accentColor,
child: Text('Save', style: TextStyle(color: Color(0xFFF6F5F5))),
onPressed: (){
}
)
],
);
Add mainAxisSize: MainAxisSize.min to your Column. Without it, your Column is at infinite height and contains all Listview items. That's why it does not scroll.
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
I am designing a view for creating a group of users from firestore data. I want a view like whatsapp type create a group design. Below is my code :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
titleSpacing: 0.0,
centerTitle: true,
automaticallyImplyLeading: true,
leading: _isSearching ? const BackButton() : Container(),
title: _isSearching ? _buildSearchField() : Text("Create Group"),
actions: _buildActions(),
),
body: _buildGroupWidget(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrange,
elevation: 5.0,
onPressed: () {
// create a group
createGroup();
},
child: Icon(
Icons.send,
color: Colors.white,
),
),
);
}
Widget _buildGroupWidget() {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
selectedUserList != null && selectedUserList.length > 0
? Container(
height: 90.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: selectedUserList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
selectedUserList.removeAt(index);
setState(() {});
},
child: Container(
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
child: Column(
children: <Widget>[
Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
// color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
color: Colors.primaries[
index % Colors.primaries.length],
),
),
Container(
height: 20.0,
width: 50.0,
child: Center(
child: Text(
selectedUserList[index].userName,
softWrap: true,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
);
},
),
)
: Container(),
Container(
alignment: Alignment.centerLeft,
height: 30,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.deepOrange,
boxShadow: [
BoxShadow(
color: Colors.orange, blurRadius: 5, offset: Offset(0, 2)),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Text(
"Contacts",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
userList != null && userList.length > 0
? ListView.builder(
shrinkWrap: true,
itemCount: userList.length,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
if (selectedUserList.contains(userList[index])) {
selectedUserList.remove(userList[index]);
} else {
selectedUserList.add(userList[index]);
}
setState(() {});
},
title: Text(userList[index].userName),
subtitle: Text(userList[index].userContact),
leading: CircleAvatar(
backgroundColor: Colors.primaries[index],
),
);
},
)
: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)))
],
),
);
}
The problem with my code is i want to center my last widget which is center widget which will be seen when there is no data. I want to set it to the center of the screen.
But, it not get to the center of the screen.
I have already tried with Expanded, Flex and other solutions from other resource references. But, it doesn't work for me.
Can anyone suggest me how to center my last widget ?
I think expanded should work wrapping your last widget.
Still, if it doesn't work for you then i you can remove the height of your other 2 widgets from full screen as your both widgets have static height which is 120 total here.
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height - 120,
child: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)),
))
This will solve your issue for your case.