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,
),
),
],
),
),
),
);
}
}