0

I have a DropDownButton in the bottom bar navigation. To reduce the size of the DropDownMenuItem. i have given true to the alignedDropdown in the ButtonTheme. But, It causing the DropDownButton to overflow on the right side. I tried to reduce the space between the text and the dropdown icon. But there is no way to reduce the space between them. How do I solve this?

Language DropDown:

class LanguageDropDown extends GetView {
  const LanguageDropDown({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LanguageDropDownController>(
      init: LanguageDropDownController(),
      builder: (languageDropDownController) {
        return ButtonTheme(
          alignedDropdown: true,
          child: DropdownButton<Flag>(
            value: languageDropDownController.selectedLanguage,
            underline: const SizedBox.shrink(),
            isDense: true,
            onChanged: (Flag? language) =>
                languageDropDownController.onchange(language),
            items: kLanguageDropDown.map(
              (language) {
                return DropdownMenuItem<Flag>(
                  alignment: AlignmentDirectional.center,
                  value: language,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        radius: kWidth * 0.035,
                        backgroundImage: NetworkImage(
                          "$baseUrl/${language.image}",
                        ),
                        onBackgroundImageError: <AssetImage>(context, _) {
                          return Image.asset(
                            "assets/images/nl.png",
                          );
                        },
                      ),
                      SizedBox(
                        width: kWidth * 0.025,
                      ),
                      CommonText(
                          text: language.country, size: 1, boldText: false)
                    ],
                  ),
                );
              },
            ).toList(),
          ),
        );
      },
    );
  }
}

BottomNavigationBar :

class CommonBottomNavigationBar extends StatelessWidget {
  const CommonBottomNavigationBar({
    Key? key,
    required this.itemList,
    this.onWillPop,
    this.title,
    this.onPressed,
  }) : super(key: key);

  final List<Widget> itemList;

  final WillPopCallback? onWillPop;

  final String? title;

  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: onWillPop ??
          () async {
            Get.back();
            return true;
          },
      child: Scaffold(
        backgroundColor: kWhite,
        endDrawer: const CommonDrawer(),
        endDrawerEnableOpenDragGesture: false,
        appBar: CommonAppBar(
          title: title != null ? "$title" : "",
          onPressed: onPressed ??
              () {
                Get.back();
              },
        ),
        body: SizedBox(
          width: kWidth,
          height: kHeight,
          child: Obx(() => itemList.elementAt(kSelectedBar.value)),
        ),
        bottomNavigationBar: Obx(
          () => BottomNavigationBar(
            currentIndex: kSelectedBar.value,
            backgroundColor: kWhite,
            selectedItemColor: kOrange,
            unselectedItemColor: kBlack45,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            elevation: 1,
            type: BottomNavigationBarType.fixed,
            onTap: (int index) {
              if (Get.currentRoute != "/tasklist" &&
                  Get.currentRoute != "/login" &&
                  Get.currentRoute != "/password") {
                Get.offNamed("/tasklist");
              }
              kSelectedBar.value = index;
            },
            items: [
              const BottomNavigationBarItem(
                tooltip: "",
                label: "Language",
                icon: LanguageDropDown(),
              ),
              BottomNavigationBarItem(
                tooltip: "",
                label: "List",
                icon: Icon(
                  Icons.list,
                  size: kWidth * 0.08,
                ),
              ),
              BottomNavigationBarItem(
                tooltip: "",
                label: "Notifications",
                icon: Icon(
                  Icons.notifications_none,
                  size: kWidth * 0.08,
                ),
              ),
              BottomNavigationBarItem(
                tooltip: "",
                label: "Profile",
                icon: Icon(
                  Icons.person_outline,
                  size: kWidth * 0.08,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Flutter
  • 123
  • 1
  • 9

0 Answers0