Flutter Framework

Flutter Overview

• Flutter is a highly adaptable and robust framework for crafting applications that work seamlessly across multiple platforms.
• It focuses on creating responsive and high-performance user interfaces.
• Flutter is a cross-platform UI toolkit that allows applications to interact directly with underlying platform services while allowing code reuse across operating systems.

Architectural Layers of Flutter

• Embedder layer: at the bottom of the Flutter framework, directly talks to the underlying operating system, and packages Flutter applications in the same way as native applications.
• Engine layer: written in C++, responsible for rasterizing composite scenes, and implements Flutter's basic API at a low level.
• Flutter framework: where developers interact to build apps, written in Dart language.

Widgets

• Basic building blocks of a Flutter app.
• Used to create UI elements, such as text, images, and icons.
• Types of widgets:
  • StatelessWidget: built only once on the screen, improving performance.
  • StatefulWidget: used to update UI elements upon user interaction or state change.

Widget Tree

• When building a Flutter app, a tree of widgets is created.
• The root widget is the MyApp widget, which is called inside the main function of main.dart.

Layouts in Flutter

• Widgets are at the heart of Flutter's layout system.
• Layout models are also widgets, such as rows, columns, and grids that arrange and align visible widgets.

Common Widgets

• Scaffold: a container that holds other UI widgets to build a screen.
• Container: a general-purpose widget that can set additional widgets to add decoration or styling.
• Column and Row: used to arrange child widgets in a specific direction.
• Stack: a widget that holds a list of widgets and arranges them one on top of the other.
• ListView: used to arrange children in a scrollable list.
• Form: a widget that is used to create forms, such as login or signup forms.

Futures and Streams

• Futures: a one-time callback that returns a value when the function is complete.
• Streams: a continuous flow of inputs, used to build UI widgets that update in real-time.

State Management

• When building apps, there are various states that keep changing because of user interactions.
• Flutter is a declarative language, and its user interface is designed to represent the current status of the program.
• State management libraries and techniques:
  • Provider package: used for state management, provides a value to its underlying widgets.
  • Consumer widget: used to rebuild only the part of the UI that is changing.
  • BLoC (Business Logic Component) pattern: a reactive programming model that separates the business logic from the UI.

BLoC Pattern

• BLoC pattern: a way to manage application state, everything in the app is represented as a stream of events.
• BLoC handles stream flow as a go-between based on the logic we specify.
• The best part about the BLoC architecture is that it doesn't require importing any libraries or learning new syntax.

Difference between flutter_bloc Library and RxDart

• flutter_bloc library: designed specifically for Flutter development, provides a clear separation of concerns.

• RxDart: a more general-purpose library that can be used in any Dart project, provides a way to handle complex data flows and streamline development.

• RxDart has a steeper learning curve than flutter_bloc when it comes to implementing the BLoC pattern.

  ### Advantages of RxDart

• RxDart's observables can push data, errors, and completion signals, unlike Dart Streams which only emit data events and can throw errors but don't have a built-in completion signal.

• A completion signal is useful for determining when to clean up resources associated with the stream or when to perform additional processing after the stream has finished.

Using BLoC for Every Screen

• Using BLoC for every screen is a best practice when building an application.
• Benefits of using BLoC for every screen:
  • Simplifying complex UI logic by separating business logic from presentation logic.
  • Enabling unit testing by isolating and testing the functionality of each screen independently.

How to Use BLoC for Every Screen

• To use BLoC for every screen:
  1. Create a bloc folder in the same folder as your screen.
  2. Implement the Bloc/Cubit.
  3. Provide the BLoC to the screen using BlocProvider.
  4. Use the BLoC for all business logic that needs to be done on the screen.

Keep BLoCs Simple

• Each BLoC should have a unique purpose and responsibility.
• If a BLoC is handling too many responsibilities, it's a sign that you should be using multiple BLoCs instead.

State Management Methods in Flutter

• Inherited widget: a low-level state management solution provided by Flutter that propagates data down the widget tree.
• Provider: a popular state management solution in Flutter that uses a simple, lightweight syntax to manage state across applications.
• Riverpod: a state management solution in Flutter that's built on top of the Provider package and provides a more intuitive and declarative syntax for managing state.
• Redux: a popular state management solution in Flutter that's based on the Redux library from the JavaScript world.
• Fish Redux: an implementation of the Redux pattern for state management in Flutter that's designed to simplify state management for complex applications.
• GetIt: a simple yet powerful service locator package for Flutter that's great for small- to medium-sized projects where the state is not too complex.

Responsive and Adaptive UI in Flutter

• Responsive design: the UI automatically changes the layout based on changes in the number or orientation of available pixels.
• Adaptive design: the application changes its functionality depending on what the platform is capable of.

Packages for Responsive Design

• responsive_framework: a package that helps make a Flutter application's design responsive by automatically scaling the UI.
• responsive_builder: a package that provides widgets that require less code when implementing responsive design.

The Use of Ticker in Flutter

• A ticker is used to tell how often an animation is refreshed in Flutter.
• Signals are sent at a constant frequency, such as 60 times per second, using this type of signal-sending class.

Flutter Inspector

• Flutter Inspector is a powerful tool for Flutter applications that allows you to visualize the blueprint of your widgets and their properties.
• Benefits of Flutter Inspector:
  • Select widget mode
  • Toggle platform
  • Show paint baselines
  • Show debug paint
  • Refresh widget
  • Enable slow animations
  • Show/hide performance overlay

Execute Code Only in Debug Mode

• To execute code only in debug mode:
  1. Import the dart foundation.
  2. Use kReleaseMode to check if the app is in release mode or debug mode.

The Use of Mixins

• Mixins are used to implement multiple inheritance in Flutter/Dart.
• Benefits of mixins:
  • Making it easy to write reusable class code in multiple class hierarchy levels.
  • Providing some utility functions.

Packages and Plugins in Flutter

• Packages: collections of classes, interfaces, and sub-packages that enable the creation of modular code that can be shared easily among users.
• Plugins: enable more usability and make it easier to use the device.
• Difference between packages and plugins:
  • Packages: written in the dart programming language.
  • Plugins: using native code.

The Flutter Architecture

• Upper Layer: consists of the Dart programming language along with the widgets, animations, illustrations, customizations, etc.
• Middle Layer or the Flutter Engine: deals with text display, formatting, layout, etc.
• Bottom Layer or the built-in service: manages plugins or packages.

Build Modes in Flutter

• Debug Mode: enables debugging of apps on a physical device, emulator, or simulator.

• Profile Mode: maintains some debugging abilities, enough to analyze the app's performance while testing.

  The following command can be used to compile the profile mode: flutter run --profile

• Release Mode: used when deploying the app, minimizes the size of the footprint and maximizes optimization.

  The following command can be used to compile the release mode: flutter run --release

The Difference Between runApp() and main() in Flutter

• main(): starts the program.
• runApp(): returns the widgets that are connected to the screen as a root of the widget tree that will be rendered on the screen.

The Difference Between Hot Reload and Hot Restart

• Hot Reload: takes approximately one second to perform its functionality, updates the app's UI without destroying the preserved state.
• Hot Restart: destroys the preserved state of the app, compiles the code again from the beginning, and takes longer than a hot reload.

BuildContext

• BuildContext is used to identify or locate widgets in widget trees.
• Each widget has its own BuildContext.
• Benefits of BuildContext:
  • Finding references to other widgets and themes.
  • Interacting with widget parents and accessing widget data.

Pubspec.yaml File

• The pubspec.yaml file is a configuration file that contains information about the dependencies, fonts, etc. that a project requires.
• Benefits of pubspec.yaml file:
  • Ensuring the same package version when building the project.
  • Setting constraints for the app.

Create HTTP Requests in Flutter

• Use the HTTP package to create HTTP requests.
• Example: http.get('<a href="https://jsonplaceholder.typicode.com/albums/1">https://jsonplaceholder.typicode.com/albums/1</a>');

Keys in Flutter

• Keys are identifiers for widgets, elements, and semantic nodes.
• GlobalKeys and LocalKeys are subclasses of Key.

Database Packages in Flutter

• Firebase database: a NoSQL database that provides data sync and quick loading.
• SQFlite database: a SQLite database that provides full control over the database, queries, relationships, and anything you could desire.

Limitations of Flutter

• Lack of third-party libraries.
• Larger release size.
• Flutter works with Dart language which is not so advanced as C# or JavaScript.
• Not so user-friendly for iOS developers.

Testing Flutter Apps

• Types of testing:
  • Unit testing: testing individual units of code.
  • Widget testing: testing individual widgets in a controlled environment.
  • Integration testing: testing how well different units within the app work together.
  • User testing: simulating real user interactions with the app to identify usability issues.

Testing Packages for Flutter

• Core packages: test package.
• Widget testing: flutter_test package.
• Mocking: mockito package.