Write your first Flutter app

Note that if you have enabled web, the completed app just works on all of these devices!

What you'll use

You need two pieces of software to complete this Tutorial: the Flutter SDK and an editor.

You can run this codelab by using any of the following devices:

A physical device (Android or iOS) connected to your computer and set to developer mode
The iOS simulator (requires installing Xcode tools)
The Android emulator (requires setup in Android Studio)
A browser (Chrome is required for debugging)

If you want to compile your app to run on the web, you must enable this feature (which is currently in beta). To enable web support, use the following instructions:

$ flutter channel beta

$ flutter upgrade

$ flutter config --enable-web

You need only run the config command once. After you enable web support, every Flutter app you create also compiles for the web. In your IDE under the devices pulldown, or at the command line using flutter devices, you should now see Chrome and Web server listed. The Chrome device automatically starts Chrome. The Web server starts a server that hosts the app so that you can load it from any browser. Use the Chrome device during development so that you can use DevTools, and the web server when you want to test on other browsers.

For more information, see Building a web application with Flutter and Write your first Flutter app on the web.

Step 1: Using Flutter in VS code

Invoke View > Command Palette.

Type “flutter create Your_App_Name”, Or select the Flutter: New Project in command Pallete Above.

Step 2: Creating the app

Enter a project name, such as myapp, and press Enter.
Create or select the parent directory for the new project folder.
Wait for project creation to complete and the main.dart file to appear.

The above commands create a Flutter project directory called myapp that contains a simple demo app that uses Material Components.

Note: When creating a new Flutter app, some Flutter IDE plugins ask for a company domain name in reverse order, something like com.example. The company domain name and project name are used together as the package name for Android (the Bundle ID for iOS) when the app is released. If you think that the app might be released, it’s better to specify the package name now. The package name can’t be changed once the app is released, so make the name unique.

Tip: The code for your app is in lib/main.dart. For a high-level description of what each code block does, see the comments at the top of that file.

Step 3: Run the app

Locate the VS Code status bar (the blue bar at the bottom of the window):

Step 4: Selecting Simulator for Testing App

Select a device from the Device Selector area. For details, see Quickly switching between Flutter devices.
- If no device is available and you want to use a device simulator, click No Devices and launch a simulator.
- To setup a real device, follow the device-specific instructions on the Install page for your OS.

Always try to use Genymotion Mobile Simulator it is light weight and easy to use.

Invoke Run > Start Debugging or press F5.
Wait for the app to launch — progress is printed in the Debug Console view.

After the app build completes, you’ll see the starter app on your device.

Type “flutter run” in command terminal in VS code to run on mobile Simulator flutter plugin will automatically detect Android OR IOS virtual Device running on system simuntaeously with IDE to debug and run code on that.

Type "flutter run -d chrome" to run it on Chrome web browser

Output of Sample APP

Step 5: CheckOut hot reload

Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

Open lib/main.dart.
Change the string

'You have ~~pushed~~ the button this many times'

'You have clicked the button this many times'

4. Important: Do not stop your app. Let your app run.

5. Save your changes: invoke Save All, or click Hot Reload .

You’ll see the updated string in the running app almost immediately.