What is flutter?

Those who are hearing this for the first time, flutter is a new mobile app development SDK for both ios and android.

Java/Kotlin is used to develop native android apps and Swift/Objective C is used to develop native ios apps. But with flutter, both ios and android applications can be developed in same language i.e. – Dart.

Flutter is built with C, C++, Dart, and Skia (a 2D rendering engine).

How is it different from other hybrid app frameworks?

All other hybrid app frameworks like Cordova/ Ionic, use platform’s WebView to render their HTML, CSS and JS and are not platform native frameworks.

But with flutter, you can develop true native apps.

1. Android-

   The flutter engine’s C/C++ code is compiled with Android’s NDK, and any Dart code is AOT(ahead of time)-compiled into native code.

2. IOS-

   The flutter engine’s C/C++ code is compiled with LLVM, and any Dart code is AOT-compiled into native code.

So in both the cases, the app runs using the native instruction set, resulting into better performance and better UI response!

Getting started:

1. First you will need to download the flutter SDK.
2. Then add the installation path to environment variables.
3. Now to verify your installation, open command prompt and run “flutter doctor” command. It will tell you if there are any issues with your installation.
4. Now open Android studio(or IntelliJ) and go to File->Settings->plugins and download dart and flutter plugins.
   

   
5. Now create a new flutter project and copy following code to main.dart file or use this demo project.

   import 'package:flutter/material.dart';
   
   void main() => runApp(new MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return new MaterialApp(
         title: 'Flutter Demo',
         theme: new ThemeData(
           primarySwatch: Colors.red,
         ),
         home: new MyHomePage(title: 'Flutter Demo'),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
     final String title;
     @override
     _MyHomePageState createState() => new _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(
           title: new Text(widget.title),
         ),
         body: new Center(
           child: new Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               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),
         ),
       );
     }
   }

6. And you can run this on android as well as ios devices.