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.
-
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.
-
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:
- First you will need to download the flutter SDK.
- Then add the installation path to environment variables.
- 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.
- Now open Android studio(or IntelliJ) and go to File->Settings->plugins and download dart and flutter plugins.
- 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), ), ); } }
- And you can run this on android as well as ios devices.
This one is extremely helpful
LikeLike