Flutter | An introduction to the open source SDK by Google
Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch of material design-specific functionalities, and new widgets can be composed out of existing ones, too. The process of composing widgets together is called composition. The User Interface of the app is composed of many simple widgets, each of them handling one particular job. That is the reason why Flutter developers tend to think of their Flutter app as a tree of widgets.
Flutter is an open source structure to make superior grade, elite execution versatile applications across portable working frameworks – Android and iOS. It gives a strong, effective, and straightforward SDK to compose versatile applications in Google’s language, Dart. This instructional exercise strolls through the essentials of the Flutter system, the establishment of Flutter SDK, setting up Android Studio to foster Ripple-based application, design of Ripple structure, and fostering all sorts of portable applications utilizing Flutter structure.
Types of widgets
Flutter, Dart, and equivalent technologies
First and foremost, let’s state the core differences between Flutter and React Native.
Flutter | React Native |
---|---|
Initial release in 2017 | Initial release in 2015 |
Based on Dart | Based on Java Script |
Controls every pixel on the screen | Controls via the native mobile components |
Cross-Platform ( Mobile, Web, Desktop ) | Cross-Platform ( Mobile, React Native Web ) |
Developed by Google | Developed by Facebook |
Current Version 3.29.0 | Current Version 0.78 |
App performance is higher. Flutter 60 fps or 120 fps animation. Flutter itself paints and controls every single pixel on the screen. | High. It requires the JavaScript bridge to interact with the native components. |
Flutter is the fastest-growing framework for cross-platform development. Community support for Flutter is amazing, with over 11100 Github stars, 15000 forks, and over 41000 closed issues; it is leading the industry. | Community support for React Native is also good, but it is not growing as fast as Flutter. It has over 9300 Github stars, 20000 forks, and over 19700 closed issues. |
Example of the Flutter Application
main.dart:
// Importing important packages require to connect
// Flutter and Dart
import 'package:flutter/material.dart';
// Main Function
void main() {
// Giving command to runApp() to run the app.
/* The purpose of the runApp() function is to attach
the given widget to the screen. */
runApp(const MyApp());
}
// 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. */
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
// title of the application
title: 'Hello World Demo Application',
// theme of the widget
theme: ThemeData(
primarySwatch: Colors.lightGreen,
),
// Inner UI of the application
home: const MyHomePage(title: 'Home page'),
);
}
}
/* This class is similar to MyApp instead it
returns Scaffold Widget */
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
// Sets the content to the
// center of the application page
body: const Center(
// Sets the content of the Application
child: Text(
'Welcome to GeeksForGeeks!',
)),
);
}
}
Output:

And The biggest selling points of Flutter Tech are two things:
- High-Performance App: The Apps developed using Flutter are highly expressive and have flexible UI. Its fast development due to hot reloading brings the app to life, and its expressiveness provides features that are keened for native end-user experiences.
- Expressive and Flexible UI: Flutter lets developers build beautiful-looking apps with ease by using prebuilt material widgets. Even though many widgets are prebuilt, Flutter still enables full customization of the widget.
- Fast Development & Hot Reloading: Hot Reloading refers to the injection of new versions of the files that you edited at runtime while keeping the app running.
The Pros and Cons of Flutter
Pros:
- Flutter uses a single codebase, called Dart, for both Android and iOS. still Flutter still which is a simple language ensuring type safety.
- Both language and community are developing with great speed, releasing new features, widgets, and add-ons.
- Flutter has its own set of widgets rather than using the widgets provided by the host operating system, which means the user provides its gesture recognition model, thus having greater control over the precise rendering or customization of the widgets.
- The Hot-reloading, is a game-changer in the productivity of the development process. It gives a lively effect to the app under development, thus making the whole development cycle more exciting for the developer using Flutter.
- Flutter is not bound to the ROM w.r.t. the widget system. So, it enhances its portability over a wide ambit of Android versions, thus lowering its dependencies on the host platform.
- Dart and Flutter unite closely to optimize the dart Virtual Machine(VM) for those mobiles that are specifically needed by Flutter.
- Flutter is an established player in the field of cross-platform application development with amazing community support.
Cons:
- Flutter apps are usually bigger in size than native apps.
- While Dart is robust, it is not as popular as JavaScript or Kotlin/Swift, which could influence hiring and familiarity in the community in certain areas.
- While Flutter is strong on mobile, its web and desktop support lags behind more established frameworks in those areas.
- Third-party plugins might not be as powerful or completely featured as native ones, at times causing problems when implementing particular native features.
- Dart lacks a complete, popular backend framework, so you may have to depend on other technologies if you need a full-stack solution.