how to hide and show specific text when click on it using flutter

Question

I am trying to make all subtitle invisible (or make a hint ) and when Clint click on the subtitle (or a hint) I want to show them the subtitle only that subtitle who have clicked to be shown

note: my list is from database locally

here is a picture enter image description here

and here is my code

body: FutureBuilder(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        List snap = snapshot.data;

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError) {
          return Center(
            child: Text("error"),
          );
        }
        return ListView.builder(
            itemCount: snap.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(
                  " ${snap[index]['text']}",
                  textDirection: TextDirection.rtl,
                  style: TextStyle(fontSize: 22),
                ),
                subtitle: Text(
                  " ${snap[index]['answer']}",
                  textDirection: TextDirection.rtl,
                  style: TextStyle(fontSize: 18),
                ),
              );
            });
      },
    ),
  ),
);

}

you use any state management?

Ravi Limbani
– Ravi Limbani

2022-01-28 05:55:06 +00:00
Commented Jan 28, 2022 at 5:55 — Ravi Limbani
– Ravi Limbani, Commented Jan 28, 2022 at 5:55

nagendra nag · Accepted Answer · 2022-01-28 06:27:34Z

1

Use the Stateful widget for maintaining the state.
Declare a variable for maintaining the selected index.

  int? _selectedIndex;

when you click list item then update the state as shown below snippet.
- show subtitle conditionally or you can use Visibility widget.

FutureBuilder(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        List snap = snapshot.data;

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError) {
          return const Center(
            child: Text("error"),
          );
        }
        return ListView.builder(
          itemCount: snap.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                " ${snap[index]['text']}",
                textDirection: TextDirection.rtl,
                style: const TextStyle(fontSize: 22),
              ),
              subtitle: _selectedIndex == index
                  ? Text(
                      " ${snap[index]['answer']}",
                      textDirection: TextDirection.rtl,
                      style: const TextStyle(fontSize: 18),
                    )
                  : null,
              onTap: () {
                setState(() {
                  _selectedIndex = index;
                });
              },
            );
          },
        );
      },
    );

answered Jan 28, 2022 at 6:27

nagendra nag

1,3526 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amalm9479 Over a year ago

the code works but still one issue , when i scroll down and click on the subtitle it refresh and load data so i don't want to refresh and load data every time when click how i do that?

Piyush · Accepted Answer · 2022-01-28 03:02:00Z

0

Maintain a variable selected index. Show sub title only when selected index is equal to index

answered Jan 28, 2022 at 3:02

Piyush

1932 silver badges11 bronze badges

1 Comment

amalm9479 Over a year ago

Didn't get it , your answer is so brief , please if that possible explain it with more details

Collectives™ on Stack Overflow

how to hide and show specific text when click on it using flutter

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related