Let Started Flutter on Windows(Installing flutter on windows)


You can build apps with Flutter using any text editor combined with our command-line tools. However, we recommend using one of our editor plugins for an even better experience. These plugins provide you with code completion, syntax highlighting, widget editing assists, run & debug support, and more.
Follow the steps below to add an editor plugin for Android Studio, IntelliJ, or VS Code. If you want to use a different editor, that’s OK, skip ahead to the next step:

Two methods to Install flutter on windows

1-First Method:- The first method is to Install flutter Generally by Downloading its SDK first then editor and plugins required inside the editor and at last setting up paths for the Flutter SDK and android SDK Remember to use flutter then its essential to also install android SDK. Just scroll down this method is also explained below in detail.
2-Second Method:- The second method is quite simple and easy which is to just clone flutter repository in your machine using Gitbash git. and then install your Editor(vs code, Android studio etc). Just scroll down to know in detail about this method.
Both Methods are working Good so dive in with that one which u like the most and also easy to you.

1st Method

Get the Flutter SDK

  • Open a new terminal window
  • Type: git clone https://github.com/flutter/flutter.git
  • Locate the file directory you have cloned the file explorer and look for the file flutter_console.bat. Start it by double-clicking.
  • If you wish to use flutter command in regular Windows command prompt, grab the bin location where the Flutter SDK sits on your disk 'C:\Flutter_SDK\bin' and add Flutter to the PATH environment variable.
  • Reboot Windows to fully apply this change

Run flutter doctor

Open Flutter Console or Windows command prompt, run the below command to download if there are any dependencies you need to install to complete the setup
$ flutter doctor
Congrats, you now have the Flutter SDK on your Windows machine. Next, you need to get a platform (in this case, Android) SDK.

Get the Android SDK

You need either Android Studio or VS Code IDE to run your demo. We'll choose VS Code just to get started.
  • Download VS Code from here, and install it.
  • Download the Android SDK from here, and then install it.
  • Once it is complete, go back to the Terminal (where you set you PATH), and type: flutter doctor

Accept the Android SDK license

Go to the terminal and type:
$ flutter doctor --android licenses
If you see [✓] Android toolchain in the output, then you can move on! For example:
If you don’t see [✓] Android toolchain, read the output to suggest to you what is missing and install them.

Configure VS Code to use Flutter and Dart

  1. Start VS Code.
  2. Type Ctrl + Shift + X to open the Extension tab to install Extention.
  3. Enter flutter in the search field, select Flutter in the list, and click install.
  4. Select 'OK' to reload the VS Code.
  5. Repeat from step 2 to install Dart.
  6. Click View>Command Palette.
  7. Type 'doctor', and select the 'Flutter: Run Flutter Doctor' action.
  8. Review the output in the 'Output' pane for any issues.
No alt text provided for this image
f there is no issue, we are up and ready to create our first demo app with Flutter.

Demo

Create new app

  • Use the flutter create command to create a new project
$ flutter create myapp
  • Note that a new my app directory is created. You should get this output:
  • To go to my app folder directory and type:
$ cd myapp
  • Run the command $ flutter doctor again to check if your device is well connected.

Run your demo app

  • In the terminal, ensure you are in the myapp directory, and type:
$ flutter run
  • Wait for initial dependencies to download and configure.

No alt text provided for this image
  • d.... ta daaa! Your app is running on your device or emulator

Hot reload

This allows the ability to reload the code of a live running app without restarting or losing the app state. Simply make a change to your source code, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device. For example:
  1. Let your app continue to run.
  2. Open the file lib/main.dart
  3. Change the text: 'You have pushed the button this many times:' to 'You have clicked the button this many times:'
  4. To see your change invoke ctrl+s.

2nd Method

Cloning the GitHub Repository

This method is the same as above but the only difference is that you don't need to install flutter SDK manually but instead of that just giving the following command in git window or cmd window. and ta, daaa.. your SDK downloaded. follows the below steps to achieve the same result but honestly, this method is not working in all machine working in some macs and other machines but not working for me at all so I recommend the first method ;)
  1. Install IDE Visual Studio Code or IntelliJ (my preference)
  2. Install Git for Windows (I recommend Git Bash too)
  3. Open CMD
  4. Run git clone -b master https://github.com/flutter/flutter.git
  5. Run ./flutter/bin/flutter --version to ensure it has been installed successfully
  6. Add `C:\Users\Meow\flutter\bin` to your Path environment variable
  7. Restart CMD
  8. Run flutter doctor
  9. Open your IDE and install Dart and Flutter plugins
  10. Run flutter create hello-world
  11. Now you can create your virtual device like I have done using Genymotion or using Android Studio.
  12. Run cd hello-world
  13. Run flutter run
  14. Alternatively, you can run the app via the IDE
  15. Party 🎉
Continue with this tutorial: Make a Todo app with Flutter
On the way: My Coding Bias on Windows 10
On the way: Read My React Bias
Happy Coding!
should see the updated text in the running app almost immediately.
The source code of this project is available on Github.
Feel free to  Follow me on Twitter
Have fun with Flutter and happy coding!


Comments

Post a Comment

Popular Posts