Mobile UI Framework-Flutter

To create mobile application for IOS/Android, we used 2 different framework, one support android based native app ,other support ios based native app. So we need to maintain 2 separate codebase for the same mobile application. Again for the changes to take effect, it need to reload entire UI and this create a performance bottleneck.

This is the entry point for new mobile framework - Flutter framework which make use of Dart programming language and create rich UI for both os ios/android. Also it internally keep track of old state and new state -( tracking new changes from older ) ,thus it only load those ui changes rather than loading full ui widget.Thus it improve on performance. It

provides high performance by rendering the UI directly in the operating system’s canvas rather than through native framework.

Flutter also offers many ready to use widgets (UI) to create a modern application. These widgets are optimized for mobile environment and designing the application using widgets is as simple as designing HTML.

Features of Flutter

• Modern and reactive framework.

• Uses Dart programming language and it is very easy to learn.

• Fast development.

• Beautiful and fluid user interfaces.

• Huge widget catalog.

• Runs same UI for multiple platforms.

• High performance application.

Adventage of Flutter

• Dart has a large repository of software packages which lets you to extend the capabilities of your application.

• Developers need to write just a single code base for both Android and iOS platforms. Flutter may to be extended to other platform as well in the future.

• Flutter needs lesser testing. Because of its single code base, it is sufficient if we write automated tests once for both the platforms.

• Flutter’s simplicity makes it a good candidate for fast development. Its customization capability and extendibility makes it even more powerful.

Disadventage of Flutter

• Since it is coded in Dart language, a developer needs to learn new language (though it is easy to learn).

• Modern framework tries to separate logic and UI as much as possible but, in Flutter, user interface and logic is intermixed. We can overcome this using smart coding and using high level module to separate user interface and logic.

Flutter Installation -Flutter SDK Download

• Visit url https://docs.flutter.dev/get-started/install

• select os for which we need to install

• download below zip

• unzip it ,add fullter/bin in path variable so that flutter is in path and can execute flutter

• flutter come with tool , flutter doctor

• run doctor command, so see report

The “flutter doctor” command performs a series of checks, such as verifying the Flutter SDK installation, checking for necessary Flutter dependencies, ensuring the Android SDK is properly configured, and verifying the availability of connected devices or simulators.

• install latest android sdk

• install latest android studio

• connect to real amdroid/iphone device or

• start android/ios emulator

• Install Flutter and Dart plugin for Android Studio. It provides startup template to create new Flutter application, an option to run and debug Flutter application in the Android studio itself, etc

How to create Flutter application

==

Step 1 − Open Android Studio

Step 2 − Create Flutter Project. For this, click File → New → New Flutter Project

Step 3 − Select Flutter Application. For this, select Flutter Application and click Next.

Step 4 − Configure the application as below and click Next.

• Project name: hello_app

• Flutter SDK Path: <path_to_flutter_sdk>

• Project Location: <path_to_project_folder>

• Description: Flutter based hello world application

Step 5 − Configure Project.

Set the company domain as flutterapp.tutorialspoint.com and click Finish.

Step 6 − Enter Company domain.

Android Studio creates a fully working flutter application with minimal functionality. Let us check the structure of the application and then, change the code to do our task.

The structure of the application and its purpose is as follows −

Various components of the structure of the application are explained here −

• android − Auto generated source code to create android application

• ios − Auto generated source code to create ios application

• lib − Main folder containing Dart code written using flutter framework

• ib/main.dart − Entry point of the Flutter application

• test − Folder containing Dart code to test the flutter application

• test/widget_test.dart − Sample code

• .gitignore − Git version control file

• .metadata − auto generated by the flutter tools

• .packages − auto generated to track the flutter packages

• .iml − project file used by Android studio

• pubspec.yaml − Used by Pub, Flutter package manager

• pubspec.lock − Auto generated by the Flutter package manager, Pub

• README.md − Project description file written in Markdown format

Step 7 − Replace the dart code in the lib/main.dart file with the below code −

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {// This widget is the root of your application.

@override
Widget build(BuildContext context) {return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,),
         home: MyHomePage(title: 'Home page'),);}}
         
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) :
 super(key: key);
 final String title;
 @override
 Widget build(BuildContext context) {
 return Scaffold(
         appBar: AppBar(
            title: Text(this.title),),
         body: Center(
            child:
            Text('Hello World',)
            ),
            );
            }
            }

Let us understand the dart code line by line.

• Line 1 − imports the flutter package, material. The material is a flutter package to create user interface according to the Material design guidelines specified by Android.

• Line 3 − This is the entry point of the Flutter application. Calls runApp function and pass it an object of MyApp class. The purpose of the runApp function is to attach the given widget to the screen.

• Line 5-17 − Widget is used to create UI in flutter framework. StatelessWidget is a widget, which does not maintain any state of the widget. MyApp extends StatelessWidget and overrides its build method. The purpose of the build method is to create a part of the UI of the application. Here, build method uses MaterialApp, a widget to create the root level UI of the application. It has three properties - title, theme and home.
  

  • title is the title of the application

  • theme is the theme of the widget. Here, we set blue as the overall color of the application using ThemeData class and its property, primarySwatch.

  • home is the inner UI of the application, which we set another widget, MyHomePage

• Line 19 - 38 − MyHomePage is same as MyApp except it returns Scaffold Widget. Scaffold is a top level widget next to MaterialApp widget used to create UI conforming material design. It has two important properties, appBar to show the header of the application and body to show the actual content of the application. AppBar is another widget to render the header of the application and we have used it in appBar property. In body property, we have used Center widget, which centers it child widget. Text is the final and inner most widget to show the text and it is displayed in the center of the screen.

Step 8 − Now, run the application using, Run → Run main.dart

Step 9 − Finally, the output of the application is as follows −