Flutter Setup With Concept

What is Cross platform app development?

Cross-Platform:-

Refers to the capability of software or hardware to run identically on different platforms. Many applications for Windows and the Macintosh, for example, now produce binary-compatible files, which means that users can switch from one platform to the other without converting their data to a new format.

mobile App development:-

Mobile app development is the creation of software intended to run on mobile devices and optimized to take advantage of those products' unique features and hardware.

Cross platform mobile development:-

Cross-platform mobile development is the creation of software applications that are compatible with multiple mobile operating systems. ... Hybrid mobile app development - developers write the core of the application as an HTML5 or JavaScript mobile app and then place a native device wrapper around it.

* cross-platform apps work on multiple operating systems with a single code base.

There are 2 types of cross-platform apps:

1. Native Cross-Platform Apps
2. Hybrid ‘HTML5’ Cross-Platform Apps

Flutter vs react native:-

Flutter engine has most of the native components in the framework itself and it doesn't always need a bridge to communicate with the native components. React Native, however, uses the JavaScript bridge to communicate with native modules, which results in poor performance.

What is Flutter ?

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia and the web from a single codebase. The first version of Flutter was known as codename "Sky" and ran on the Android operating system.

Why flutter is important?

In flutter, the developer needs to write a single code base for all platforms and this is one of the biggest advantages flutter developers have, here you have the same business logic and same UI in all platforms whether it is android, iOS, web it enables you to work in the concept of write once run everywhere.

Why flutter is fast ?

Flutter apps are written in a language called Dart, which eliminates JavaScript bridge and is compiled to native machine code. This allows compiling and releasing an application much faster than you would do it with React Native.

What is the advantage of flutter ?

Flutter is Google's mobile app SDK, complete with a framework, widgets, and tools, that gives developers an easy way to build and deploy visually attractive, fast mobile apps on both Android and iOS platforms (official Flutter website). Flutter enables a smooth and easy cross-platform mobile app development.

* Fast Development

* Expressive and Flexible UI

* Native Performance

* Fast development

* Expressive, beautiful UIs

* Native Performance

Who's using Flutter?

Flutter Architecture:-

Flutter platform channels:-

Required tools (for setup):-

1. Android Studio
2. flutter tool
3. dartsdk-windows-x64-release
4. VSCodeUserSetup-x64
5. Git-2.27.0-64-bit

set path all of the above for access.

#Android Studio installation process:-

Android Studio is the official Integrated Development Environment (IDE) for Android app development, based on IntelliJ IDEA . ... A unified environment where you can develop for all Android devices. Apply Changes to push code and resource changes to your running app without restarting your app.some features of android studio are following

• Instant App Run
• Visual Layout Editor
•  Intelligence Code Editor
• Fast Emulator
• Addition of New Activity as a Code Template
• Help to Connect with Firebase
• Maven Repository

step 1:- install Android Studio :- https://developer.android.com/studio (click here)

integrated IDE experience for Flutter,version 3.0 or later

step 2 :- after click on give link on first step android studio download page appear click on download android studio and then click on t&c apply and download

step 3 :- After download android studio complete .open android studio file and run it

step 4 :-click next then it show

• choose component panel for installing AVD or decline click on next
• then configuration panel appeared(i.e. where to install android studio) then click on next
• then appeared choose start menu folder click on install
• after installation finished installation complete panel appeared.

• click on next and then click on finish

• first time we are running so it presents complete installation box importing setting (previously installed or not ) . chose do not import setting(default setting) then click on ok button

• after click on ok android studio splash screen started

• after started finding available SDK components panel come

• after its completation, Welcome dialog box appeared

• click on next button install type panel appeared chose setup type on standard(by default)

• click on next then select UI theme panel appear(chose one intelliJ(light) and dracula(dark) )

• click on next then download SDK components

after click on finish button SDK components downloading started after complete then finish button show click on it then launch it

after finish launch it.

now we require to set SDK and AVD manager

• click on configure ->select SDK manager ->Android SDK->SDK tools

sdk platform setting

sdk tools require click on showing mark and download

to create AVD manager

click on configure -> AVD manager -> create virtual device-> select device

click on create virtual device.

select device then next next

then showing virtual device

alternative for AVD

USB debugging is a mode that lets Android devices communicate to computers with the purpose of making Android apps easier for developers. It allows certain access to specialized areas of the phone that most people don't need to interact with regularly.

• Open the Settings app.
• Select System.
• Scroll to the bottom and select About phone.
• Scroll to the bottom and tap Build number 7 times.
• Return to the previous screen to find Developer options near the bottom.
• Scroll down and enable USB debugging.

Flutter installation process:-

step 1:- install flutter https://flutter.dev/docs/get-started/install

step 2:- after install in zip file double click on it and and extract it in which u want that folder .After it open extract place folder open flutter click on bin copy path and set this path in environment variable

i extracted in flutter_class folder. after extract open folder in which u extract open it showing flutter folder click on flutter and click on bin till bin copy path and set it .

open bin file

C:\Users\hp\Desktop\flutter_class\flutter\bin

my path above and copy your path and set it into environment variable.

• check you set correctly or not

open your command prompt and run flutter version command output show like as

if above output showing then u set right. if showing some error like that

if above output is showing then you try

C:\Windows\System32;C:\Users\hp\Desktop\flutter_class\flutter\bin

set your path like above .it will work.

dart-SDK installation process:-

download dart-sdk ,after download open file then double click then extract then select in which place you want to extract and last copy path till bin and save in environment variable

now open folder when you extract and copy path till bin

VS code user setup installation process:-

steps:- click on VS code flie

set i accept and

click on next

create desktop icon also select and then click next

click install

click on finish

click on extension to download extension for flutter and dart

setup check in cmd:-

open cmd(command prompt) -> then run flutter doctor

flutter doctor

no issue find i.e. our setup is ready.

What is Dart ?

Dart is a client-optimized programming language for apps on multiple platforms. It is developed by Google and is used to build mobile, desktop, server, and web applications. Dart is an object-oriented, class-based, garbage-collected language with C-style syntax. Dart can compile to either native code or JavaScript.

for more :- https://dart.dev/guides (click here )

first program on VS code :-

how to run program on vs code ,our dart flie

dart flie_name.dart

use above command on terminal (ex. dart basic.dart)

first flutter app example:-

how to create app:-

above image in which first we use command cd Desktop then we create a folder (mkdir folder_name) on desktop by using command cd flutter_class in flutter_class ,we create a folder projects(mkdir projects) all the app we create save in projects folder .

for create flutter app use follwing command:-

flutter create app_name

ex:- flutter create firstapp

for run :- change dir. into the app file by using cd app_name and then use flutter run

cd app_name

flutter run

thank you !!!!!!!!!!!!!!!!