Search
  • Manas Mohanty

Trying to Know and configure flutter in first glance .

Contents

What is Flutter and Why use Flutter?

Code Structure of Flutter.

Introduction to widgets.

Introduction to Flutter studio.

Compiling Flutter apps with and without android studio.


What is Flutter and Why use Flutter?

Flutter is a brand new technology that allows the crafting of high quality native interface on iOS and Android with a single shared code base, using a programming language called Dart, also developed by Google.

Dart structure is almost similar to objective C ,There will be class,overrides ,Inheritance,function etc.


Code Structure of Flutter.


Everything you are changing is a widget in flutter.

You can compare the code structure of flutter to widget tree. You are creating a widget name mainapp which is run from void main app.. in that main app you are creating a stateless widget , you are creating again a Stateful widget inside that you are creating widgets call appbar,body .

Inside body , you might be creating a container and editing a feature ..It continues.


Types of widgets


1 . State less

2. State full


State less widgets are static in nature does not change with respect time.They are like skeletons of human body upon which other parts being held in structured manner.

State full widgets are dynamic in change with respect to time , examples is text form field which changes as you tries to edit the content.


widget examples

Scaffold. List view

Body

Container

Centre

Column

Row

Flat buttons

Raised buttons


Installing and Compiling Flutter apps with and without android studio.

After downloading Flutter ,Path has to be set for bin folder.

Flutter can be installed as plug in to Visual studio ,Intellij and android studio.

After path has been setup.


Go to environment variable from windows menu ,Then double click on path. Copy and paste the flutter bin path in new path variable ,click "ok" twice until you exit.





Go for a diagnosis test by following command

-flutter doctor in your terminal


It will missing actions you need to follow like accepting android .Also it can solve issues occurinng during run time.


Compiling Flutter apps with and without android studio.

without android studio

Enable developer option from your mobile.

Enable USB debugging from mobile.

Can use virtual emulators from android studio .

And Debug.

For sharing screen use Vysor.


with android studio. You can use virtual emulator which requires hardware acceleration and virtualization support.






Creating the user interfaces in Flutter studios

Once we gain knowledge about all buttons , You can create User interfaces in flutter studio,Then bind buttons with functions you desire.Here is flutter studio look like ,On the left side are different types of widgets , In the middle there is a mobile screen to visualize the User interface.

,Right corner shows menu to customize the widgets further in color ,style and size.


Once you are done with creation of user interface through drag and drop method , You can get the source code from source code menu beside model menu at bottom .You can also get pubspec.yaml configuration from pubspec menu . Pubspec indicates what assets and dependencie you are using in your app.




After that edit your source code as per your requirement.You can use Github repositories built by other to create your own web app ,plug in ,android /IOS app.

11 views