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

Issue

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.

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';
import 'package:femija_musliman/rendit_fjalet_quiz.dart';

import 'dataset.dart';

class RenditFjaletButton extends StatefulWidget {
  RenditFjaletButton({required this.QuizList, Key? key}) : super(key: key);
  late List QuizList;

  @override
  State<RenditFjaletButton> createState() => _RenditFjaletButtonState();
}

class _RenditFjaletButtonState extends State<RenditFjaletButton> {
  late Future<List<QuizInfo>?> futureData;

  int counter = 1;
  int counterForChips = 0;
  bool showWord = true;
  int _selectedChipsIndex = 0;
  List selectReportList = [];

  void initState() {
    super.initState();
    futureData = fetchData1() as Future<List<QuizInfo>?>;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            toolbarHeight: 23.h,
            backgroundColor: Color(0xFFEF6E98),
            title: Column(children: <Widget>[
              Align(
                alignment: Alignment.topCenter,
                child: Padding(
                  padding: const EdgeInsets.only(right: 50),
                  child: Text(
                    'Rendit Fjalet',
                    style: TextStyle(fontSize: 25.sp),
                  ),
                ),
              ),
              Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(right: 60, bottom: 60),
                    child: Text(
                      '- Fjala numer:  -',
                      style: TextStyle(fontSize: 18.sp),
                    ),
                  ))
            ])),
        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) {
                          var chipsText = widget.QuizList[index].toString();

                          void _handleTap(int index) {
                            setState(() {
                              _selectedChipsIndex = index;
                            });
                          }

                          return GestureDetector(
                              onTap: () {
                                _handleTap(index);
                              },
                              child: Chip(
                                label: Text(
                                  chipsText,
                                  style: TextStyle(
                                      fontSize: 20.sp,
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                                backgroundColor: Color(0xFF50CFFD),
                              ));
                        }),
                      )),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 170, left: 40),
                    child: Align(
                      alignment: Alignment.bottomLeft,
                      child: Text(
                        " ${(widget.QuizList[_selectedChipsIndex])}",
                        style: TextStyle(
                            fontSize: 20.sp,
                            color: Color(0xFF50CFFD),
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 155),
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 30),
                        child: Divider(
                          endIndent: 30,
                          thickness: 5,
                          color: Colors.pinkAccent,
                        ),
                      ),
                    ),
                  )
                ]);
              }
              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

Solution

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

I just Create new list with same model type and add item, if that item is selected .

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



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

  @override
  State<RenditFjaletButton> createState() => _RenditFjaletButtonState();
}

class _RenditFjaletButtonState extends State<RenditFjaletButton> {
  late Future<List<QuizInfo>?> futureData;

  List<QuizInfo> selectReportList = [];

  List<QuizInfo> quizList = [
    QuizInfo(
      title: "Twitter",
    ),
    QuizInfo(
      title: "Instagram",
    ),
    QuizInfo(title: "Facebook"),
    QuizInfo(title: "Stackoverflow"),
    QuizInfo(title: "Github"),
  ];

  void initState() {
    super.initState();
    futureData = fetchData1() as Future<List<QuizInfo>?>;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            toolbarHeight: 23,
            backgroundColor: const Color(0xFFEF6E98),
            title: Column(children: const [
              Align(
                alignment: Alignment.topCenter,
                child: Padding(
                  padding: EdgeInsets.only(right: 50),
                  child: Text(
                    'Rendit Fjalet',
                    style: TextStyle(fontSize: 25),
                  ),
                ),
              ),
              Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: EdgeInsets.only(right: 60, bottom: 60),
                    child: Text(
                      '- Fjala numer:  -',
                      style: TextStyle(fontSize: 18),
                    ),
                  ))
            ])),
        body: Stack(children: [
          Container(
            decoration: const  BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(
                      'assets/background.PNG',
                    ),
                    fit: BoxFit.cover)),
          ),
          Container(
              margin: const EdgeInsets.all(20),
              child: Wrap(
                direction: Axis.horizontal,
                spacing: 20,
                children: List<Widget>.generate(quizList.length, (int index) {
                  var chipsText = quizList[index].title.toString();

                  return GestureDetector(
                      onTap: () {
                        setState(() {
                          quizList[index].visible = !(quizList[index].visible);
                          if (quizList[index].visible) {
                            selectReportList.add(quizList[index]);
                          } else {
                            selectReportList.remove(quizList[index]);
                            selectReportList.join(', ');
                          }
                        });
                      },
                      child: Chip(
                        label: Text(
                          chipsText,
                          style: const TextStyle(
                              fontSize: 20,
                              color: Colors.white,
                              fontWeight: FontWeight.bold),
                        ),
                        backgroundColor: quizList[index].visible
                            ? Colors.pinkAccent
                            : const Color(0xFF50CFFD),
                      ));
                }),
              )),

          Padding(
            padding: const EdgeInsets.only(bottom: 170, left: 40),
            child: Align(
                alignment: Alignment.bottomLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Wrap(
                              direction: Axis.horizontal,
                              spacing: 20,
                              children: List<Widget>.generate(
                                  selectReportList.length, (int index) {
                                return Text(
                                  " ${(selectReportList[index].title)}",
                                  style: const TextStyle(
                                      fontSize: 20,
                                      color: Color(0xFF50CFFD),
                                      fontWeight: FontWeight.bold),
                                );
                              })),
                          Divider(
                            endIndent: 30,
                            thickness: 5,
                            color: Colors.pinkAccent,
                          ),
                        ],
                      ),
                    ),
                    IconButton(
                        onPressed: () {
                          setState(() {
                            selectReportList.clear();
                            
                          });
                        },
                        icon: Icon(
                          Icons.cancel,
                          color: Colors.pinkAccent,
                        ))
                  ],
                )),
          ),
        ]));
  }
}

Answered By - Shruti Ramnandan Sharma