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),
                ),
              );
            });
      },
    ),
  ),
);

}

CodePudding user response：

• 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;
                });
              },
            );
          },
        );
      },
    );

CodePudding user response：

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