Overview
We all know that mobile users expect their apps to have beautiful UI , Smooth Animation and Great Performance. To develop such features, developers have to build apps which work faster without compromising quality and performance.
There is a way we can easily built it with the help of “Flutter” Framework that has been introduced by Google.
Flutter is “Open Source” Framework which provides expressive and fast way for developers to build native apps for both iOS and Android.
The First version of Flutter was known as “Sky” and was run on android operating system. The original author of Flutter is Google and is developed by Google and Community. Flutter was Initially released in May 2017 and is Written in “Dart” Language .
Why Should We Use FLUTTER ?
Top Features :
- Flutter uses Dart as its core development language.
- Dart is developed by Google and it is used to build web, server and mobile applications and for Internet of Things devices. It is similar to Java, C++ or C#. So, learning Dart will not be a major issue.
- Easy Firebase integration: Flutter provides a plugin for firebase integration which lets users to painlessly integrate with a remote database that allows real time sync.
- Hot reload: The wait for a miraculous build feature to re-run the app without rebuilding it, is now over!
Flutter has a button called Hot reload. This is my most favorite feature of Flutter.
This is Hot reload which works by injecting updated source code files into the running Dart Virtual Machine (VM).
This will re-run the app in mere 2-3 seconds of time without restarting it and preserving the state of the app.
There are 3 ways where Flutter will help you:
1.-Fast development and re-development :
- Flutter is engineered for high development velocity, with the help of hot reload feature we are allowed to change our code and see it come to life in less than a second without losing the state of the app.
- Flutter also have rich set of customizable Widgets, all build from morden reactive Framework .
- Flutter integrates with popular development tool (Editor or IDE) like IntelliJ , Android Studio, Visual Studio and many more.
2.Flexible UI with Expressive Features:
Flutter moves the Widgets, Rendering, Animation and Gestures into the framework to give you complete control on screen and within every pixel of the screen. This means you have flexibility to build Custom design and many more.
3.Native Apps For IOS and ANDROID (Compatibility):
Apps made with flutter follow the platform conventions and interface details such as scrolling navigation icons, fonts and more.
That is the reason the Apps built with flutter are featured in both Appstore and Google Playstore.
Flutter is great Revolution for both new and experienced developer. If you are new to Mobile Apps development, Flutter gives you the fast, fun and morden way to develop Native Apps , and if you are an existing mobile apps developer then you can easily integrate flutter with existing tools to build new apps with expressive User Interface.
React native Vs Flutter (Is Google’s Flutter or Fighter?)
Flutter doesn’t use any text Stack which is popular on the Internet, while on the other hand React native uses React and Javascript.
Flutter is focused on single code base and this single code base will be producing iOS and android apps. They use their own language “Dart”.
Flutter comes with built-in cupertino and material design, whether you are moving to complete iOS experience or Android experience both will be relatively easy you don’t have to use third party libraries like we use in react native.
Flutter = Beautiful native App in realtime.
React Native = Built native app using Javascript and React.
There are two parts in architecture : javascript and native, application run in javascript and when it has to communicate with the device (for eg. Touch events, messages etc.) it goes to the bridge, that’s what makes react native very power-full but slow. (Bridge converts Javascript variable into native variable).
Sometimes when you are doing animation it becomes very slow. For eg, if you want a drag and drop animation for a smooth UI it needs 60 fps, but you won’t get full 60fps while you are changing the value from javascript to native code.
React Native has a lot more libraries and resources than Flutter that is the one of the best advantage.
Java-Script is universal and it has lot more support than dart.
Top Apps made in React Native : Facebook, Instagram , Myntra , Tesla etc.
There is no bridge, so there are 2 languages : dart and c++, Dart is an extension in which flutter is written and it compiles back to the machine code which directly runs in the hardware.
The communication between application and OS is as minimum as possible. Most of the things is taken care by flutter itself or Skia Engine.
It is like a browser in-built. Flutter can give you better key frames when it comes to application.
Currently there are few developers which know or have knowledge of dart compared to javascript (or React-Native).
Top Apps made in Flutter : Hamilton App, Flutter Gallery
So, “What’s different about Flutter?”
- Flutter is predictable, Fast and smooth code compiles AOT to native (ARM) code.
- Comes with customizable, beautiful, widgets
- Full Control of Developer over Widgets and Layout.
- No “Javascript Bridge” with Better Reactive Views.
- The wonderful Hot Reload Feature with amazing developer tools.
- Better compatibility, Better performance, Better fidelity , Better control with Great fun.
Isn’t It great!!?
Let’s dive into some practical scenarios:
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { var title = 'Web Images'; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), body: new Image.network( 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true', ), ), ); } }
The above example shows how easy it is to fetch an image from internet and to load it into a view.
Let’s understand this example in detail. There is a method main( ) which starts the app using MyApp( ) class.
This class extends StatelessWidget.
There are Stateless and Stateful widgets in flutter. Stateless widgets are used where the state should not be changed in runtime, for eg. a screen. Stateful widgets are used where we need to change the state like changing color of button, changing text and so on.
Flutter highly concentrates on material app design.
Here, one widget is created having a title, home and body.
Title is used in toolbar.
Home is a Scaffold object. Scaffold basically means structure. It creates complete structure of the screen.
Body includes a view to load image. Here, with a single line we have fetched an image from network and have loaded it into the view.
We, here at Yudiz, have started to dive into this miraculous and super interesting framework and soon will produce beautiful apps using it.
Conclusion
Flutter is a huge step forward into app development world and I’m quite sure that this will take all the current frameworks and app development methods by storm.