Flutter Riverpod listview index length - flutter

I have a listview which is using flutter_riverpod. The listview have 2 variable.
First variable is word text and second variable is length of index.
ListView.builder(
itemCount: ref.watch(itemsProvider).length,
itemBuilder: (BuildContext context, int index) {
return Row(
children: [
Text(ref.watch(itemsProvider)[index]),
Text(ref.watch(itemsProvider)[index].length),
],
);
},
),
I am using this listview.builder. the first text of Row is working but second text of Row is not working.
The error:
the argument type 'int ' can't be assigned to the parameter type 'string'
How can I solve this problem. The is no problem in widget. I am using consumerwidget, ref and widgetref. and scopped runapp.

Text widget seeks from String, Use string format
Text("${ref.watch(itemsProvider)[index].length}"),
Also, you can use .toString()
More about dart-core

Related

Can I get a logic/code for highlighting the desired value in the list view builder in flutter

[
Can I get a logic/code for highlighting just the selected value from this list view which is inside a container and it is scrollable also that the axis is set to Horizontal.
I have used a list view builder to align the same and also generated the list of numbers.
Please check the sample image of the widget attached.
Blockquote
]1
It's hard to tell you exactly how to do it without any code examples, and I'm also not sure what you mean by selected. Is that already decided before building the list, or is it decided when the user selects from the list?
If it is already decided, you can pass a value from the parent component that tells the list to highlight a certain value.
If a user is selecting the value to highlight, you can use a combination of setState and onTap with GestureDetector. Here's a potential rough skeleton:
int selectedIndex?;
ListView.builder(
itemCount: litems.length,
itemBuilder: (BuildContext ctx, int index) {
return GestureDetector(
onTap: () {
setState(() {
selectedIndex = index;
});
},
child: Container(
backgroundColor: selectedIndex == index ? highlightedColor : undefined;
child: {{child content}}
),
);
}
)

The named parameter isn't defined (data persistence)

There is my error , I want to solve this problem
enter image description here
The named parameter 'itemCount' isn't defined.
The named parameter 'itemBuilder' isn't defined.
You are using the default constructor that has different named parameters, you need to use ListView.builder() to use those named arguments.
Hello Syed i might thing that your try to use Listview() on Place of Listview.builder()....
ListView(
children: [
Container(),
],
),
ListView.builder(
itemCount: 2,
itemBuilder: (context, index){
return Container();
}
),
A ListView() don't have thies properties but a ListView.builder() have they.
list view have children and not itembuilder.

Flutter show iconButton based on Map

i have a map like this:
static const Map<String, Map<String, String>> social = {
'personA': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personB': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personC': {
'facebook': 'https://www.facebook.com/...',
},
};
It's possible to show iconButton, with the font_awesome icon, for each
social related to each person, and on click redirect to the link?, how ?
i tried like this:
Row(
children: <Widget>[
ListView.builder(
itemBuilder: (_) {
return Constants.social[person].keys.map((e) =>
IconButton(icon: FaIcon(FontAwesomeIcons.e), onPressed: {
print("example");
});
);
}
)
],
),
but i receive the error:
The argument type 'Widget Function(BuildContext)' can't be assigned to the parameter type 'Widget Function(BuildContext, int)'
the variable person can contain personA, personB or personC.
For example for personA i want to to show 2 iconButton one for twitch and one for instagram but for personC i want to show only facebook icon.
ListView is a widget that represents a list of widgets arranged linearly.
You have multiple constructors for this widget. The one you used, ListView.builder() is the one suggested when there is a large number of children to be displayed. (In your example, if the Map contains many players.)
The default constructor only requires a List<Widget> and is considerably more simple. If you don't have a large map, I strongly suggest you to use this one instead. But since you tried using the builder one, you should do as follow:
First, have your data arranged in a List. This way you can access the elements through an integer index easily: List[0]. Ideally you should have the data already in a list form, but if you need you can convert it like this:
static const Map<String, Map<String, String>> social = {
'personA': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personB': {
'twitch': 'https://www.twitch.tv/...',
'instagram': 'https://www.instagram.com/.../'
},
'personC': {
'facebook': 'https://www.facebook.com/...',
},
};
List<Map<String,String>> listUsers = List().from(social.values);
For more information on these methods, check this and this.
Supply the number of itens your listview will have through the itemCount parameter:
[...]
ListView.builder(
itemCount: listUsers.length,
itemBuilder: (context, index) {
[...]
Your error says the builder function needs to receive another integer parameter:
'Widget Function(BuildContext)' can't be assigned to the parameter type
'Widget Function(BuildContext, int)```.
This integer parameter represents what widget in the list it will be. Your builder function needs to return only one widget, and it receives the index parameter so you can know which one it is:
Row(
children: <Widget>[
ListView.builder(
itemCount: listUsers.length,
itemBuilder: (context, index) {
return Column(children:[
if (listUsers[index].containsKey('twitch'))
IconButton(icon: FaIcon(FontAwesomeIcons.twitch), onPressed: (){//Access listUsers[index]['twitch'] here
}),
if (listUsers[index].containsKey('instagram'))
IconButton(icon: FaIcon(FontAwesomeIcons.instagram), onPressed: (){//Access listUsers[index]['instagram'] here
})
])
}
)
],
),
This should be enough to have your desired result. As a suggestion, you can read the official documentation which has many good examples and explanations. The Dart Language tour is also a great place for examples about the language. They are both well written and in this case would get you in the right track.

Dynamic ListView of stateful widgets not working

Dears,
it could be just a mistake of mine but ...it's driving me crazy ;)
I have a ListView inside my statefulwidget:
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(10.0),
itemCount: searchableFoodList.length,
itemBuilder: (BuildContext context, int index) {
print('4 - SFL - ${searchableFoodList[index].id} - ${searchableFoodList[index].name}');
return
FoodItem(
id: searchableFoodList[index].id,
baseUnit: searchableFoodList[index].baseUnit,
baseUnitS: searchableFoodList[index].baseUnitS,
baseVal: searchableFoodList[index].baseVal,
baseValCal: searchableFoodList[index].baseValCal,
mediumVal: searchableFoodList[index].mediumVal,
mediumValCal: searchableFoodList[index].mediumValCal,
name: searchableFoodList[index].name,
note: searchableFoodList[index].note
);
},
),
searchableFoodList is modified (according user selection) inside a setState().
Let say that we have a 3 FoodItem(s), so my searchableFoodList is [FoodItem-1, FoodItem-2, FoodItem-3] and everything is working fine.
If I select a single item in my list, let say "FoodItem-2", the searchableFoodList becomes [FoodItem-2] and the list displayed contains (correctly) just one item but it is FoodItem-1.
Note that I inserted a print ...and it prints "FoodItem-2"
I guess that the problem is that it is considered the "original list" and it is changed only the length of the list but the list itself is not re-generated.
I have no more ideas ...any suggestions to solve this problem?
P.S.
FoodItem is stateful widget as well (an animated one). I did something similar with using stateless widget and I didn't have any problem

staggered grid view in flutter

I am making a grid like instagram where every seventh element is of 2X1. The problem is i want to show a different widget at seventh index but my code splits the gridTile widget rather than showing a different widget.
CODE:-
return StaggeredGridView.countBuilder(
shrinkWrap: true,
crossAxisCount: 3,
itemCount: gridTile.length,
itemBuilder: (context,index)=>gridTile[index],
staggeredTileBuilder: (index)=>StaggeredTile.count(
1,(index%7==0)?2:1,
),
);
Just Change your itemBuilder line of code as follow instead of "yourWidget" please write widget name you want to return.
itemBuilder : (context, index) {
return index % 7 == 0 ? yourWidget : gridTile[index];
},