Beginners Guide to Flutter SDK – Create Simple Mobile App with Flutter

Shilpa

4 years ago

Flutter is a free and open-source SDK provided by Google, it uses a unique language called Dart ( which was developed by Google). With Flutter, a developer can have an easy way to build an application with the same code base on both android and iOS.

Why Flutter SDK?

One code for 2 platforms

You may have to spend time building your app on both android and iOS(setting environments, write your app to make it compatibles with wanted platform). But for now, with Flutter, you can use the same idea, same code to compile on both android and iOS, and upload your app to App Store and Google Play Store.

Fast development

âhot reloadâ provides a faster and dynamic way for a developer to change the code, no need to rebuild so it will save developers a lot of time.

Flexible UI

Flutter provides a flexible way to customizes widgets include features like icons, scrolling, fonts

Good community support

Flutter is an open-source framework, you can find a lot of Flutter documentation and it is very detailed with easy examples for basic use cases. When you have a problem in your code, youâre able to check the documentation and get the support from here

Difference between Flutter / React Native / Angular Ionic

We will compare the top three best platform mobile app development framework. Which one should you learn? I chose 9 metrics to compare these technologies.

Itâs not easy to choose a development framework and say which framework is best. Itâs depending on your environment, your purpose, and you should consider all things like budget, application size, time, platform,â¦

For more understanding, I will show you how can we build âHello worldâ application in 3 different frameworks.

React native

import React, {
    Component
} from 'react';

import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

type MyReact = {};

export default class App extends Component x MyReact x {

    render() {
        return (
            xViewx
            xTextx Hello World x/Textx
            x/Viewx
        );

    }

}

export default class App extends Component: defines the classes that extend the React Component.
View: a container that supports the layout accessibility controls.
Text: a React component for displaying text.

Angular ionic

xion-navbar *navbarx
	xion-titlex
		Hello World
	x/ion-titlex
x/ion-navbarx

xion-content class="home"x
	xion-cardx
		xion-card-headerx
		MyIonic
		x/ion-card-headerx
		xion-card-contentx
		Hello World
		x/ion-card-contentx
	x/ion-cardx
x/ion-contentx

ion-navbar: the navigational toolbar, contain a ion-title
ion-title: set the title of the Toolbar to â Hello Worldâ
ion-card-content: our hello text

Flutter

import 'package:flutter/material.dart';

void main() =x runApp(MyFlutter());

class MyFlutter extends StatelessWidget {

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Welcome to Flutter',
			home: Scaffold(
				appBar: AppBar(
					title: Text('Welcome to my Flutter app'),
				),
				body: Center(
					child: Text('Hello World'),
				),
			),
		);
	}
}

In Flutter, we always use widgets. We have a variety of widgets: buttons, tables, input fields, lists, tab bars, â¦In this example, weâre importing material.dart library which provides a set of material widgets. The body consists of a Center widget containing a Text child widget with âHello Worldâ.

Recommended Reading x React Native Tutorial

Simple web app and Mobile app in flutter

Install required packages (in Linux)

Follow this site: https://flutter.dev/docs/get-started/install to install on another operating system.

1. Download the latest Flutter SDK

$ wget

2. Add the flutter tool to your path:

$ export PATH="$PATH:`pwd`/flutter/bin"

3. Precache Android and iOS artifacts:

$ flutter precache

4. Check your environments and dependencies:

$ flutter doctor

Setup an android emulator

1. Download and install latest android studio: https://developer.android.com/studio

2. Android Studio x Tools x Android x AVD Manager x Create Virtual Device.

3. Follow the instruction to finish creating an android emulator

4. Start this emulator

Create a simple mobile app

1. Create âmyflutterâ app from terminal

$ flutter create myflutter
$ cd myflutter

2. Make sure the emulator device is running

$ flutter devices

3. Modify the content of lib/main.dart

4. Run your application

$ flutter run

When you modify the content in âmain.dartâ file, you just need to press ârâ to perform hot reload mode, your modification will be updated on this emulator.

Create a simple Flutter web app

1. Create âmyflutter_webâ from terminal

$ flutter create myflutter_web

$ cd myflutter_web

2. Run following commands to use the latest version of Flutter and enable web support

$ flutter channel beta

$ flutter upgrade

$ flutter config --enable-web

3. Restart your IDE and run this command to make sure you have a Chrome browser

$ flutter devices

4. Modify the content of lib/main.dart

5. Run your application

How to convert Flutter App to Flutter Web

We use âmyflutterâ mobile app from 4.3 to convert to Flutter app

5.1. Install required packages to run Flutter web

$ sudo sh -c 'wget -qO- https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_unstable.list x /etc/apt/sources.list.d/dart_unstable.list'

$ sudo apt-get update

$ sudo apt-get install dart

5.2. Upgrade your Flutter and make sure the version is higher than 1.5

$ flutter upgrade

$ flutter --version

5.3. Install and update webdev

$ flutter pub global activate webdev

$ pub get

5.4 Modify âmyflutter/pubspec.yamlâ

Add some contents as below at the end of pubspec.yamlâ:

dependency_overrides:

flutter_web:

git:

url: https://github.com/flutter/flutter_web

path: packages/flutter_web

flutter_web_ui:

git:

url: https://github.com/flutter/flutter_web

path: packages/flutter_web_ui

flutter_web_test:

git:

url: https://github.com/flutter/flutter_web

path: packages/flutter_web_test

5.5. Create âmyflutter/web/index.htmlâ

x!DOCTYPE htmlx

xhtml lang="en"x

xheadx

xmeta charset="UTF-8"x

xtitlexx/titlex

xscript defer src="main.dart.js" type="application/javascript"xx/scriptx

x/headx

xbodyx

x/bodyx

x/htmlx

5.6. Create âmyflutter/web/main.dartâ

import 'package:flutter_web_ui/ui.dart' as ui;

import 'package:myflutter/main.dart' as app;

main() async {

await ui.webOnlyInitializePlatform();

app.main();

}

5.7. Run below commands and see results

$ webdev serve

Conclusion

As you can see, itâs quite easy to get started with Flutter. I would like to mention some important points below:

1. Web app only runs on Chrome browser

2. Make sure youâve started at least one device (real devices or emulator devices) before running mobile apps

Hope this article will help you to write your first app with Flutter. Let me know if you have any questions or suggestions in the comments.