How to make sub-categories on flutter-CodePudding

I am giving an example when I click on the category group (fertilizer, medicine, etc.) that appears in the current picture, it will show 4 sub-categories, of course, it will be closed when I press it again. How can I do this in the most convenient way? Thank you everyone in advance

Container(
          alignment: Alignment.center,
          padding: EdgeInsets.only(left: Dimensions.width10),
          child: Flex(
            direction: Axis.horizontal,
            children: [Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    TextButton.icon(
                      onPressed: () {
                        setState(() {
                          _selectedPage = Page.el_makasi;
                        });
                      },
                      icon: Icon(
                        Icons.arrow_drop_down,
                        color:
                            _selectedPage == Page.el_makasi ? active : notActive,
                      ),
                      label: const Text(
                        "Tohum",
                        style: TextStyle(color: AppColor.mainColor),
                      ),
                    ),
                    TextButton.icon(
                      onPressed: () {
                        setState(() {
                          _selectedPage = Page.gubre;
                        });
                      },
                      icon: Icon(
                        Icons.arrow_drop_down,
                        color: _selectedPage == Page.gubre ? active : notActive,
                      ),
                      label: const Text("Gübre",
                          style: TextStyle(color: AppColor.mainColor)),
                    ),
                    TextButton.icon(
                      onPressed: () {
                        setState(() {
                          _selectedPage = Page.ilac;
                        });
                      },
                      icon: Icon(
                        Icons.arrow_drop_down,
                        color: _selectedPage == Page.ilac ? active : notActive,
                      ),
                      label: const Text("İlaç",
                          style: TextStyle(color: AppColor.mainColor)),
                    ),
                    TextButton.icon(
                      onPressed: () {
                        setState(() {
                          _selectedPage = Page.tohum;
                        });
                      },
                      icon: Icon(
                        Icons.arrow_drop_down,
                        color: _selectedPage == Page.tohum ? active : notActive,
                      ),
                      label: const Text("Makineler",
                          style: TextStyle(color: AppColor.mainColor)),
                    ),
                    TextButton.icon(
                      onPressed: () {
                        setState(() {
                          _selectedPage = Page.makine;
                        });
                      },
                      icon: Icon(
                        Icons.arrow_drop_down,
                        color: _selectedPage == Page.makine ? active : notActive,
                      ),
                      label: const Text("El makası",
                          style: TextStyle(color: AppColor.mainColor)),
                    ),
                  ],
                ),
              ),
            ),]
          ),
        ),

CodePudding user response：

make a list within pages and select them with index in onPressed.

CodePudding user response：

ExpansionTile is the best way to do this thing in an effective manner.

ExpansionTile(
                  title: Text("Ilac",
                      style: TextStyle(color:AppColor.mainColor)),
                  children: [
                    // here show 4 sub-categories, as pre UI design
                    Container(),
                    Container(),
                  ],
                ),