Basic Structure of a Flutter App

Basic Widgets we should know in flutter




In Flutter, every component in the app is called a widget. As the example if you want to show sentence like "hello world", we have to use Text widget. Likewise containers, Texts, Images, ......etc all are widgets.

OK. Let's go to the basics.




The most important widget we have to use is MaterialApp widget. It represent whole app. It has 2 properties mainly. Those are 'title' and 'home'. title means app name. we can give any string value for it. home means the structure inside our app. basically the structure when we open the app. 




In the home property we can provide a class which is to be implemented. It contains Scaffold widget and it Implements the basic material design visual layout structure.
This class provides APIs for showing drawers, snack bars, and bottom sheets.



In the Scaffold widget there are several properties can be implemented.

Properties

appBar → PreferredSizeWidget
An app bar to display at the top of the scaffold.
final
backgroundColor → Color
The color of the Material widget that underlies the entire Scaffold. [...]
final
body → Widget
The primary content of the scaffold. [...]
final
bottomNavigationBar → Widget
A bottom navigation bar to display at the bottom of the scaffold. [...]
final
bottomSheet → Widget
The persistent bottom sheet to display. [...]
final
drawer → Widget
A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from either left-to-right (TextDirection.ltr) or right-to-left (TextDirection.rtl) [...]
final
drawerDragStartBehavior → DragStartBehavior
Determines the way that drag start behavior is handled. [...]
final
drawerEdgeDragWidth → double
The width of the area within which a horizontal swipe will open the drawer. [...]
final
drawerScrimColor → Color
The color to use for the scrim that obscures primary content while a drawer is open. [...]
final
endDrawer → Widget
A panel displayed to the side of the body, often hidden on mobile devices. Swipes in from right-to-left (TextDirection.ltr) or left-to-right (TextDirection.rtl) [...]
final


To refer more..go to this link.
Link : https://api.flutter.dev/flutter/material/Scaffold-class.html

The only thing we should understand is If there is a widget behaves as parent widget, there can be exists multiple child widgets or a one children widget.



According to above example,
Container(Parent widget)<=======>Row(children widget)
Row(Parent widget)<=======>Columns(child widgets)
.
.
.
.
.
etc.

This is the basic structure of flutter application.
Hope you will understand this properly.

Happy coding !! and Good luck.

Comments

  1. You explained so well but you forget the advanced material think so btw thanks for this basic explanation.
    top flutter app development services

    ReplyDelete
  2. Thank you for some other informative blog. Where else could I get that type of information written in such an ideal means? I have a mission that I’m just now working on, and I have been at the look out for such information. Android Development servicesThank you for some other informative blog. Where else could I get that type of information written in such an ideal means? I have a mission that I’m just now working on, and I have been at the look out for such information. Android Development services

    ReplyDelete

Post a Comment

Popular posts from this blog

Installing Android Studio, Flutter and Dart ( Part 2 )

My Favorite App Development Tools