skip to Main Content

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 :

enter image description here

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


  1. 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
          ],
        );
    
    Login or Signup to reply.
  2. Here is your answer.

    You have to take another variable for displaying your Text. Because current variable you is using in Build UI so, we can not set current variable value as null.

    So, declar new variable like below:

    int? selectedItem;
    

    Assign value to selectedItem when user select any Item in GestureDetector's onTap

    onTap: () {
       setState(() {
         current = i;
         selectedItem = i;
     });
    },
    

    Use below code to display your text.

    Visibility(
      visible: selectedItem != null,
      child: Text("Showing ${items[selectedItem]} around Canada'"),
    ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search