Flutter Basic Widgets

Sign Up: Flutter Basic Widgets in One Screen.

In this tutorial I have showcase some basic flutter widgets, all those widgets are combined in one screen which is a Signup Screen. Widgets are described individually also so that they can studied separately and if they have more than one type can also be discussed. The code for the Signup Screen is displayed at the bottom of the article.

Widgets covered are described below:

1. Buttons: Raised, Flat, Icon, and Floating Action Button
2. Text View / Text
3. Edit text / Text Field
4. Image View / Image
5. Chips: Filter, Choice, Action, and Input Chips
6. Snackbar
7. Radio Button
8. Checkbox
9. Slider
10. Switch
11. Signup Screen: with above all widgets in one screen

How to install Flutter

Below reference for installing flutter on a different platform.

• Flutter official document for starting flutter.
• How to install Flutter on Mac & Windows.
• Installing Flutter in Ubuntu.
• Flutter installation in mac and windows by tutorialspoint

Below Screenshot display the individual dart file of Button, chips, and Image.

Buttons, Chips, Image

Buttons in Flutter

This dart class has four types of buttons Raised, Flat, Icon, and Floating Action Button. In buttons, onPressed method is the compulsory method, which means even if you don’t want to use on click in the button still you need to mention that method.

onPressed: (){} // if you don’t want onclick action.

checkout the code:

Buttons

Text View / Text and Edit Text / Text Filed in Flutter

This dart class has Text and Text Field. Text is similar to Android Text View, Edit Text is similar to Android Edit Text. Text view helps to display text anywhere on the screen, Text Field helps to get the text by the user.

checkout the code:

Text and Text Field

Image View / Image in Flutter

This dart class has a local and network image display on the screen. The image is similar to Image View in Android. It helps to show local storage images and over the internet, by URL of that images.

checkout the code:

Image

Chips in Flutter

This dart class has four types of chips Filter, Choice, Action, and Input Chips. Chips help to choose from different option, it’s a list of options created by users, it also helps to perform some action based on the user click.

checkout the code:

chip

Snackbar in Flutter

This dart class has Snackbar when the user press button then snackbar show message. It helps to show a quick message to the user about his action, app state, etc.

checkout the code:

Snackbar

Radio Button in Flutter

This dart class has Radio, Radio is similar to Radio Button in Android. It helps to select only one option between all the available options.

checkout the code:

Radio Button

Checkbox in Flutter

This dart class has Checkbox. It helps to select as many options which users want to choose.

checkout the code:

checkbox

Slider in Flutter

This dart class has a Slider. It helps to select a range of values from the available scenario.

checkout the code:

Slider

Switch in Flutter

This dart class has a switch. I help to get yes, no (Boolean) kind response.

checkout the code:

Switch

Signup Screen: All ten Basic Flutter widget

This dart file has all the 10 basic flutter widgets in this article, which are showcased in the form of a Signup Form.

SignUp Screen: All ten Basic Flutter widget

Checkout the project :

rahulkhatri19/flutter_first

I hope it will help you to get started with flutter and explore basic widgets, please provide feedback so, I can improve my tutorial and provide me a suggestion for any topic you need tutorial.

Schedule 1:1 call @ Topmate.io

Mentorship @ MAD Algos

Flutter Community