What is Google's Flutter?

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Build beautiful native apps in Flutter. In this Flutter Tutorial Series, we will cover Flutter tutorials for beginners, Flutter SDK, and how to build a simple Hello World Flutter app for Android and iOS.

Note: Flutter is still in Beta 1 at the time of this tutorial post.

Why build on Flutter?

Flutter comes with a lot of features packed in like Hot Reload, Expressive Beautiful UIs, Native performance. But then the biggest feature of them all is Unified App Development using a single code base. You can now build native apps on both Android and iOS apps using a single code base in Flutter.Furthermore, apps and interfaces made with Flutter are built from a single codebase, compiled directly to native arm code, use the GPU, and can access platform APIs and services.

Flutter Tutorials - Getting Started with Flutter

Now that we have a pretty good idea on Flutter, let's get started. In this tutorial, we will follow the steps to have flutter installed and setup.

Flutter Tutorial Series - Flutter tutorials for beginners

Installing on Mac OS:

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

• Operating Systems: macOS (64-bit)
• Disk Space: 700 MB (does not include disk space for Xcode or Android Studio).
• Tools: Flutter depends on these command-line tools being available in your environment. bash, mkdir, rm, git, curl, unzip, which

Make sure all the tools are already installed on your system. first of all, Open the Terminal on Mac and then check the following.

Flutter tutorials for beginners - Bonus Fix:

As you can see from the above image when I ran the git command, it threw the following error.xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrunThis error occurs due to the recent upgrade of your system to OS X El Capitan from the App Store. Hence, you can fix this issue by executing the following command in your Mac Terminal.xcode-select --installThe above command will bring up a pop-up window to install it on your system. So in MAC, git is attached to XCode's Command line tools.Once you have installed successfully, your git command will start working again without throwing that error again. Now that we have all the necessary tools in our system, let's proceed to get the Flutter SDK.

Installing Flutter on Windows and Linux:

Don't worry if you are not on mac os, Please find the links below for installing flutter on windows and linux operating systems.Install Flutter on WindowsInstall Flutter on Linux

Flutter Tutorial Series - Get Flutter SDK

First of all, let's decide where to put our Flutter SDK. So I have created a folder called Flutter Workspace. Using the command terminal, go to that folder using the following command.cd Flutter\ WorkspaceTo get Flutter SDK, use git to clone the repository and then add the flutter tool to your path. Running flutter doctor shows any remaining dependencies you may need to install.git clone -b beta https://github.com/flutter/flutter.git

Update your path

You’ll probably want to update PATH variable permanently, so you can run flutter commands in any terminal session.The steps for modifying this variable permanently for all terminal sessions are machine-specific. So, Typically you add a line to a file that is executed whenever you open a new window. For example:

1. Determine the directory where you placed the Flutter SDK.
2. Open (or create) $HOME/.bash_profile. The file path and filename might be different on your machine.
3. Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where you cloned Flutter’s git repo:

$ export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH

• If you are wondering how to edit the file and make the changes, you can execute the following commands.
• $ vi $HOME/.bash_profile
• press the I button to insert
• copy paste the code export PATH="[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH" at the end of the file.
• Press ESC and then followed by :wq to save the file.

1. Run source $HOME/.bash_profile to refresh the current window.
2. Finally, verify that the flutter/bin directory is now in your PATH by running:

$ echo $PATH

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup:$ flutter doctorThe first time you run a flutter command (such as flutter doctor), it downloads its own dependencies and compiles itself. Subsequent runs should be much faster.

Android setup

Install Android Studio

To develop Flutter apps for Android, you can use a Mac, Windows, or Linux (64-bit) machine.Flutter requires Android Studio to be installed and configured:

1. Download and install Android Studio.
2. So, start Android Studio, and go through the ‘Android Studio Setup Wizard’. As a result, this will install the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.

1. Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
2. Using a USB cable, plug your phone into your computer and if prompted on your device, authorize your computer to access your device.
3. In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device.
4. Start your app by running flutter run.

By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_HOME environment variable to that installation directory.

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

1. Enable VM acceleration on your machine.
2. Launch Android Studio>Tools>Android>AVD Manager and select Create Virtual Device.
3. Choose a device definition and select Next.
4. Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
5. Under Emulated Performance, select Hardware - GLES 2.0 to enable hardware acceleration.
6. Verify the AVD configuration is correct, and select Finish.For details on the above steps, see Managing AVDs.
7. In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.
8. Start your app by running flutter run. The connected device name is Android SDK built for <platform>, where platform is the chip family, such as x86.

Configure Editor

Flutter Tutorial Series - Install the Flutter and Dart plugins

Flutter is supported by two plugins:

• The Flutter plugin powers Flutter developer workflows (running, debugging, hot reload, etc.).
• The Dart plugin offers code analysis (code validation as you type, code completions, etc.).

So, to install these:

1. Start Android Studio.
2. Open plugin preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
3. Select Browse repositories…, select the Flutter plug-in and click install.
4. Click Yes when prompted to install the Dart plugin.
5. Click Restart when prompted.

Hello World Flutter App

Flutter Tutorial Series - Flutter tutorials for beginners

Now that all the groundwork is done and flutter is setup. Since this Flutter Tutorial Series is all about Flutter tutorials for beginners. Therefore, let us build a simple Flutter Hello World App.

Create New App:

Flutter tutorials for beginners - Hello World Flutter App

1. Open Android Studio.
2. Select File>New Flutter Project
3. Select Flutter application as the project type, and press Next
4. Enter a project name (e.g. helloworldflutter), and press Next
5. Click Finish
6. Wait for Android Studio to install the Flutter SDK, and create the project.

As a result, the above command creates a Flutter project directory calledhelloworldflutter that contains a simple demo app that uses Material Components.In the project directory, the code for your app is in lib/main.dart.

Running your first Hello World Flutter App

1. Click on Run>Run 'main.dart'.
2. If you don't have an android device, make sure you create a virtual device using Android AVD Manager. Click on Tools>Android>AVD Manager.
3. Hence, If everything works, you should see your starter app (Hello World Flutter App) on your device or simulator.

Trying out Hot Reload

We can go ahead and change some of the things in the app and can see the app change or reflect immediately in the device or simulator without running the application again. This is Flutter's Hot Reload feature. Below is the code for the default main.dart file where we have made changes to the Home Page Title to "Flutter Hello World". Hence, to try hot reload, click on the lightning icon as shown in the screenshots below of the Hello World Flutter App.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Hello World'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: new Text(widget.title),
      ),
      body: new Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: new Column(
          // Column is also layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug paint" (press "p" in the console where you ran
          // "flutter run", or select "Toggle Debug Paint" from the Flutter tool
          // window in IntelliJ) to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Whats Next?

Now that we have successfully run a simple Hello World Flutter app as part of Flutter tutorials for beginners. Therefore, it is now time to build beautiful native apps for both Android and iOS using Flutter in the upcoming Flutter Tutorial Series. Until then, check out other tutorials like how to Build your own Google Voice Assistant without code and Sentiment Analysis using Google Cloud Natural Language API and others on my blog section.