Dropdownbutton not displaying properly about dropdown_button2

[Leo-Chan01]

Okay, sir. I will adjust it to the default, if it doesn't work, I will get back to you.

[Leo-Chan01]

Thanks worked, yeah, just thought about that

You don't have to set it to default, just try to increase the value. You're trying to put a text with fontSize: 14 into an item with itemHeight: 5 and it doesn't fit. I think that was cause your issue.

Yeah, true, thanks a lot for your support

[AhmedLSayed9]

Can you provide a sample code of your issue? I think this is related to itemHeight you're using

[Leo-Chan01]

Here is my code sir

`import 'package:fidacom_app/screens/affiliate_application/application_coperate_screen.dart';
import 'package:fidacom_app/screens/affiliate_application/application_individual_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

import '../../theme.dart';

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

@OverRide
State createState() =>
_ApplicationTypeSelectionScreenState();
}

class _ApplicationTypeSelectionScreenState
extends State {
final List applicationTypes = [
"Cooperate Application",
"Individual Application"
];

String? selectedValue;

@OverRide
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
kLightPrimary,
Colors.white,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)),
child: Scaffold(
backgroundColor: Colors.transparent,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: Padding(
padding: const EdgeInsets.all(12),
child: SvgPicture.asset("assets/svgs/arraow-back.svg"),
),
centerTitle: true,
title: const Text("Application"),
),
body: SafeArea(
child: SizedBox(
height: double.infinity,
width: double.infinity,
child: Stack(
children: [
const Positioned(
top: 20,
child: Divider(
color: Colors.grey,
),
),
Positioned(
bottom: 0,
child: Center(
child: Container(
height: MediaQuery
.of(context)
.size
.height * 0.5,
width: MediaQuery
.of(context)
.size
.width,
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
const SizedBox(
width: 120,
child: Divider(
thickness: 2,
color: kPrimaryMain,
height: 0)),
SizedBox(
height: 32
),
Text("Select your application type to proceed"),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: DropdownButtonHideUnderline(
child: DropdownButton2(
isExpanded: true,
hint: Row(
children: const [
SizedBox(
width: 4,
),
Expanded(
child: Text(
'Application type',
style: TextStyle(
fontSize: 14,
color: kPrimary75,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
items: applicationTypes
.map((item) =>
DropdownMenuItem(
value: item,
child: Text(
item,
style: const TextStyle(
fontSize: 14,
color: kPrimary75,
),
overflow: TextOverflow.ellipsis,
),
))
.toList(),
value: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value as String;
});
if (selectedValue ==
'Cooperate Application') {
Navigator.push(
context,
MaterialPageRoute(
builder: () =>
const ApplicationCoperateScreen(),
),
);
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: () =>
const ApplicationIndividualScreen(),
),
);
}
},
icon: const Icon(
Icons.keyboard_arrow_down_outlined,
),
iconSize: 22,
iconEnabledColor: kPrimary75,
iconDisabledColor: Colors.grey,
buttonHeight: 50,
buttonWidth: double.infinity,
buttonPadding:
const EdgeInsets.only(left: 14, right: 14),
buttonDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: Colors.transparent,
),
color: Colors.white,
),
buttonElevation: 1,
itemHeight: 5,
itemPadding:
const EdgeInsets.only(left: 14, right: 14),
dropdownMaxHeight: 200,
dropdownWidth:
MediaQuery
.of(context)
.size
.width * 0.9,
dropdownPadding:
const EdgeInsets.symmetric(horizontal: 20),
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
),
dropdownElevation: 3,
scrollbarRadius: const Radius.circular(40),
scrollbarThickness: 6,
scrollbarAlwaysShow: true,
offset: const Offset(0, -20),
),
),
),
],
),
),
),
),
],
),
),
),
),
);
}
}
`

[Leo-Chan01]

Here is my code sir

`import 'package:fidacom_app/screens/affiliate_application/application_coperate_screen.dart'; import 'package:fidacom_app/screens/affiliate_application/application_individual_screen.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:dropdown_button2/dropdown_button2.dart';

import '../../theme.dart';

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

@OverRide State createState() => _ApplicationTypeSelectionScreenState(); }

class _ApplicationTypeSelectionScreenState extends State { final List applicationTypes = [ "Cooperate Application", "Individual Application" ];

String? selectedValue;

@OverRide Widget build(BuildContext context) { return Container( decoration: const BoxDecoration( gradient: LinearGradient( colors: [ kLightPrimary, Colors.white, ], begin: Alignment.topLeft, end: Alignment.bottomRight, )), child: Scaffold( backgroundColor: Colors.transparent, extendBodyBehindAppBar: true, appBar: AppBar( backgroundColor: Colors.transparent, elevation: 0, leading: Padding( padding: const EdgeInsets.all(12), child: SvgPicture.asset("assets/svgs/arraow-back.svg"), ), centerTitle: true, title: const Text("Application"), ), body: SafeArea( child: SizedBox( height: double.infinity, width: double.infinity, child: Stack( children: [ const Positioned( top: 20, child: Divider( color: Colors.grey, ), ), Positioned( bottom: 0, child: Center( child: Container( height: MediaQuery .of(context) .size .height * 0.5, width: MediaQuery .of(context) .size .width, decoration: BoxDecoration( color: Colors.white, ), child: Column( children: [ const SizedBox( width: 120, child: Divider( thickness: 2, color: kPrimaryMain, height: 0)), SizedBox( height: 32 ), Text("Select your application type to proceed"), SizedBox( height: 16, ), Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: DropdownButtonHideUnderline( child: DropdownButton2( isExpanded: true, hint: Row( children: const [ SizedBox( width: 4, ), Expanded( child: Text( 'Application type', style: TextStyle( fontSize: 14, color: kPrimary75, ), overflow: TextOverflow.ellipsis, ), ), ], ), items: applicationTypes .map((item) => DropdownMenuItem( value: item, child: Text( item, style: const TextStyle( fontSize: 14, color: kPrimary75, ), overflow: TextOverflow.ellipsis, ), )) .toList(), value: selectedValue, onChanged: (value) { setState(() { selectedValue = value as String; }); if (selectedValue == 'Cooperate Application') { Navigator.push( context, MaterialPageRoute( builder: () => const ApplicationCoperateScreen(), ), ); } else { Navigator.push( context, MaterialPageRoute( builder: () => const ApplicationIndividualScreen(), ), ); } }, icon: const Icon( Icons.keyboard_arrow_down_outlined, ), iconSize: 22, iconEnabledColor: kPrimary75, iconDisabledColor: Colors.grey, buttonHeight: 50, buttonWidth: double.infinity, buttonPadding: const EdgeInsets.only(left: 14, right: 14), buttonDecoration: BoxDecoration( borderRadius: BorderRadius.circular(5), border: Border.all( color: Colors.transparent, ), color: Colors.white, ), buttonElevation: 1, itemHeight: 5, itemPadding: const EdgeInsets.only(left: 14, right: 14), dropdownMaxHeight: 200, dropdownWidth: MediaQuery .of(context) .size .width * 0.9, dropdownPadding: const EdgeInsets.symmetric(horizontal: 20), dropdownDecoration: BoxDecoration( borderRadius: BorderRadius.circular(5), color: Colors.white, ), dropdownElevation: 3, scrollbarRadius: const Radius.circular(40), scrollbarThickness: 6, scrollbarAlwaysShow: true, offset: const Offset(0, -20), ), ), ), ], ), ), ), ), ], ), ), ), ), ); } } `

Please note that I didn't change any code since yesterday

[AhmedLSayed9]

You're setting itemHeight: 5. I think this what cause your issue

[AhmedLSayed9]

You don't have to set it to default, just try to increase the value. You're trying to put a text with fontSize: 14 into an item with itemHeight: 5 and it doesn't fit. I think that was cause your issue.