Flutter – Input widgets.

Hi Friends,

Hope you are all well. In this post let’s see how to bring in commonly used widgets into your Flutter apps.

There are several input widgets (available with flutter) and you could create your own custom widgets as well. So, to keep it short let’s just see how to bring in 5 commonly used widgets.

To learn basics of flutter get my course at a discounted price – here.

Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)

A screencast of this post:

Text Field:

Text fields are the most common means of getting input from the user into your app. Bringing in a text field is really easy with flutter. Create a new flutter app and in the main.dart file add the below code.

 

I am simply bringing in a new TextField. When you type some text in the input field it will display it below the input as shown below.

Screenshot_2018-05-24-21-08-07

We could also use the TextController to take more control of the typed input. For instance let’s see how to count the number of characters in the entered input. Modify the code slightly as shown below.

 

Screenshot_2018-05-24-21-07-42

Great right ?

Let’s move on to the next Widget.

Toggle Switch:

Switches are a great way to get binary inputs. For eg., True or false. Let’s see how to bring that in our flutter apps.

Add a switch to the your existing code as shown below.

Now if you run the app, you’ll see a nice toggle switch in your app. Try toggling and you’ll see the colors.

Look at the console. You’ll see a true/false value being printed on the console.

Screenshot_2018-05-24-21-27-16

Let’s move on to the next widget.

Expansion Panel:

Expansion Panels are a nice way to present a large amount of content in a single screen. Let’s see how to bring that into your apps.

ExpansionPanel consists of two parts. The ExpansionPanelList which consists of all the expansion panels and the Expansion Panel itself.

The expansion Panel list will have an expansionCallback() method that will get triggered whenever an expansion panel inside the list gets tapped.

The expansion panel again has three required properties. The body: specifies the content of the panel, the headerBuilder: specifies the header for the expansion panel and isExpanded: specifies the present state of the panel.

Now run your app and you will see a nice expansion panel on your screen.

Screenshot_2018-05-24-21-27-26

Screenshot_2018-05-24-21-27-31

let’s move on to the next widget.

Check box:

Bringing in a checkbox is as easy as bringing in a toggle switch. Add some code for a check box as shown below.

Now you’ll see a nice checkbox in your app.

Screenshot_2018-05-24-21-42-02

Let’s move on to the next widget.

Radio Buttons:

Radio buttons are ideal for giving multiple options to the user and accepting a single choice from him/her.

Let’s bring that into our app.

Open your app and add radio buttons.

The groupValue in each of the buttons is an important thing to notice here. Whichever button has the same groupValue variable will be treated as radio buttons belonging to the same group. Now run the app. You will see the radio buttons.

Screenshot_2018-05-24-21-45-44

Look at the console; whichever radio button you select; you will see the value corresponding to it appearing on the console.

That’s it guys. We have seen 5 commonly used Input widgets in this post. Hope this helped you, if you found this helpful, kindly share it with someone and help them too.

Join our discord community – here.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!