COMPLETE FLUTTER INSTALLATION

COMPLETE FLUTTER INSTALLATION

No alt text provided for this image


WHAT IS FLUTTER??

Flutter is an open-source UI software development kit(SDK) 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.

It Works on language called "DART" language.

WHY USE FLUTTER??

  1. WORK ON SINGLE CODEBASE.
  2. HIGH PRODUCTIVITY.
  3. HOT RELOAD.
  4. LESS TESTING.
  5. CREATE BEAUTIFUL , HIGHLY-CUSTOMIZED USER EXPERIENCES.
  6. EXPRESSIVE AND FLEXIBLE UI


FLUTTER INSTALLATION

Step1 - First of all we need to download flutter from its site flutter.dev

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

No alt text provided for this image


Step2- We need to extract the downloaded zip file of flutter , for that we will make a directory on desktop using cmd , and than extract the file in this folder.

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image


Step 3 - Setup path of Flutter -

No alt text provided for this image
No alt text provided for this image
  • Just click on new and paste here ur Flutter file location and do OK.


?? But why we need to set Path??

  • Becoz we know where our flutter program is installed, our computer doesnt know, So for that we need to set path.

NOW , FLUTTER INSTALLATION PART IS DONE , MOVING FORWARD WE WILL SETUP ANDROID STUDIO.

-------------------------------------------------------------------------------------------------------------

ANDROID_STUDIO INSTALLATION -

STEP1- Download Android Studio from below link -

https://developer.android.com/studio/?gclid=Cj0KCQjwpNr4BRDYARIsAADIx9zsR-9VoETXyHgtIwJWMnyINxAhBimME6L8c7qNkEqL_mh9aecDbmMaAj-sEALw_wcB&gclsrc=aw.ds

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image
No alt text provided for this image

Click FINISH When Done.

STEP 2- GO TO SDK MANAGER , AND INSTALL NECCESSARY SOFTWARES.

No alt text provided for this image


No alt text provided for this image

Here In This , we have to INSTALL all the softwares which are ticked in my case, i have downloaded already . MUST CHECK - U HAVE INSTALLED ANDROID SDK TOOLS!!

STEP 3- DOWNLOAD The FLUTTER Plugins -

No alt text provided for this image
No alt text provided for this image


Step4 - NOW WE NEED TO CREATE A VIRTUAL DEVICE , IN ANDROID STUDIO , WHICH HELPS US TO RUN A VIRTUAL MOBILE ON THE LAPTOP SCREEN , AND BY WHICH WE CAN TEST OUR APPS,

JUST LIKE OTHER VIRTUAL PLATFORMS, HERE IS FOR ANDROID , SO IT IS CALLED #AVD - ANDROID VIRTUAL DEVICE OR ALSO CALLED #EMULATOR.

WE NEED TO INSTALL OS IMAGE FOR RUNNING AVD, HERE WE WILL INSTALL ANDROID PIE IMAGE IN GOOGLE NEXUX 5X MOBILE.

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image

STEP 5 - NOW Open CMD and Write Command - flutter doctor

No alt text provided for this image

Right now , it is showing of NO DEVICES AVAILABLE,

SO WE HAVE TWO OPTIONS TO START OUR DEVICE, EITHER BY CLI OR BY AVD MANAGER..

  1. By AVD manager - by tap on Green Button, it will start.
No alt text provided for this image

2. BY CLI -

No alt text provided for this image
  • Now if u run - "flutter doctor" command , it will show device connected.!!
No alt text provided for this image

Create a test app-

first of all make a new directory naming "projects" where we will put all the further projects

Run command - " flutter create test_app "

No alt text provided for this image


No alt text provided for this image

allow acces to it

No alt text provided for this image

AND, FINALLY TEST_APP IS INSTALLED AND IS RUNNING IN VIRTUAL MOBILE PHONE.

----------------------------------------------------------------------------------------------------------

NOW WE WILL INSTALL VISUAL STUDIO -

Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

WE NEED VS CODE IN FLUTTER , COZ IT GIVES EXTRA SUPPORT!!

https://code.visualstudio.com/

No alt text provided for this image

Step1-  After the installation of the Visual Studio then click on the 5th icon and install the flutter extension.

No alt text provided for this image


No alt text provided for this image


NOW OPEN THE TEST_APP FOLDER IN VS CODE AND HERE ALSO WE RUN OUR APP -

No alt text provided for this image

NOW CLICK ON RUN AND START DEBUGGING -

No alt text provided for this image


No alt text provided for this image
No alt text provided for this image

FINALLY TEST APP IS LAUNCHED WITH HELP OF VS CODE EDITOR.

IF SOMEONE IS UNABLE TO RUN THE APP ON AVD MANAGER DUE TO UNAVAILIBILTY OF VIRTUALIZATION OR HAXM , THAN HE/SHE CAN RUN THIER APP ON THEIR PHYSICAL PHONES , USING DEVELOPER OPTIONS > USB TETHRING

IN MY CASE I HAVE PHONE OF ANDROID PIE ,

SO I M ATTACHING SOME SS , HOW I RUN THIS APP ON MY MOBILE PHONE..


No alt text provided for this image

I CLICKED ON BUILD NO. 7 TIMES AND GOT DEVELOPER OPTION

No alt text provided for this image

CLICK ON USB DEBUGGING.

THAN CONNECT UR PHONE TO UR LAPPI AND CAN RUN THE APP EITHER WITH HELP OF CLI OR BY VS CODE..

No alt text provided for this image


No alt text provided for this image
No alt text provided for this image
No alt text provided for this image

AND HERE MY TEST_APP IS RUNNING IN MY PERSONAL PHONE.

---------------------------------------------------------------------------------------------------------------

DART INSTALLATION -

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.

STEP1 - DOWNLOAD DART SDK -

https://dart.dev/tools/sdk

No alt text provided for this image

CLICK ON GET DART ABOVE

No alt text provided for this image

STEP 2- EXTRACT FILES IN OUR FLUTTER FOLDER WHICH WE HAVE CREATED EARLIER

No alt text provided for this image
No alt text provided for this image

STEP 3 - SET THE PATH OF DART_SDK

No alt text provided for this image

STEP 4 - NOW OPEN CMD AND MAKE A DIRECTORY FOR DART_CODE

No alt text provided for this image

STEP 5 - NOW OPEN VS CODE AND INSTALL DART EXTENSION IN VS CODE

No alt text provided for this image

NOW OPEN DART_CODE FOLDER AND START CODING..

No alt text provided for this image
No alt text provided for this image

MAKE A NEW FILE NAMED "BASIC.DART" AND DO SOME CODING IN THAT AND RUN IT..

No alt text provided for this image


THANK YOU SO MUCH GUYS FOR TAKING SOME TIME OUT OF UR BUSY SCHEDULE TO HAVE LOOK ON MY ARTICLE.

HOPEFULLY IT HAD HELPED U ALOT..

IF SUGGESTIONS...THAN PLS..MAKE IT..

#THANKU_SO_MUCH -

#VIMAL_DAGA SIR

#RIGHT_EDUCATION

#RIGHT_MENTOR#FLUTTER



要查看或添加评论,请登录

Vaibhav Jain的更多文章

社区洞察

其他会员也浏览了