Flutter is the future: Install the Flutter and Dart plugins

in #esteem5 years ago

HI Steemains,
so i stumbled on 'Flutter' and 'Dart' for mobile website Development,so its quiet new flutter is an open source UI software development library/kit created by Google, flutter is the next big thing, though it is still improving its features,codes and structure it offers a variety of seamless opportunities.

0fpvaq.png
snapshot from my laptop

So i will walk you through the set-up/installtion process on windows, ill be using command prompt (cmd) to test my flutter and run diagnostics and perform installation.
please go to [developer android.com/studio](https://developer.android.com/studio) to download android studio, i am currently using a windows 10 laptop.

please visit😁 https://flutter.dev/docs/get-started/install/windows

7x0nr4.png

image source

To download flutter SDK, extract into your C:Drive and locate 'Bin' folder then copy the path to "your environment variable" ,ensure to create the right path in your environment variable.

THINGS YOU NEED FOR YOUR SETUP:
1. Andriod studio.exe
2. Virtual Studio.exe
3. flutter SDK (Extract)
4. Simulator

After due process your Android studio should be looking like this below 👇 👇 👇

           Android Studio Application

Type "flutter doctor" on your command prompt,if your path is fine you should expect the coresponding commands from your actions like the screen shot below👇 👇 👇

cnbkbi.png

[SDK INSTALLATION FILE ]

launch your andriod studio and type AVD Manager to
this is were we launch our simulator, you should :

  1. select "create virtual device" in the down- left hand corner
  2. in cartegory select phone under virtual device configuration tab.

liu5bu.png

  1. download nexus API 28 2 and select as indicated by the arrow in the snap shot below👇 👇 👇

w84uei.png

The action above will launch your simulator,kindly be informed that an internet connection is very necessary for this this operation.find below snap-shot of simulator.👇 👇 👇

lv4dmi.png

snapshop from my desktop

proceed by typing cmd in the windows search bar and launch your command prompt (CMD)

  1. input the following codes "flutter doctor" and press enter 👇 👇 👇
    ie1lgp.png
  • from the screen shot it shows that a device is connected (simulator)
  • also vs code is installed
  • it further shows that all is fine with my installations.
  1. creat a folder and use change directory to instruct command promt to save your files in that folder you crated on your desktop.Ill name my folder "project"

  2. on "CMD" Iput
    a.. cd desktop
    b. cd project
    c. flutter create project

Below is he corresponding rsponse, when you open the folder youll notice that your library,darts, andriod,ios files etc have been provision for your on the project folder.see the following cresponding commands.👇 👇 👇

rxwqid.png
To create project type the codes above

Also you will need to run your application,so enter the following codes below 👇 👇 👇

  1. cd project
  2. flutter run
    here is the coresponding rsponce and you will notice that on your simulator a start page have been created as seen below.👇 👇 👇

nu3hd3.png

48ve9a.png

And here is your new interface to hot reload changes you can press "r" to get your codes effected in real time.

when you get to this pint 👇 👇 👇
1s2xez.png

thrn be rest assured that your provisoning was succesfull,i am open to any correction,howver this write-up is just to give you an insight on what it takes to set up your Flutter on your windows, on and online and search for more tutorials that will aid your understanding, ill be back with more codes on Darts and flutter in the next lesson.

Manny thanks!!!!😊 😊 😊

Sort:  

What ya working on with flutter?

new at it, preparing to learn dart codeswhat is your opinion about flutter

Thanks for using eSteem!
Your post has been voted as a part of eSteem encouragement program. Keep up the good work!
Dear reader, Install Android, iOS Mobile app or Windows, Mac, Linux Surfer app, if you haven't already!
Learn more: https://esteem.app
Join our discord: https://discord.me/esteem

 5 years ago  Reveal Comment