Search code examples
fluttergridviewflutter-getx

How to achive this random width grid view in flutter


enter image description hereThese texts will come from rest API. I need to show these in a bottom sheet. But I am not supposed to keep the width fix. Instead, the container's width will depend on text's length. How to make this in flutter?

GridView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.all(0),
                  itemCount: controller.data.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                  ),
                  itemBuilder: (BuildContext context, int index) {
                    return Obx(() => controller.fakeObs.isTrue
                        ? InkWell(
                            onTap: () {
                              controller.commentTap(
                                  text: "${controller.data[index]}");
                            },
                            child: Container(
                              color: Colors.white,
                              child: Text("${controller.data[index]}"),
                            ),
                          )
                        : Container());
                  },
                )

Solution

  • I have found a widget that surves my purpose. Sharing here

    Wrap(
                        spacing: 8.0, // gap between adjacent chips
                        runSpacing: 4.0, // gap between lines
                        children: <Widget>[
                          for (int index = 0;
                              index < controller.data.length;
                              index++)
                            FilterChip(
                              backgroundColor: Colors.white,
                              elevation: 5,
                              labelStyle: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                              label: Text(
                                "${controller.data[index]}",
                                style: TextStyle(
                                    fontSize: 10,
                                    fontWeight: AppTextStyle.mediumFont,
                                    color: AppColors.TextGrey),
                              ),
                              onSelected: (bool value) {
                                print(
                                    "DATA IS ${controller.data[index]} $value");
                              },
                            )
                        ],
                      ),