Getting Started with Flutter when you already know Android.

Basic Views in Android and their equivalent Widgets in flutter.

In this blog we will be discussing about the equivalent Widgets of Android View components in flutter so that it will be easy for Android developer to understand app development in flutter by using their prior knowledge of App development in android.

In Android we were have a Java/Kotlin code file and an associated Xml for creating UI , but in flutter we have both UI and logical code in same file having extension .dart .In flutter every component is a Widget.

Flutter App Screen

Basic flutter Screen with a text and a Floating Action Button

Widgets

In flutter widgets are of two types namely :

1. Stateless Widgets : Those widgets that need no change an remain same throughout the app life cycle are known as stateless widgets.
2. Stateful Widgets : Those widgets that keeps changing throughout the app life cycle are known as stateful widgets.

Some Basic Android UI components and their equivalent in flutter

TextView : In android we use TextView to show a text .

In flutter The Equivalent widget for this is Text.

Similarly following are the flutter equivalent of Android components

Dynamic ListView of flutter is equivalent to RecyclerView of Android which can be used for displaying long list of data dynamically.

TextField & TextFormField of flutter is equivalent to EditText of Android.

RaisedButton , FlatButton is equivalent to Button in Android.

In flutter we need to import a dependency by adding to pubspec.yaml file for showing toast message.

FlutterToast in flutter is equivalent to Toast of Android , following code acan be used to display a toast message in flutter.

Description of Keywords used in flutter screen in the image

1. import : import keyword is used for importing the package in flutter.
2. main() method is the entry point of a flutter application it uses arrow (=>) notation which is used for one-line functions or methods.
3. class keyword is used for creating class in flutter .
4. MaterialApp is a convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper.
5. Scaffold : Implements the basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets. Scaffold has multiple attributes one of them is body that contains primary content of the scaffold.
6. Container : A convenience widget that combines common painting, positioning, and sizing widgets .
7. Text : The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
8. FloatingActionButton : A floating action button is a circular icon button that hovers over content to promote a primary action in the application.
9. Center : A widget that centers its child within itself.

Did I get something wrong? Mention it in the comments. I would love to improve.

If you liked what you read, please leave some claps!

Thanks for reading

To learn more about app development using flutter , follow me so that you’ll get notified when we write new posts.

LinkedIn : https://www.linkedin.com/in/alok1997/

Little about me

Hi, I am Alok Kumar (Mobile App Developer) and I love to develop mobile applications using Android and flutter.