Flutter How to display Chips text on the screen when Chip's pressed?-CodePudding

Was Wondering how could i display the text that is within the Chip on the screen when the user taps on the chip, would like the text to be below the Chip, and when the user presses the chips and the words display and there is no horizontal space than the word should go on a new line below.

body: FutureBuilder<List<QuizInfo>?>(
            future: futureData,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                List<QuizInfo>? data = snapshot.data;
                return Stack(children: [
                  Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                              'assets/background.PNG',
                            ),
                            fit: BoxFit.cover)),
                  Container(
                      margin: EdgeInsets.all(20), 
                      child: Wrap(
                          direction: Axis.horizontal,
                          spacing: 20,
                          children: List<Widget>.generate(
                              widget.QuizList.length, (int index) {
                            return GestureDetector(
                                onTap: () {},
                                child: Chip(
                                  label: Text(
                                    widget.QuizList[index].toString(),
                                    style: TextStyle(
                                        fontSize: 20.sp,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  backgroundColor: Color(0xFF50CFFD),
                                ));
                          })))
                ]);
              }
              return Center(child: CircularProgressIndicator());
            }));
  }
}

So the image is what i want to achieve right now i only have the chips with words on them, i want to when the user presses the chip i want the word within the chip to display at and when there is no horizontal space the text displays on a new line ]click for image

CodePudding user response：

Add a variable called something like chipText, and then on this part

    return GestureDetector(
        onTap: () {
            chipText = widget.QuizList[index].toString()
            },

Create a new Text widget (or any other you want the tapped text to be displayed) in your Stack children's list.

After it, set the state, or whatever state management way you are using your app.

CodePudding user response：

if I'm not wrong , you're achieving this:

I just added boolean variable to model class for each item , then assigned visibility when user pressed the chip then added Visibility widget to manage the showing text.

class QuizInfo {
  String? title;
  bool visible;
  QuizInfo({required this.title, this.visible = false});
}

class Sample extends StatefulWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  List<QuizInfo> data = [
    QuizInfo(
      title: "Twitter",
    ),
    QuizInfo(
      title: "Instagram",
    ),
    QuizInfo(title: "Facebook"),
    QuizInfo(title: "Stackoverflow"),
    QuizInfo(title: "Github"),
  ];

  

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
          margin: const EdgeInsets.only(top: 50),
          padding: const EdgeInsets.all(20),
          child: Wrap(
              direction: Axis.horizontal,
              spacing: 20,
              children: List<Widget>.generate(data.length, (int index) {
                return GestureDetector(
                    onTap: () => setState(() => data[index].visible = !data[index].visible),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Chip(
                          label: Text(
                            data[index].title.toString(),
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          backgroundColor: Color(0xFF50CFFD),
                        ),
                        Visibility(
                          visible: data[index].visible,
                          child: Text(
                            data[index].title.toString(),
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        )
                      ],
                    ));
              }))),
    );
  }
}