Getting Started with Cross-Platform Mobile Application using Flutter

Flutter is an open-source mobile application development SDK created by Google to develop cross-platform mobile applications. Flutter makes it extremely easy and fast for even novice programmers to build high-quality and responsive native mobile apps. No prior app development experience required!

This article will show you how to build a simple Hello Flutter application and then run it on your own Android device!

Why use Flutter over native Java development?

Flutter has some unique features compared to native Java and other SDK’s such as:

  • Fast Development: Flutter makes use of customizable Widgets that can be nested together to create the app interface, similar to how HTML is structured. You can refer this for details: Flutter for Web Devs.
  • Hot Reload: Instantly see changes made in code, without recompiling.
  • It’s Native in the end: Under the hood, the codebase is compiled into Java, ensuring same performance to that offered by native apps.
  • Light on system resources: Flutter can be comfortably run on a lower resources system.

Setting Up Flutter

  • Step 1: Set up the Flutter SDK
    1. Download the latest SDK here: Flutter SDK Archive
    2. Extract the zip file and place the contained ‘flutter‘ folder in the desired directory.
      Install Location example

      Here it is extracted the folder to the C:\ drive

      Note: It is recommended to not install Flutter in a directory which may require admin privileges, like ‘C:\Program Files\’

  • Step 2: Add Flutter to PATH: Though not required, it is recommended to set the PATH variable to make Flutter easily accessible from anywhere on the system.
    1. Go to Edit environment variables for your account in Control Panel. You can search for this setting in your search bar.
    2. Under User variables check if there is an entry called PATH:
      • If it exists, add a new path to ‘flutter\bin’.
      • If the entry does not exist, create a new entry named Path, and then add the full location to ‘flutter\bin’ (see example image)
    3. Reboot Windows after setting the PATH variable for it to work.
    PATH Setup

    What the Path settings would look like after including the flutter\bin directory

  • Default Counter App

    The default Counter App we just ran

  • Step 3: Set up Android Studio: Android Studio automatically downloads the development tools required for Flutter to work with Android.
    1. Download Android Studio here: Android Studio
    2. Start Android Studio and follow the SDK Manager wizard to download all the required build tools.

    Android Studio SDK Manager

    The Android Studio SDK Manager

  • Step 4: Set up Visual Studio Code: Visual Studio Code (or VS Code) is a light code editor that can be used in Flutter development. In this article, VS is used instead of Android Studio as it is lighter and has the minimal required features.
    1. Download and install VS Code: VS Code Download.
    2. To help in development, two VS Code extensions are recommended.
      Install the Flutter and Dart plugins from VS Code’s Extension Tab. You can refer: Setting Up VS Code Extensions for Flutter

      VS Code Extensions to be installed

      The VS Code Extensions to be installed

    3. Install Git Bash: Optional, but a recommended command prompt. Git Bash provides many common unix commands that are useful for some quick tasks.
      Download Git Bash for Windows here: Git Downloads
    4. Run Flutter Doctor: Flutter doctor is an inbuilt tool by flutter that can be used to check the status of the Flutter installation. After setting up the PATH variable, you can open up the Command Prompt and execute:
      flutter doctor

      This will check everything required for Flutter to run and give a detailed report of any error it encounters.

      Flutter Doctor

      Upon successful setup, flutter doctor would show no errors

Creating an empty template project

  1. Navigate to the place where you want your project to be created. Open a command prompt (you can also use the context ‘Git Bash here’ by right clicking, to open Git Bash in this location) and type in the command for creating a new project:
     flutter create project_name 

    For example: for a project named ‘helloflutter’, executing

    flutter create helloflutter

    will create a new Flutter project with name helloflutter

    create Project

    The new project named helloflutter is created

  2. Open this folder in VS Code. You can right-click and use the context menu to open directly into VS Code, or start VS Code first and then open this folder as a project.

    Open in VS Code

    Context menu to open folder in VS Code

  3. The large panel on the left that displays all the files and folders is known as the Explorer Panel. Navigate to ‘lib’ folder and select the ‘main.dart’ file. This file is the entry point from where the app starts its execution.
    First Run

    Locating the main.dart file in the lib folder

    The code that opens up is that of the template application. Try running this simple app right away!

Saying Hello Flutter!

  1. Delete the the MyHomePage Widget.

    Delete the MyHomePage Widget

  2. Create a new Stateless Widget and name it HelloFlutter.

    Stateless Widgets are used to define Widgets which don’t have to deal with changes to its internal state. They are mostly used to build components which once drawn, are not required to update.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    class HelloFlutter extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
            
        );
      }
    }

    chevron_right

    
    

    Add Class HelloFlutter

    Added the new Stateless Widget HelloFlutter

  3. Replace the Container widget with a Scaffold widget:

    A Scaffold implements basic material design visual layout structure. This Widget provides APIs for showing drawers, appbars and the body of the app. The body property of the Scaffold will be used here to display the contents of the app.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    class HelloFlutter extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            
        );
      }
    }

    chevron_right

    
    

  4. Declare a Container Widget in the body of the Scaffold.

    A Container Widget is a useful widget which combines common painting, positioning, and sizing widgets. You can wrap any widget with a Container and control the above mentioned properties.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    class HelloFlutter extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
      
          ),
        );
      }
    }

    chevron_right

    
    

    The Container widget has an alignment property which will help to position the Widget to the center of the screen. Set the alignment with the Alignment class:

     alignment: Alignment.center 
  5. In the child property of the Container Widget, declare a Text Widget:

    The Text Widget deals with displaying and handling text. After creating the Text Widget, put in ‘Hello Flutter’ between the parentheses in single quotes. Whatever is put in between the single quotes is displayed by the Text Widget.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    class HelloFlutter extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            alignment: Alignment.center,
            child: Text('Hello Flutter!'),
          ),
        );
      }
    }

    chevron_right

    
    

  6. Finally, in the home property of the main MyApp class above, change it from MyHomePage(…) to HelloFlutter(). This allows the main MyApp class to refer to the HelloFlutter just created.
    Change Home Call

    Changing the home property to call the Widget we made

  7. Now run the app using the ‘flutter run‘ command.
    Running the app

    Running the App

    A text ‘Hello Flutter!’ will appear written in the middle of the screen.

  8. Complete Code:
    Complete Code

Running the HelloFlutter App

  1. Connect a physical device to the PC and enable Developer Mode. If the device is successfully recognised by the PC, the device name would appear in the lower-right corner of VS Code.
    Device Name

    The device name will be shown here

    If you would like to setup an emulator instead, see: Set up the Android emulator. The emulated device would also show up here similarly.

  2. Open the integrated terminal by pressing the key combination [CTRL + `] (Control key + backtick).
  3. Run the command:
    flutter run

    Wait for a few minutes. As this is first run, some downloads and installation take place in the background related to gradle. Subsequent compilations would be a lot faster.

    Flutter Compile

    Executing ‘flutter run’ and compilation of the default app

  4. After compilation, the app will get installed and run on the connected device or emulator automatically.

    Running the app

    Running the App

  5. Stop the app by pressing ‘d’ in the terminal. This is what compilation and running of any app will be like.

Reference: Complete code



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.