DEV Community

loading...

Hey guys today I am going to tell you how to setup flutter and flutter web on windows 10

Debugger 333
😴 sleeping
Updated on ・2 min read

Before zooming in I would like to tell you the system requirments and apps required to setup and run flutter, flutter web.

System Requirments

  • windows 7 or later
  • 64 bit
  • 2 GB diskspace

App Requirments

  • powershell 5.0 (preinstalled with windows 10)
  • git for windows
  • Visual Studio Code
  • Chrome

Start by typing the following code:

    git clone https://github.com/flutter/flutter.git -b stable
Enter fullscreen mode Exit fullscreen mode

Update your path
If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

  • From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
  • Under User variables check if there is an entry called Path:
  • If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
  • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value. You have to close and reopen any existing console windows for these changes to take effect.

Web setup

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

   flutter channel beta
   flutter upgrade
   flutter config --enable-web
Enter fullscreen mode Exit fullscreen mode

Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.

   flutter devices
Enter fullscreen mode Exit fullscreen mode

It should show you the following

2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129

To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:

    flutter create myapp
    cd myapp
Enter fullscreen mode Exit fullscreen mode

To run your flutter app on web type the following command:

    flutter run -d chrome
Enter fullscreen mode Exit fullscreen mode

It should show you this:

Alt Text

Alt Text

Now if you want to edit code then open your File Manager

right click on the folder you want to edit there you will see an option open with code click on that option and if you want to change or edit code go to lib folder and there you can add files and wright code remember your main application folder is "lib"

after changing code go to your powershell and type:

    r
Enter fullscreen mode Exit fullscreen mode

If you want to add packages go to pubspec.yaml file under

    flutter:sdk
Enter fullscreen mode Exit fullscreen mode

add your package(pub.dev) after you add dependencies paste the package in your main.dart file and you are done.

https://github.com/neev123dev
https://dev.to/neev123dev

Discussion (0)