How to pick an item in a List and interpolate with a text when selected in flutter?

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.

>Solution :

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

Column(
      children: [
        Container(
          //color: Colors.white,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Container(
              margin: const EdgeInsets.all(8.0),
              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: TextStyle(
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500,
                                    color: current == i ? Colors.white : Colors.grey),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
        Text('Showing ${items[current]} around Canada'),//Here is a change I made
      ],
    );