I have a list of items :
List<String> items = [
"All",
"Tailors",
"Mechanic",
"Laundry",
"Electrical",
"Web Developer",
"Welder"
];
These list are rendered in a horizontal scroll and are selectable as thus :
This is the code that builds the scrollable items :
mainHeader() {
return Column(
children: [
Container(
//color: Colors.white,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
constraints: const BoxConstraints(
maxWidth: 600, maxHeight: 100),
width: double.infinity,
child: IntrinsicWidth(
child: FittedBox(
fit: BoxFit.fitWidth,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
for (int i = 0; i < items.length; i++) ...[
GestureDetector(
onTap: () {
setState(() {
current = i;
});
},
child: AnimatedContainer(
height: 40,
duration:
const Duration(milliseconds: 300),
margin: const EdgeInsets.all(8),
padding: const EdgeInsets.only(
left: 20.0,
right: 20.0,
top: 4,
bottom: 4),
decoration: BoxDecoration(
color: current == i
? const Color(0xff34495E)
: const Color(0xffF5F5F5),
borderRadius:
BorderRadius.circular(50),
),
child: Center(
child: Text(
items[i],
style: GoogleFonts.poppins(
fontSize: 15,
fontWeight: FontWeight.w500,
color: current == i
? Colors.white
: Colors.grey),
),
),
),
),
],
],
),
),
),
),
],
),
);
}(),
],
),
),
),
],
);
}
I want to interpolate each item in the list Text()
widget. Meaning when an item is selected from the scroll, it should appear as a string in `Text()’ widget and also change when another item is selected.
How do i achieve this?
I did something like this
Text('Showing $items around Canada'),
But it don’t work.
2
Answers
You can use
current
to find the filter and show the list based on that.I’m just writing a code to show the usage of
current
Here is your answer.
You have to take another variable for displaying your
Text
. Becausecurrent
variable you is using inBuild UI
so, we can not setcurrent
variable value asnull
.So, declar new variable like below:
Assign value to selectedItem when user select any
Item
inGestureDetector's
onTap
Use below code to display your text.