Flutter Everything is a Widget

You will learn in this Post

Today’s Development Challenges
Flutter – Self Doubts
- Who I am
  - Introduction
  - Multiplatform
  - Architecture
- Where I am – Showcase
- Why I am so different
- Why I am
Flutter Development
Basic Development and Build Steps
Common Application Development Challenges
Learning Resource

Today’s Development Challenges

We are no more in the era where most of the user base were from the single OS. like – Windows.
Today’s we have different development tool for different platforms. For Example: –
- Mobile Development (Android and iOS)
- Responsive GUI Frameworks(React/Angular/VueJS/Java Script/Bootstrap)
- Backend – Java, C#, .NET, Node JS + Express.js, XCode, Objective-C, GNOME, KDE Frameworks and more.
Native performance is not always possible.
Required separate teams and resources in order to do cross platform development.
Each Project required sperate platform specific code base with Dev & Test team. And each team may follow different own SDLC cycle.
Higher cost while training and maintaining different-different teams and resources.

Who I am – Introduction

Flutter is an open-source framework developed by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
- During Development
  - Flutter apps run in a Dart VM offers Hot Reload. Update code and see changes almost instantly, without losing state.
- Release
  - Since Flutter apps are written in Dart language. So, flutter apps are directly compiles to Machine Code(ARM or x86) as well as JavaScript(Web), for native performance on any device.
- Control every pixel to create customized, adaptive designs that look and feel great on any screen.
- Deploy to multiple devices from a single codebase: – mobile, web, desktop, and embedded devices.
- Take control of your codebase with automated testing, developer tooling, and everything else you need to build production-quality apps.
First version of Flutter was known as “Sky“. It was unveiled at the 2015 Dart developer summit.
Current Flutter Stable channel 3.3.1 and the Dart version is 2.18.0.
Different organization have reported that reusing the code percentage is minimum 70% to 95%. When they build app using flutter for cross-platform.
Butter smooth UI at refresh rate of 60 fps on every screen.
BSD-3-Clause license.

Who I am – Multi Platform

Flutter allows you to build apps for multi-platform all from a single codebase. (95% of the code became multi-platform)
- Target Platforms
  - Mobile – iOS and Android
  - Web – Mobile & Desktop browser
  - Desktop – Windows, macOS, and Linux
  - Embedded devices – smart devices, cars, and more by “Custom Flutter Engine Embedders”

Who I am – Architecture

Major components of Flutter Architecture are: –

Dart Platform
- Flutter apps are written in the Dart language.
- While writing and debugging an application, Flutter runs in the Dart virtual machine, which features a just-in-time execution engine. This allows for fast compilation times as well as “hot reload”, with which modifications to source files can be injected into a running application.
- For better performance, release versions of Flutter apps on all platforms use ahead-of-time (AOT) compilation.
Flutter Engine (Skia Graphics Engine)
- Flutter’s engine, written primarily in C++, provides low-level rendering support using Google’s Skia graphics library.
- Additionally, it interfaces with platform-specific SDKs such as those provided by Android and iOS.
- It implements Flutter’s core libraries, including animation and graphics, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain.
Foundation Library
- The Foundation library, written in Dart, provides basic classes and functions that are used to construct applications using Flutter, such as APIs to communicate with the engine.
Design-Specific Premade Widgets
- Material Design widgets implement Google’s design language of the same name.
- Cupertino widgets implement Apple’s iOS Human interface guidelines.
Flutter Development Tools (SDK)

Where I am – Showcase

For more please visit: – https://flutter.dev/showcase

Flutter – Why I am so different(Superfast!)

First, it’s not another JavaScript framework. Which allow us to develop UI Apps for different screen size by responsive UI components.
Not SEO(Search Engine Optimization) friendly.
It’s full-fledged SDK with high performance during Development(JIT) and Runtime(AOT).
Code get compiled
Into native machine code (or assembly code) for target machine(ARM/x64)
- Executed directly by the hardware.
JavaScript complied code for web.
- Even flutter app get compile in JavaScript for Web. But still flutter engine avoid “JavaScript Bridge(Interoperate with native code)” which typically required by any JavaScript App in order to run in the any Web Browser.
- Which make flutter app high performance, speed with better quality one’s even over web.

Flutter – Why I am? When google is already having list of below frameworks.

Android OS
Wear OS
ChromeOS
Angular
Chromecast

Note: – There is no official announcement from the google. But by the end of this post will try to find the answer.

Flutter Development

Always open source.
Supported Development platform – Windows, macOS, Linux, Chrome OS.
Flutter plugins for popular IDE’s – Android Studio IntelliJ, VS Code, Emacs.
- Allow us to Develop and Test(Unit, Widget, Integration), Debug, Build.
- Flutter Fix
  - Help us to clean up deprecated APIs from your codebase by providing suggestion and Quick Action option in IDE’s.
  - No need to install separate plugin since this tool get ships as part of Flutter plugin.
- Code formatting.
Pub.dev (https://pub.dev/)
- Pub.dev is the official package manager with thousands of open-source Flutter and Dart packages and plugins.
- “Flutter Favorite” filter tag
  - Flutter Favorite program is to identify packages and plugins that you should first consider when building your app. This is not a guarantee of quality or suitability to your requirement, you should always perform your own evaluation of packages and plugins before using into your project.

Dart makes Flutter easier.
- Dart language (object-oriented, class-based, VM, JIT, AOT, garbage-collected) which is very similar to JAVA. So, it required very less learning curve.
Support Media Query.
- Media Query provide access to current screen properties which allow us to adjust/resize targeted widget in runtime.
- In such cases where resizing widget doesn’t fit for our requirement then we can always design separate widgets for different target platform. But still business logic of that widget remain same. Since we only design separate UI for widget not the service logic.
Customize every pixel.
- The Flutter rendering engine lets you control every pixel, and its widget library automatically adapts to any screen.
- Even we can design and develop completely new widget with UI and functionality.
  - by drawing every pixel of new widget UI.
  - by adding animation if required.
  - by providing controller, validation logic, business logic.
Hot reload – Physical or Virtual/Emulator device.
- Hot reload – loads code changes into the Dart VM and re-builds the widget tree, preserving the app state.
- Hot restart – loads code changes into the Dart VM, and restarts the Flutter app, losing the app state.
- Full restart – restarts the iOS, Android, or web app. This takes longer because it also recompiles the Java / Kotlin / ObjC / Swift code. On the web, it also restarts the Dart Development Compiler.

Note: – Flutter web currently supports hot restart but not hot reload.

DevTools – Performance and Debugging tools for Dart and Flutter app.
- Including widget and layout inspectors, network and memory profilers, and more.

Basic Development and Build Steps

Show information about the installation.

flutter doctor

List available devices or emulators.

flutter devices

Create new flutter project.

flutter create my_app

Commands for managing Flutter packages.

flutter pub <add/get/remove/deps/upgrade/version> <package name>

Run your Flutter app on an attached device.

flutter run –d chrome

Build an executable app or install bundle.

flutter build <apk/appbundle/web/windows>

Delete the build/ and .dart_tool/ directories.

flutter clean

Common Application Development Challenges

Here are the list of common concept, Typically required by any application(Web/Mobile/Desktop).

List pre-build components or widgets.
Customize of UI/Themes
Localizations i18
Navigation/URL Routing
State Management
Singleton Services
Networking capabilities (Like http, WebSocket)
Local Storge – Cache/Cookies/AppData
Observer Design Pattern
Multi Threading
Access to Life cycle methods of component/class/widget
Exception handling
Database accessibility – NoSQL and SQL
Drawing and Animation
Hot Restart
Access to native device capabilities like Files/Camera/GPS.
Unit Testing
Logging
Authentication

Hello World & Flutter Project Structure

Customize Themes in Flutter App

Flutter comes with a beautiful implementation of Material Design, which takes care of a lot of styling and theming needs that you would typically do.
To take full advantage of Material Components in your app, you can declare a top-level widget MaterialApp as the entry point to your application.
Flutter comes with number of widgets that are commonly required for applications implementing Material Design. And we can customize their theme for each of the one.

Navigation/URL Routes in Flutter App

Flutter has a similar implementation, using a Navigator and Routes. A Route is an abstraction for a “screen” or “page” of an app, and a Navigator is a widget that manages routes.

Tips: – For More Advance routing we can use flutter package “go_router”. Which support cross platform(ANDROID, IOS, LINUX, MACOS, WEB, WINDOWS) with Error handling, Redirection, Top-level redirect, Nested Routing.

State Management – Stateless Widget

A StatelessWidget in Flutter is a widget that doesn’t require a state change – it has no internal state to manage.

Static View or only get updated when rebuild or refresh.

Example: –

AboutDialog
CircleAvatar
Text

State Management – Stateful Widget

A StatefulWidget is a widget that changes state.

Use the setState method to manage the state changes for a StatefulWidget.

A call to setState() tells the Flutter framework that something has changed in a state, which causes an app to rerun the build() method so that the app can reflect the change.

Basically, User interactive and dynamic.

Examples: –

Checkbox
Radio
Slider
InkWell
Form TextField

Singleton Service/Utils/Constants Classes in Flutter

They could be anything containing your Business Logic, Utils, Constants, Network Utils(Example: – Http call’s)
We can make singleton class by our own by following “Singleton Design Pattern”.
We can also make use of “get_it” package which Flutter Favorite for registering instances globally with more advance concepts like Lazy Initialization, Depends On, with Different Scope and more...

getIt.registerSingleton<AlarmInventoryService>(AlarmInventoryService());

Http Networking in Flutter

http – Single package for Cross-platform

WebSocket Networking in Flutter

web_socket_channel – The package provides a WebSocketChannel that allows you to both listen for messages from the server and push messages to the server.

Create a WebSocketChannel that connects to a server.

Listen for messages from the server.

Send data to the server.

Close the WebSocket connection.

Observer Design Pattern in Flutter – Provider Package

Define a Provider by extending “ChangeNotifier”

class CartModel extends ChangeNotifier {
  /// Internal, private state of the cart.
  final List<Item> _items = [];

  /// An unmodifiable view of the items in the cart.
  UnmodifiableListView<Item> get items => UnmodifiableListView(_items);

  /// The current total price of all items (assuming all items cost $42).
  int get totalPrice => _items.length * 42;

  /// Adds [item] to cart. This and [removeAll] are the only ways to modify the
  /// cart from the outside.
  void add(Item item) {
    _items.add(item);
    // This call tells the widgets that are listening to this model to rebuild.
    notifyListeners();
  }

  /// Removes all items from the cart.
  void removeAll() {
    _items.clear();
    // This call tells the widgets that are listening to this model to rebuild.
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CartModel(),
      child: const MyApp(),
    ),
  );
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CartModel()),
        Provider(create: (context) => SomeOtherClass()),
      ],
      child: const MyApp(),
    ),
  );
}

Consume at any child/sub widget under provider register widget.

return Consumer<CartModel>(
  builder: (context, cart, child) {
    return Text('Total price: ${cart.totalPrice}');
  },
);

Don’t want to consume but still want call, any of the provider member.

Provider.of<CartModel>(context, listen: false).removeAll();

Shared Preferences(Local Storage) in Flutter – shared_preferences package

Store key-value data on disk. Data may be persisted to disk asynchronously, and there is no guarantee that writes will be persisted to disk after returning, so this plugin must not be used for storing critical data.

Although key-value storage is easy and convenient to use, it has limitations:

Note: – Only primitive types can be used: – int, double, bool, string, and stringList. And it’s not designed to store a lot of data.

Following location Flutter use while storing local data on different platform.

Platform	Location
Android	SharedPreferences
iOS	NSUserDefaults
Linux	In the XDG_DATA_HOME directory
macOS	NSUserDefaults
Web	LocalStorage
Windows	In the roaming AppData directory

Get Instance and Save data

// obtain shared preferences
final prefs = await SharedPreferences.getInstance();

// set value
await prefs.setInt('counter', counter);

Read data

final prefs = await SharedPreferences.getInstance();

// Try reading data from the counter key. If it doesn't exist, return 0.
final counter = prefs.getInt('counter') ?? 0;

Remove data

final prefs = await SharedPreferences.getInstance();

await prefs.remove('counter');

Drawing in Flutter

In Flutter, you can use the CustomPaint and CustomPainter classes to draw to the canvas.

CustomPainter subclasses must implement the paint() and shouldRepaint() methods.

It’s should be passes to CustomPaint’s as a painter parameter.

Animations in Flutter

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience.

Most of the inbuild animation build on “Animation<T> class”

Some of the Implementation are: –

AlwaysStoppedAnimation
AnimationController
CompoundAnimation
CurvedAnimation
ProxyAnimation
ReverseAnimation
TrainHoppingAnimation

Some Left Over Common Application Development Challenges

Flutter come with List of pre-build widgets – https://docs.flutter.dev/development/ui/widgets
Localizations i18 – https://docs.flutter.dev/development/accessibility-and-localization/internationalization
Multi Threading
- Dart’s support concurrency via “isolates”. But it is not currently being supported in Flutter web.
- Flutter web apps can potentially work around this by using “web workers”, although no such support is built in.
Life cycle methods of Flutter Widget State are: –
- initState
- didUpdateWidget
- reassemble
- setState
- deactivate
- activate
- dispose
- didChangeDependencies
Exception handling – https://docs.flutter.dev/testing/errors
- All errors caught by Flutter are routed to the FlutterError.onError handler. Which can be use at App/Root widget level.
- Errors that don’t occur within Flutter’s callbacks can’t be caught by the flutter framework, but still, we can handle them by setting up an error handler on the PlatformDispatcher.
Database accessibility – NoSQL and SQL
Packages to access native device capabilities are: –
- Camera – camera package
- GPS – geolocator package
- Notification- firebase_messaging package
Unit Testing using “test” and “flutter_test” packages.

flutter test test/counter_test.dart
flutter test –help

Logging package for Flutter App.
OAuth 2.0 in Flutter by flutter_appauth package.

Flutter Learning Resources

Dartpad – https://dartpad.dev/?
Flutter source code repo – https://github.com/flutter
Official documents – https://docs.flutter.dev/get-started/install
Official my favorite YouTube playlist
- Flutter Widget of the Week (maximum 2m each video)
- Flutter Package of the Week
- Flutter in Focus
StackOverflow’s Flutter tag
Twitter Flutter Dev
List of books – https://docs.flutter.dev/resources/books
Sample Projects

Flutter Great Doubt – Why I am?

In August 2016, media outlets reported on a mysterious source code repository published on GitHub, revealing that Google was developing a new operating system named Fuchsia.
- No official announcement was made, but inspection of the code suggested its capability to run on various devices, including “dash infotainment” systems for cars, embedded devices like traffic lights, digital watches, smartphones, tablets, and PCs.
- Its architecture differs entirely from the Linux-based Android and Chrome OS due to its unique Zircon kernel, formerly named Magenta.
In May 2017, an online tech news publisher “Ars Technica” wrote about Fuchsia’s new user interface, an upgrade from its command-line interface.
In January 2018, Google published a guide on how to run Fuchsia on Pixelbooks.
On July 1, 2019, Google announced the official website of the development project with source code and documentation.
December 8, 2020, Google announced that it was “expanding Fuchsia’s open-source model” including making mailing lists public, introducing a governance model, publishing a roadmap, and using a public issue tracker.
In May 2021, Google employees confirmed that it had deployed Fuchsia in the consumer market for the first time, within a software update to the first-generation Google Nest Hub devices that replaces its existing Chromecast-based software.

Just A Claim Not Facts
Whenever we develop an app on Flutter for iOS and Android, it automatically gets uploaded/compatible on the Fuchsia store as well.

By facilitating apps in Fuchsia ecosystem long before it is even made live in the market will ensure that it doesn’t face a death like Windows, which suffered because lack of enough applications.

Google plan with Fuschia is to go beyond the world of smartphones.

Being a cross device operating system, Google will target a much larger audience base through IoT than on its presently concentrated mobile OS market.

TargetPlatform Enum in Flutter Source Code

enum TargetPlatform {
  android, fuchsia, iOS, linux,  macOS, windows
}

Thanks for reading such a long post.
All the information are as per my best knowledge, I could get from the Internet. And will keep on try to improve this post.