I have a flutter widget that uses a DropDownButton and it shows up on my Linux computer but not my Android emulator or Pixel. I have no clue where to start and cant really find anything on Google, Here is the code
class WidgetDropdown extends StatefulWidget {
final String text;
final IconData PickedIcon; // add IconData type
final List<Widget> children;
const WidgetDropdown(
{Key? key,
required this.text,
required this.PickedIcon,
required this.children}) // add this keyword
: super(key: key);
@override
_WidgetDropdownState createState() => _WidgetDropdownState();
}
class TextPair extends StatelessWidget {
final String text1;
const TextPair({Key? key, required this.text1}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
text1[0],
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
// SizedBox(width: 8.0),
Text(
text1.substring(1),
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
],
);
}
}
class _WidgetDropdownState extends State<WidgetDropdown>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
bool _isExpanded = false;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 160),
vsync: this,
);
_animation = Tween<double>(begin: 0.0, end: 0.5).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _toggle() {
setState(() {
_isExpanded = !_isExpanded;
if (_isExpanded) {
_controller.forward();
} else {
_controller.reverse();
}
});
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
InkWell(
onTap: _toggle,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
widget.PickedIcon,
color: formiconcolor,
),
Expanded(
// add this line
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(widget.text),
),
), // add this line
// or change this line
// child: Text(widget.text, textAlign: TextAlign.left), // add this parameter
RotationTransition(
turns: _animation,
child: Icon(
Icons.arrow_drop_down,
color: formiconcolor,
),
),
],
),
),
),
if (_isExpanded)
Padding(
padding: const EdgeInsets.only(top: 8),
child: Column(
children: widget.children,
),
),
],
),
);
}
}
And how it is used.
SizedBox(width: double.infinity, child: DropdownList(items: getNickNames(), icon: Icons.restore_from_trash, hint: "Select a car", controller: carcontroller))
I tried changing the style properties and adding padding but neither of those worked.
I use this cutome global drop down widget
class CustomDropdownButton<T> extends StatefulWidget {
final List<T> items;
final T? value;
final ValueChanged<T?> onChanged;
final Widget Function(T) itemBuilder;
final Widget? lable;
final EdgeInsetsGeometry? contentPadding;
final String? Function(T?)? validator;
final String? hint;
const CustomDropdownButton({
super.key,
required this.items,
this.value,
required this.onChanged,
required this.itemBuilder,
this.lable,
this.contentPadding,
this.validator,
this.hint,
});
@override
CustomDropdownButtonState<T> createState() => CustomDropdownButtonState<T>();
}
class CustomDropdownButtonState<T> extends State<CustomDropdownButton<T>> {
@override
Widget build(BuildContext context) {
return DropdownButtonFormField<T>(
value: widget.value,
validator: widget.validator,
style: TextStyle(fontSize: 12.sp),
hint: widget.hint == null
? null
: Text(
widget.hint!,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
),
),
onChanged: widget.onChanged,
dropdownColor: Colors.white,
focusColor: Colots.blue,
items: widget.items.map<DropdownMenuItem<T>>((T value) {
return DropdownMenuItem<T>(
value: value,
child: widget.itemBuilder(value),
);
}).toList(),
);
}
}
and I use it any where i need like that
Theme(data: Theme.of(context).copyWith(
buttonTheme: ButtonTheme.of(context).copyWith(
alignedDropdown: true,
)),
child:CustomDropdownButton<CustomeType>(
value: initVaue,
hint: 'hint',
items: [listOfItems]<CustomeType>,
itemBuilder: (CustomeType item) => Text(item.name!),
onChanged: (CustomeType? item) {
// TODO selected Item
},
validator: (Government? value) {
// TODOYour Validator
},
),),
and Theme Widget To Customize the style of it
I used your code snippet, which worked for me on a pixel device. I just changed some points
change this
_WidgetDropdownState createState() => _WidgetDropdownState();
to
State<WidgetDropdown> createState() => _WidgetDropdownState();
If this didn’t work, please check the rest of the widget tree in case of overflow error.