Skip to content
Related Articles

Related Articles

Flutter | An introduction to the open source SDK by Google

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 11 Jul, 2022
View Discussion
Improve Article
Save Article

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 towards 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. 

Types of widgets: 

  • Stateless Widgets
  • Stateful Widgets

Flutter, Dart, and equivalent technologies 

Flutter and Dart--GeeksforGeeks

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 React Js
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.0.1 Current Version 0.68
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 fasted 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.

,

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),
      ),
      // 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 point of Flutter Tech are two things: 

  1. 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.
  2. Expressive and Flexible UI: Flutter lets developers build beautiful-looking apps with ease by using prebuild material widgets. Even though many widgets are prebuilt still flutter enables full customization of the widget.
  3. 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 platforms, Android and iOS which is a simple language ensuring type safety.
  • Both Flutter 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 own 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 UI/UX 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 and thus, lowering its dependencies on the host platform.
  • Dart and Flutter unite closely to optimize dart Virtual Machine(VM) for those mobiles which are specifically needed by Flutter.
  • Flutter is an established player in the field of cross-platform application development with amazing community support.

Cons: 

  • In reality, there are no cons to flutter because there isn’t any other framework as effective and elaborate as flutter. Even though if we have to list any it would be related to Dart programming language as while converting dart to JavaScript there are some bugs to be fixed, dart doesn’t have a framework for backend, etc.,

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!