I have a list of 12 items. I hav a LisView like this:
child: ListView.builder(
itemCount: (snapshot.data.length / 2).round(),
itemBuilder: (context, index) {
return Row(
children: [
Checkbox(
value: false,
onChanged: (bool value) {
_swipeCheckboxState(value, index);
}),
Text(snapshot.data[index]['name'].toString()),
//Text(snapshot.data[index].name),
],
);
},
),
Now I would like to split my view of the elements into 2 columns. How can I do this in Flutter?
Just create a Row with two ListViews inside.
In the second ListView update the itemCount and the index like this:
Row(
children: [
ListView.builder(
itemCount: (snapshot.data.length / 2).round(),
itemBuilder: (context, index) {
return Row(
children: [
Checkbox(
value: false,
onChanged: (bool value) {
_swipeCheckboxState(value, index);
}),
Text(snapshot.data[index]['name'].toString()),
//Text(snapshot.data[index].name),
],
);
},
),
ListView.builder(
itemCount: snapshot.data.length - (snapshot.data.length / 2).round(),
itemBuilder: (context, index) {
return Row(
children: [
Checkbox(
value: false,
onChanged: (bool value) {
_swipeCheckboxState(value, index + (snapshot.data.length / 2).round());
}),
Text(snapshot.data[index + (snapshot.data.length / 2).round()]['name'].toString()),
//Text(snapshot.data[index].name),
],
);
},
),
],
),
Related
I want to open seperate screen for my each list items
code
...index["data"]
.map(
(index) => Padding(
padding: EdgeInsets.only(top: 2.h),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GestureDetector(
onTap: () {
index["onTap"];
},
child: Text(
index["type"],
style: TextStyle(
color: AppColors.primaryColor,
fontSize: 13.sp,
fontWeight: FontWeight.w700),
),
),
SizedBox(
height: 0.3.h,
),
Text(
index["details"],
style: TextStyle(
fontSize: 9.3.sp,
color: AppColors.blackColor
.withOpacity(0.8),
fontWeight: FontWeight.w600,
),
),
],
),
),
)
.toList(),
List for navigation function and other items
list is in format of List
and use ...list.map => .toList
my list
**List list = [
{
"category": 'Your posts',
"data": [
{
"type": 'Pending posts',
"details": 'fdh fghfg nlfro refglrhgre tghrig ffr gk',
"onTap": () {
print('++++++++++++'); //// function for navigation to screen 1
},
},
];
**
Could you please try directly assigning method to onTap like this...
onTap: index['onTap']
it will directly replace onTap function coming from list.
I want to display the number of each item which is inside the list to a Card, I found some example which they said you should do it with a for() loop, and i did just that but the number isn't incrementing at all can someone show me what I'm doing wrong?
My code:
child: ScrollablePositionedList.builder(
itemScrollController: itemController,
itemCount: selectedChallenge.contestantsList.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final sortedList = selectedChallenge.contestantsList
..sort((itemOne, itemTwo) =>
itemTwo.points.compareTo(itemOne.points));
final data = sortedList[index];
// My for loop
for (var i = 0;
i < selectedChallenge.contestantsList.length;
i++,) {
return Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text('${i}'),
),
SizedBox(
height: 35,
width: 35,
child: CachedNetworkImage(
imageUrl: data.avatar,
),
),
SizedBox(
width: 12,
),
Text(
data.firstName + ' ' + data.lastName,
),
],
),
Text(data.points.toString()),
],
),
);
}
},
),
What I got:
What I want:
]
Use the index of your builder and remove the for loop
ScrollablePositionedList.builder(
itemScrollController: itemController,
itemCount: selectedChallenge.contestantsList.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final sortedList = selectedChallenge.contestantsList
..sort((itemOne, itemTwo) =>
itemTwo.points.compareTo(itemOne.points));
final data = sortedList[index];
return Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text('${index + 1}'),
),
// rest of the code
Another suggestion is to sort the list first before building it.
// sort the list first in a method or something
final sortedList = selectedChallenge.contestantsList
..sort((itemOne, itemTwo) =>
itemTwo.points.compareTo(itemOne.points));
// build it
ScrollablePositionedList.builder(
itemScrollController: itemController,
itemCount: sortedList.length,
Try below code hope its help to you.
declare one int variable
int index = 1;
Your Widget.
Text(
(index + 1).toString(),
),
Whole Widget.
SingleChildScrollView(
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(
top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: Expanded(
child: Text(
(index + 1).toString(),
),
),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(
color: Colors.black87))
],
),
)));
})
],
),
),
Your result screen like->
It has some good features that I was looking for, and works with my code
I'm trying to make ToDo app, and I have problem with slidable widget. I'm putting Slidable inside the ListTile element, and it appears to overlay the parent. Actually, if I specify height of the parent list, it doesn't happen, but I can't specify the height of parent list, because it needs to be set automatically as new element is added to the list, this is why I use shrinkWrap property.
EDIT: I found package that does exactly what I need. It has some iOS-like slide features, and even some animations.
https://pub.dev/packages/flutter_swipe_action_cell
Widget build(BuildContext context) {
return Column(
children: [
Container(
margin: EdgeInsets.only(bottom: 20),
child: Container(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: this.widget.listNotes.length,
itemBuilder: (context, index) {
var content = this.widget.listNotes[index];
return Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: ListTile(
title: Container(
child: Slidable(
controller: slidableController,
actionPane: SlidableStrechActionPane(),
actionExtentRatio: 0.4,
secondaryActions: <Widget>[
SlideAction(
color: Colors.red,
child: Text(
'Delete',
style: TextStyle(
fontSize: 15, color: Colors.white),
maxLines: 1,
),
onTap: () => deleteNote(index),
),
],
child: Row(
children: [
Container(
child: Transform.scale(
scale: 1.7,
child: Radio(
toggleable: true,
value: '${index}' + 'ok',
groupValue: groupVal,
onChanged: (value) {
setState(() {
groupVal = value;
});
},
activeColor: Color(0xffFFBD11),
),
),
),
InkWell(
onTap: () {
print('object');
},
child: Container(
width: 230,
padding:
EdgeInsets.fromLTRB(0, 10, 12, 12),
margin: EdgeInsets.only(left: 5),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFFBABABA),
width: 0.5))),
child: Text(
content.note,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w300,
fontSize: 18),
),
),
),
],
),
),
),
),
),
],
);
}),
),
),
Hi #XRSIL your code is wrong, because the slidable widget must be the widget that contains the ListTile, like this example:
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: this.widget.listNotes.length,
itemBuilder: (context, index) {
return Slidable(
actionPane: SlidableDrawerActionPane(),
child: Container(
child: ListTile(title: Text('Title'),
),
));
}
)
error: The element type 'List' can't be assigned to the list type 'Widget'.
I am learning to make flutter apps and this same code is illustrated by other person who is teaching me in that video and it works fine. Maybe its a version problem.
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('₹${widget.order.amount}'),
subtitle: Text(DateFormat('dd/MM/yyyy hh:mm').format(widget.order.dateTime)),
trailing: IconButton(icon: Icon(_expanded ? Icons.expand_less :Icons.expand_more),
onPressed: (){
setState(() {
_expanded = !_expanded;
});
}),
),
if(_expanded)
Container(
height: min(widget.order.products.length * 20.0 + 10, 100),
child: ListView(
children: [
widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text('₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList()
],
),
)
],
),
);
You should remove [ ] while mapping, check below
ListView(
children: widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text(
'₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList(),
),
just remove the [] of the children of the ListView
Your code should be as follows:
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('₹${widget.order.amount}'),
subtitle: Text(DateFormat('dd/MM/yyyy hh:mm').format(widget.order.dateTime)),
trailing: IconButton(icon: Icon(_expanded ? Icons.expand_less :Icons.expand_more),
onPressed: (){
setState(() {
_expanded = !_expanded;
});
}),
),
if(_expanded)
Container(
height: min(widget.order.products.length * 20.0 + 10, 100),
child: ListView(
children:
widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text('₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList()
,
),
)
],
),
);
Since you are already creating the list of widgets in the .toList(), it shouldn't be surrounded by []
The ListView widget requires 'List of Widgets', however, you're providing it with nested list of widgets as you're using map and returning 'Rows' while converting them into a list. So, in short ListView renders list of rows inside another list.
You may use the 'Spread Operator' to resolve the issue. It will take the each Row widget in nested list and place it as a direct child of 'ListView'.
Using three dots '...' before mapping the product will resolve the error. Like this;
"...widget.order.products.map((prod) => Row("
OR
just remove the [] of the children of the ListView. It will do the same trick.
I have a List<Address> where in the Address class there are several keys, between:
id, address, city and isPrimary.
I want to work with isPrimary, suppose that when I set isPrimary address from the list to true then that Address value positions to up (primary). how to do it?
The following is the List<Address> that I mean:
[
{ 'id': 1,
'address': '40 Talbot Ambler, PA 19002',
'city': 'New York',
'isPrimary': false
},
{ 'id': 2,
'address': '618 Oak Valley West Deptford, NJ 08096',
'city': 'Sydney',
'isPrimary': true
},
{ 'id': 3,
'address': '8207 Gulf Ringgold, GA 30736',
'city': 'London',
'isPrimary': false
},
{ 'id': 4,
'address': '873 Ridgewood St.Romeoville, IL 60446',
'city': 'Manchester',
'isPrimary': false
},
]
I want Address that is isPrimary = true to be at the top of the List, followed by a list below with isPrimary = false
So that looks like this:
[
{ 'id': 2,
'address': '618 Oak Valley West Deptford, NJ 08096',
'city': 'Sydney',
'isPrimary': true
},
{ 'id': 1,
'address': '40 Talbot Ambler, PA 19002',
'city': 'New York',
'isPrimary': false
},
{ 'id': 3,
'address': '8207 Gulf Ringgold, GA 30736',
'city': 'London',
'isPrimary': false
},
{ 'id': 4,
'address': '873 Ridgewood St.Romeoville, IL 60446',
'city': 'Manchester',
'isPrimary': false
},
]
See my code below:
class UserAddressItemList extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ScopedModelDescendant<MainModel>(
builder: (context, child, model) {
return model.isLoadingUser
? LoadingProgress
: model.addressList == null
? NoProductFound()
: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount:
model.addressList == null ? 0 : model.getAddressCount(),
itemBuilder: (context, i) {
var address = model.addressList[i];
return _buildAddressItemList(address, context);
},
);
},
);
}
Widget _buildAddressItemList(Address address, BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 3),
height: 150,
width: 280,
child: Card(
// color: Colors.blueGrey,
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(height: 15),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 20),
// color: Colors.greenAccent,
width: 120,
child: Text(
'${address.address}\n'
'${address.city}',
style: Theme.of(context).textTheme.title.copyWith(
fontSize: 16,
fontWeight: FontWeight.w400,
height: 1.1),
),
),
Container(
padding: EdgeInsets.only(right: 15),
child: Icon(
FontAwesomeIcons.minus,
size: 16,
color: Colors.red,
))
],
),
SizedBox(height: 5),
Container(
height: 20,
// color: Colors.green,
margin: EdgeInsets.symmetric(horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
padding: EdgeInsets.only(bottom: 2),
child: Text(
"Delivery Address",
style: Theme.of(context)
.textTheme
.caption
.copyWith(
fontSize: 12, color: Colors.grey[400]),
)),
SizedBox(width: 10),
Container(
child: Icon(FontAwesomeIcons.solidCheckCircle,
size: 20,
color: address.isPrimary
? Colors.blue[600]
: Colors.grey),
)
],
)),
SizedBox(height: 5),
],
)));
}
}
isPrimary is not used to set the position. You should manually set the position through ScrollController.
example code:
class ListViewPage extends StatefulWidget {
#override
ListViewPageState createState() {
return new ListViewPageState();
}
}
class ListViewPageState extends State<ListViewPage> {
ScrollController _scrollController;
#override
initState() {
_scrollController = ScrollController();
_scrollController.animateTo(
40.0, // insert your ListItem's height.
duration: Duration(
milliseconds: 500,
),
curve: Curves.linear,
);
super.initState();
}
Widget build(context) {
return ListView.builder(
controller: _scrollController,
itemCount: 100,
itemBuilder: (context, int index) {
return Container(
height: 40.0,
width: double.infinity,
child: Text(
index.toString(),
),
);
},
);
}
}