Filter by Widgets


DropdownButton Widget

This Tutorials is posted by niebin312 at 04-03-2019 05:15:26



In this tutorial, you will learn how to use the DropdownButton in the flutter.

result

Before Start

Before starting our tutorial, I will create a page to contain our code.

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class DropDownButtonPage extends StatefulWidget {
_DropDownButtonState createState() => _DropDownButtonState();
}
class _DropDownButtonState extends State<DropDownButtonPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(PageName.DROP_DOWN_BUTTON),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
//our code.
SizedBox(height: 600)
],
),
),
);
}
}

It will show an empty page and I will put the code in the children.

Simple Use

So let's look at our first simple about the DropDownButton.

DropdownButton _normalDown() => DropdownButton<String>(
items: [
DropdownMenuItem(
value: "1",
child: Text(
"First",
),
),
DropdownMenuItem(
value: "2",
child: Text(
"Second",
),
),
],
onChanged: (value) {
setState(() {
_value = value;
});
},
value: _value,
);

When we click the button, it will show you in the picture as below. It is very useful to our

Constructor

As common, Let's look at the constructor of the DropdownButton.

DropdownButton({
Key key,
this.items,
this.value,
this.hint,
this.disabledHint,
this.onChanged,
this.elevation = 8,
this.style,
this.iconSize = 24.0,
this.isDense = false,
this.isExpanded = false,
})

So let's look at the parameters step by step.

items

We have used this parameter above, but we don't really know it. When we see its definition, we know it is a list.

final List<DropdownMenuItem<T>> items;

Then we look at the constructor of the DropdownMenuItem.

const DropdownMenuItem({
Key key,
this.value,
this.child,
})

You need to know that the T is a common class, usually, it is the type of your data. Such as String, double. The value will be this class same as the T. The child will show in the menu. It is a widget, I use a Text in the fore example. In this example, I will use a Row to show you.

DropdownButton _itemDown() => DropdownButton<String>(
items: [
DropdownMenuItem(
value: "1",
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.build),
SizedBox(width: 10),
Text(
"build",
),
],
),
),
DropdownMenuItem(
value: "2",
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.settings),
SizedBox(width: 10),
Text(
"Setting",
),
],
),
),
],
onChanged: (value) {
setState(() {
_value = value;
});
},
value: _value,
isExpanded: true,
);

It will show you as follows. You should notice isExpanded == true. It will expand the menu. When you click it, it will show you the right one.

But you should care about that the _value should be initiated with a valid value. In the above code, we have two choices, 1, 2. var _value = "1";If you set it to other value, such _value ="3".It will occur such error.

I/flutter ( 4147): 'package:flutter/src/material/dropdown.dart': Failed assertion: 'items == null ||
I/flutter ( 4147): value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1': is not
I/flutter ( 4147): true.

hint&disabledHint

If you do not set value, it will show a widget in the default state. Let's look at the code with not setting the value parameter.

DropdownButton _hintDown() => DropdownButton<String>(
items: [
DropdownMenuItem<String>(
value: "1",
child: Text(
"First",
),
),
DropdownMenuItem<String>(
value: "2",
child: Text(
"Second",
),
),
],
onChanged: (value) {
print("value: $value");
},
hint: Text(
"Please select the number!",
style: TextStyle(
color: TEXT_BLACK,
),
),
);

It will show you like this.

If we set onChange or items to null, I will show the disabledHint.

DropdownButton _hint2Down() => DropdownButton<String>(
items: null,
onChanged: null,
disabledHint: Text("You can't select anything."),
);

style

In this part, I will give an example of many parameters, which are very easy to understand. These parameters are below.

this.elevation = 8,
this.style,
this.iconSize = 24.0,
this.isDense = false,

So let's look at the example.

DropdownButton _normal2Down() => DropdownButton<String>(
items: [
DropdownMenuItem<String>(
value: "1",
child: Text(
"First",
),
),
DropdownMenuItem<String>(
value: "2",
child: Text(
"Second",
),
),
],
onChanged: (value) {
setState(() {
_value = value;
});
},
value: _value,
elevation: 2,
style: TextStyle(color: PURPLE, fontSize: 30),
isDense: true,
iconSize: 40.0,
);

The elevation controls the shadow of the menu, we have used it so many time, so I will not tell this again in the other widgets. The style controls the Text in the menu. The isDense will reduce the height of the button. The iconSize controls the size of the triangle-arrow. The result is below.

Conclusion

Today, we have learned the DropdownButton. It just jumps out a menu to select. It is easy to understand, but need care about the value must be in the range of values of the items.

Thanks for your reading!

The end.

Whole code in GitHub,star to support.


0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Recent articles

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.