Forem: Majid Hajian

Announcing Zapp! Build Flutter apps in browser

Majid Hajian — Thu, 14 Jul 2022 11:41:22 +0000

As a Flutter or Dart developer, having an online IDE environment that allows you to create and share your prototypes as quickly as possible in a browser is important.

You may wonder why this is even important? Having a sandbox in your browser to develop a Flutter application will open up a lot of windows, such as:

You can share code and embed examples in your documentation
You can rapidly prototype your idea and build an application and share it with your stack holders
You can reproduce bugs and attach them to your issue when you open it, which will help maintainers to start debugging quickly
You can learn different packages and save a lot of time setting up an environment; you can even share what you have learned
You can teach Flutter and Dart without needing to set up any environment, which will speed up.
You can even collaborate live together on a project or prototype.
& perhaps so many other opportunities

Zapp

We proudly announce Zapp, an in-browser tool that will help you build Flutter and Dart applications in your browser.

With Zapp, you will enjoy building Flutter apps as you make that in your favorite IDE, especially if you are a VsCode user; You will feel at home.

Let's me introduce to you the most important features of Zapp,

Adding Pub.dev packages

Add any package that supports the Web platform in Flutter and Dart to your pubspec.yaml file and download it right into your editor in the browser with Zapp!

Your browser does not support the video tag.

IntelliSense

Zapp provides syntax highlighting and autocomplete. Step in and out of your code and find the definitions and documentation! Get code completion, parameter info, quick info, member lists, and more.

Your browser does not support the video tag.

Live Preview, Unique URL

Rename your project, get a unique URL that everyone can access, and send it to your community member to preview and load it instantly!

Your browser does not support the video tag.

Command Palette

Search, find your command, run it and complete your action in a second! The command palette helps you to find out your favorite activities with ease!

Your browser does not support the video tag.

Theme: Zapp will provide you with dark and light mode as of now, but we have in the roadmap to add "themes" in the editor where you can select what your favorite is.
Logs: You can see logs and output of the Dart analyzer.
Debugging: Zapp helps you to debug the application as quickly as possible. You may even have breakpoints and debug your application!
Embedding: You can create a rapid prototype; for example, get a minimal embedded edition of Zapp and add it to your documentation!
Pair programming: What if you can jump into one Zapp with your team, community member, or an interviewee to pair a program on a problem and get it fixed together.
Git features: Edit, change, organize and see the difference under your branch management to find out what you have changed. Ready to commit and push to a different branch!
Run Tests: In Zapp, you can write your tests and run them in your browser.
Many more: Many more features will be added to Zapp soon, but we would love to hear your feedback and prioritize what the community needs.

Zapp Public Board

We are building Zapp to help the community. Therefore, we have opened Zapp Public Board, where you can see all backlogs and even help us prioritize them by giving your vote.

Early Access

Zapp is evolving, and we are actively developing. Hence, we now invite you to join Zapp Early Access Program and help make this product even better for everyone.
Once you navigate to zapp.run, sign in with your Github account, then wait until your access is given. You'll be notified by email.

If you found a bug or have a feature in mind that we need to develop, please open an issue on Github Zapp.run repository and let us know what you are looking for. We appreciate it.

Watch our live stream

Conclusion

Stay tuned for more updates and exciting news that we will share in the future. Follow us on Zapp_run Twitter, Invertase Twitter, Invertase Linkedin, and Invertase Youtube, and subscribe to our monthly newsletter to always stay up-to-date.

Firestore to BigQuery via Firebase Extensions

Majid Hajian — Tue, 24 May 2022 11:35:06 +0000

Introduction

Welcome to part one of our new series on Firebase Extensions. Here we explore what we can gain from using these features and how to fully optimize usage.

What is Firestore?

Firestore is a real-time, highly scalable NoSQL document database. It is most often found on the client-side web and mobile applications.

Data management within this type of database allows users to be fast-paced and flexible when editing data.

This provides developers with a flexible approach to storing data as well as easy integration when using one of the language SDKs.

Why BigQuery?

BigQuery can be considered the opposite of Firestore from a data structured point of view. Using an advanced querying engine, large complex datasets can be found and organized with minimal effort.

Using a form of SQL(structured-query-language), BigQuery allows data to be queried with minimal time between queries.

The defined relationships between tables mean data can be formed between multiple

Google Data Studio

The final piece of the puzzle. This application allows users to visualize data through a series of tools.

We have all experienced a time when simply showing data on a screen is simply not enough - charts, diagrams, and other advanced visualizations have provided an easier and more concise way to view and understand complex data.

As an advanced reporting tool, Google Data Studio is ideal for generating easy-to-present information to any audience. One of the main strengths of this tool is the range of databases that can be connected to import data and this includes BigQuery data!

What are Firebase Extensions?

Extensions allow well-tested pre-defined functions to be deployed and used in conjunction with the Firebase ecosystem like Auth, Firestore, Cloud Storage, etc.

Designed to increase productivity, a suite of features is available to improve automation through highly configurable functions.

Authentication, Database, and Cloud Storage triggers are just some of the functions used to enhance database data.

The plugins allow custom code to be built on top of Google product-based events, allowing many forms of integration (local or third party) or to even enriching Firestore data.

You can read more about triggers here:

Putting it all together, via the extension

Combining the above technologies would normally require a lot of manual setup and configuration, such as manually creating tables, and views and importing Firestore data.

The Firestore BigQuery extension does all of the heavy liftings and ensures that data is consistently synchronized between Firestore and BigQuery.

To get started, follow these steps:

Install the extension here.
Create some data on Firestore
Query data via big query
Present your data all fancy in Google Data Studio

Firestore-BigQuery-Export

Why an extension? Manually importing data to BigQuery can be a tedious task and even more so when data is required to be synchronized in real-time between two databases. This is where the extension comes in!

Using well-tested and designed cloud functions, the extension utilizes triggers to update specified BigQuery tables with data synced from Firestore!

Basic configuration

Configuration options make this easy to choose which data will be copied to BigQuery, with the use of wildcards as a way of choosing your document data, for example:

chatrooms/{chatid}/message

The above configuration will sync all chatroom sub-collections along with the document contained in the message.

Syncing to Big Query

One aspect to note is that the relevant BigQuery tables are not created on the installation of the extension. Table development is organized when the first record sync is recorded, on Firestore write the extension by default will create a table and a view specific to the configuration entered when setting up the extension.

raw_changelog

The change-log is a standard SQL table that contains all of the updates that have occurred when syncing from Firestore. Following a pre-defined schema this will provide:

document_id: The document id of the synchronized Firestore document upon creation.

event_id: The id of the document that triggered the update.

operation: What type of Firestore CRUD event triggered the update. This can be INSERT, UPDATE, DELETE, or IMPORT.

document_name: This is the Firestore path of the updated document.

data: A plain text JSON representation of the Firestore document.

timestamp: The Firestore timestamp at which the event took place.

raw_latest

This is a predefined BigQuery View that selects the latest unique changes from the changelog table.

Custom Schemas

The raw_latest view provided by the extension provides a basic view of the imported data, however, this does not mean that more advanced views can be created to show the data.

All Firestore data types are covered in the toolkit which means you can complex data structures.

{
  "fields": [
    {
      "name": "name",
      "type": "string"
    },
    {
      "name": "favorite_numbers",
      "type": "array"
    },
    {
      "name": "last_login",
      "type": "timestamp"
    },
    {
      "name": "last_location",
      "type": "geopoint"
    },
    {
      "name": "geo_point",
      "type": "stringified_map"
    },
    {
      "fields": [
        {
          "name": "name",
          "type": "string"
        }
      ],
      "name": "friends",
      "type": "map"
    }
  ]
}

Simply, define a test schema as above and run the following command:

$ npx @firebaseextensions/fs-bq-schema-views \
  --non-interactive \
  --project=${param:PROJECT_ID} \
  --dataset=${param:DATASET_ID} \
  --table-name-prefix=${param:TABLE_ID} \
  --schema-files=./test_schema.json

An advanced view modeled on your imported data will now exist in BigQuery!

Backfilling Data

As mentioned previously, table and view creation occur on the first record change following the installation of the extension.

So this provides an obvious question, how do I import previously existing data? We have an import script for that!

npx @firebaseextensions/fs-bq-import-collection

Similar to the generate-schema tool, this can be run interactively and also in a non-interactive. The following information is required to run an import:

${PROJECT_ID}: the ID of the Firebase project in which you installed the extension
${COLLECTION_PATH}: the collection path that you specified during extension installation
${COLLECTION_GROUP_QUERY}: uses a collectionGroup query if this value is "true". For any other value, a collection query is used.
${DATASET_ID}: the ID that you specified for your dataset during extension installation

For larger datasets, this tool also has a multi-threaded option to improve performance and memory! Use the -multi-threaded flag for non-interactive or select to run multiple threads when prompted interactively.

Running Multiple Instances

A question that is asked quite often with extensions is how to handle different configurations once an extension has been installed. The answer here is easy, install another instance!

Firebase extensions will allow more than one instance of an extension to be installed, they will simply create another set of resources and operate under another ID.

If for example a wildcard query, does not cover all the required collections, install another extension and point the configuration to the required collections.

Visualizing the results

For this example, we are going to demonstrate, the wildcard path using the information on countries around the world.

To begin, with an extension instance will be required with the minimum following configuration:

Collection path: regions/{regionId}/countries
Dataset name: regions

Table name: countries

Wildcards: true

Firestore data can be added using the sample script located here.

Now we have data synced from Firestore to BigQuery, we can use reporting tools to provide a clearer view of the information.

Navigate to https://datastudio.google.com/reporting/ to create a new report.

(Sign up if prompted.)

Select BigQuery as your data source and authorize if required.

In this example, we are going to use a Custom Query to allow specific data to appear in our dataset.

Select:

CustomQuery ⇒ {Billing ProjectId} and enter the following query...

SELECT document_id as Name, cast(JSON_VALUE(c.data, "$.population") as INTEGER) as Population
FROM `{my-project-id}.regions.countries_raw_changelog` c

This will present the queried dataset that we can now use to visualise the data.

To include the relevant field, you can customize the columns. In this case, select metric and choose population:

Once the dataset is ready, we can now create a pie chart.

Choose Add a chart, select Pie Chart, and place it onto your editor canvas.

Finally, repeat the previous steps. Try updating the Metric data source on the Pie chart to show population if the chart does not automatically include the correct metric.

Tada! 🎉

We can now visualize our Firestore data through BigQuery and DataStudio.

New Features

The team behind Firebase Extensions has been hard at work ensuring that the cutting-edge features from BigQuery have now been adopted as part of the extension. From the latest release, you can now take advantage of those features when configuring your extension.

Wildcards

By default, data synchronized from Firestore is stored in a single column called “Data”. This will store all data based on a pre-configured collection path, for example…

“categories/{category}/products”

Before this feature, engineers would struggle to associate data in a query without knowing the wildcard path of how the data was synchronized.

Now you can query with the following:

SELECT * FROM Countries  c WHERE c.wildcard.region = "europe".

So let's look at an example.

As a developer, I have been asked if I can provide a report on countries around the world! I have been provided a handy API for providing the data for my database https://restcountries.com/#api-endpoints-v3-all.

After scanning the API it seems reasonable that the collections and sub-collections would be divided into the following categories.

Regions (Collection)

Countries (SubCollection)

This provides me with the following wildcard path for my BigQuery installation:

regions/{regionId}/countries

Once installed. I can give the new parameters a test! Run the following query to get all countries that are currently in South America.

SELECT document_id, JSON_VALUE(c.path_params, "$.regionId") 
FROM `extensions-testing.countries_example.regions_raw_changelog` c
WHERE JSON_VALUE(c.path_params, "$.regionId") = "South America"

Partitioning

As databases continue to grow, query performance and costs can often be the first to suffer when it comes to querying data. One solution to this is Table partitioning.

To improve performance BigQuery will divide table content based on the specific column data used in partitioning. Smaller and specific tables will mean faster querying and better results. Additionally, this will reduce costs as less data read will mean less cost-per-read for the owner of the project!

There are three types of partitioning offered by BigQuery

Time-unit allows a user to partition on three different data types, specifically TIMESTAMP, DATE, and DATETIME.
Ingestion Time based on the TIMESTAMP value of when the data was created
Integer Range specifically partitions based on an integer value.

The BigQuery Firebase extension will automatically create the column and data type partitioning based on which configuration is used when installing the extension.

Users can then query data based on the specified partitioning field.

SELECT * FROM `extensions-testing.20220309_6.20220309_6_raw_changelog` 
WHERE created = "2022-04-18" 
LIMIT 1000

Clustering

Clustering is a feature that organizes table data by sorting specified columns and is an ideal solution for reducing the number of reads made on a table through a query.

When defining clustering, multiple columns can be defined allowing specific ordering of records to minimize the number of unnecessary reads on a query.

Through the extension, adding clustering is as simple as adding a comma-separated list of the columns you would like to cluster by - this is then applied to any new table.

Big Query will then take care of the rest!

Cross Project Support

Previously Firestore and Big Query databases were synchronized based on the Firestore project name.

The extension now allows support for choosing which Big Query project is used for synchronization.

A typical scenario for this would be to install multiple instances of the extension to share the data across multiple (separate) instances without having to support multiple Firestore instances.

Transform Function

As some data may require additional processing, developers are offered the opportunity to intercept the payload and modify it as needed.

When data from Firestore has been created or modified, the entire payload is copied to the BigQuery table under the data column in the following format.

{ 
  data: [{
    insertId: int;
    json: {
      timestamp: int;
      event_id: int;
      document_name: string;
      document_id: int;
      operation: ChangeType; //CREATE, UPDATE, DELETE or IMPORT
      data: string;
    },
  }]
}

By providing a custom URL, users can receive the original payload and modify it as required. The returned data from the response is then saved into the BigQuery table.

You can access example functions provided by Invertase here.

You may follow us on Twitter, Linkedin, and Youtube to get our latest updates.

PS: This post was initially written by Darren Ackers, the lead developer at invertase.io. You may find original content at https://invertase.link/koCT

Introducing Extension Events

Majid Hajian — Thu, 19 May 2022 09:13:44 +0000

Amongst all of the exciting news at Google IO last week, one, in particular, stood out for us amongst the Firebase community, Extensions events! Here we will discuss what this means for Firebase Extensions while looking at some use cases for better understanding.

What are events?

In a nutshell, events are pub-sub events. Built on top of the Eventarc, this allows developers to write decoupled code to listen to a specific pre-defined subscription.

This update became available in the latest 10.2.0 release of the Firebase admin SDK.

Firebase Extensions

Ok, sounds good! So how do I use this with Firebase?

Publishing an event

Topics are a fundamental part of the pub-sub ecosystem. Like any other implementation, these are also fully customizable in Firebase Extensions.

In this example, we are going to use the Stripe Payment Extension updates, which will allow an enhancement of the Stripe Webhook events. In this example, we are going to focus on when a product has been created.

A new series of topics have been defined in this extension, specifically

events:
  - type: com.stripe.v1.product.created
    description: Occurs whenever a product is created.

  - type: com.stripe.v1.product.deleted
    description: Occurs whenever a product is deleted.

Extension configuration

Events are the input type, this will allow a customized list of events to be defined.

To define an individual event topic:

Type is the topic name to which developers can subscribe, this guide provides an example of how to define a topic name.

{provider_id}.{version}.{topic_name}

ProviderId (required): Event types must contain a pre-fix of the provider as a unique definition.
Version (recommended): A unique version number.
TopicName: A unique relatable name for the event.

Description A free text explanation to easily describe the intention of the event.

Setting up a channel

To publish an event, first ensure the Firebase admin SDK is a minimum version of 10.2.0.

{
    "firebase-admin": "^10.2.0",
}

This will provide module access to the eventarc import:

import { getEventarc } from 'firebase-admin/eventarc';

Next, a channel is required to publish the event. The Admin SDK, will create a series of environmental variables, which will provide supporting arguments for creating a channel.

const eventChannel =
  process.env.EVENTARC_CHANNEL &&
  getEventarc().channel(process.env.EVENTARC_CHANNEL, {
    allowedEventTypes: process.env.EXT_SELECTED_EVENTS,
  });

EVENTARC_CHANNEL Contains the fully qualified resource name generated from the extension configuration. This follows a projects/{project}/locations/{location}/channels/{channel-id} format.

EXT_SELECTED_EVENTS Includes a list of all event topics defined in the extension YAML configuration.

Pushing an event

Once a channel has been created, we can now send information to a specified event type.

await eventChannel?.publish({
  type: `com.stripe.v1.${event.type}`,
  data: event.data.object,
 });

Publish is a promise based function than requires a type matching a type defined in the extensions YAML configuration.

Data is the information we want to send as part of the published event, in this case, we will be forwarding the result from the relevant Stripe webhooks.

Subscribing to an event

So now we have successfully set up the publishing event, we would now like to receive and extend our cloud functions to do something useful with it!

As part of the original setup, our Stripe extension will have already updated the relevant Firestore and Stripe references.

In this example, we are going to send a Slack notification informing us that an event has been completed along with any relevant data!

Deploy a function using the following source.

Once our setup has been completed, simply add a new product in Stripe to receive the following update in Slack...

What next?

Events in extensions allow unlimited possibilities. Let us know what you’ve been making or how you feel Events can make developing easier!

You may follow us on Twitter,Linkedin, and Youtube or sign-up for our newsletter to get our latest updates.

PS: This post was initially written by Darren Ackers, the lead developer at invertase.io. You may find original content here

Announcing stable FlutterFire Auth for Desktop

Majid Hajian — Thu, 12 May 2022 16:27:05 +0000

Overview

If you're just coming from this year's IO Flutter keynotes, the Flutter team has announced that Flutter on desktop platforms moved to the stable channel, which includes Linux and MacOS. Windows was announced a couple of months back. Therefore, Flutter developers now have the full power to create great experiences for desktop users, regardless of the operating system!

With that comes an important question: how much of the Flutter ecosystem is ready for Desktop? We can't tell yet, but we have great news for you. FlutterFire on Desktop is making its first big step, and as of today we're excited to announce that our sponsored package FlutterFire Auth on Linux and Windows is moving to stable 🎉

In a previous blog where we announced preview, we explained the approach followed in developing the packages and the reasoning behind it, so if you're curious, give it a read.

With Firebase Auth on Linux and Windows, In addition to all user-specifc operations, you get support for the following authentication methods:

Email and password
Anonymous (guests)
Phone number
OAuth providers including: Google, Facebook, Twitter, and GitHub

Get started on Linux and Windows

If you're already using Firebase Auth in your Flutter app, you don't need to do much. We built the packages as a platform implementation above the same API of FlutterFire. This means nothing will change for developers, it's already the same API thanks to Flutter's federated plugin system.

In the root of your Flutter project, run the following command:

flutter pub add firebase_core_desktop 
flutter pub add firebase_auth_desktop

This will install and add the package into your pubspec.yaml.

If you're not already using firebase_auth in your app, you need to add it:

flutter pub add firebase_core
flutter pub add firebase_auth

That's it! Inside your code, you can import it this way:

import 'package:firebase_auth/firebase_auth.dart';

You can see that we're not importing it as package:firebase_auth_desktop/firebase_auth_desktop.dart, that's because firebase_auth_desktop is not a standalone package, it's just a delegate implementation that will be used when you compile your app on Windows or Linux.

Firebase configurations

If you go to the Firebase console and try to setup an app, you won't find a Linux/Windows option. The configurations you will use with firebase_core_desktop are web configurations.

You can manually create a new web app in the console, copy the configurations and paste them into your app. You will need to do a couple of if-statements to return the correct configurations for each platform your app supports.

There's another option to save you some time and effort. The FlutterFire CLI latest update v0.2.2 added support for Linux and Windows, where the configurations will be generated and added automatically for you if it finds firebase_core_desktop in your pubspec.yaml file. Let's see an example!

First, make sure you update to the latest version of FlutterFire CLI:

dart pub global activate flutterfire_cli

In the root of your project, run:

flutterfire configure

It will ask you for the platforms which you want to configure Firebase for.

? Which platforms should your configuration support (use arrow keys & space to select)? › 
✔ android
✔ ios
✔ macos
✔ web
✔ windows
✔ linux

Choose your platforms, then hit enter. A new file named firebase_options.dart will be generated under lib/ folder.

Taking a look inside firebase_options.dart:

class DefaultFirebaseOptions {  
    static FirebaseOptions get currentPlatform {
      if (kIsWeb) {
        return web;
      }
      switch (defaultTargetPlatform) {
        case TargetPlatform.web:
          return web;
        case TargetPlatform.android:
          return android;
        case TargetPlatform.iOS:
          return ios;
        case TargetPlatform.macOS:
          return macos;
        case TargetPlatform.windows:
          return windows;
        case TargetPlatform.linux:
          return linux;
        default:
          throw UnsupportedError(
            'DefaultFirebaseOptions are not supported for this platform.',
          );
      }
    }
    ...
}

The last step is to initialize Firebase using the generated options.

await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

OAuth authentication

Authenticating users with third-party providers on Firebase is a 2-steps process:

First, you use a third-party package or the REST API of some provider to get the required credentials (usually access token).
Next, you will call signInWithCredentials in the Firebase SDK and pass in the credentials you just got from the provider.

Let's take Google sign-in as an example, we first need to get an accessToken and idToken from Google's API, which should happen in a browser or WebView, then we use the credentials to sign the user in using Firebase. Therefore, your user is authenticated on Firebase with Google as an authentication provider.

During the development of FlutterFire Desktop, we faced a limitation. All the third-party packages providing OAuth authentication for famous providers (such as Googe, Apple, Facebook ... etc) only supports iOS and Android, some have web.

As a solution, we released desktop_webview_auth, which makes use of the native WebView on Linux, Windows and MacOS to authenticate users using Google, Facebook, Twitter and GitHub.

Let's see an example

First, add the required packages:

flutter pub add firebase_core firebase_auth
flutter pub add firebase_core_desktop firebase_auth_desktop
flutter pub add desktop_webview_auth

Next, let the user sign in using their preferred social provider using desktop_webview_auth plugin.

import 'package:desktop_webview_auth/desktop_webview_auth.dart';
import 'package:desktop_webview_auth/github.dart';
final result = await DesktopWebviewAuth.signIn(
  GitHubSignInArgs(
    clientId: _githubClientId,
    clientSecret: _githubClientSecret,
    redirectUri: _redirectUri,
  ),
);

String? accessToken = result?.accessToken;

The user will see a window popping up to authenticate them with GitHub.

There are 2 possible scenarios here:

The user closes the window without signing in, the will cancel the operation and you will get a null result.
The user sign in successfully, and we get a accessToken back, in which case you will go to the next step: authenticating with Firebase.

if (accessToken != null) {
  // Create a new Google credential.
  final credential = GithubAuthProvider.credential(accessToken);
  // Once signed in, return the UserCredential.
  await FirebaseAuth.instance.signInWithCredential(credential);
} else {
  return;
}

You can view the full working example on our samples repository.

What's next for Desktop

Firebase Auth is only the beginning, we have an issue tracking the progress, we would love to hear your feedback and thoughts!

Please Welcome Flutter 3.0!

Majid Hajian — Thu, 12 May 2022 07:45:35 +0000

I can't believe it's time again for another major Flutter stable release. Yes, everybody, please welcome Flutter 3.0.

Last year in Google I/O, the Flutter team announced Flutter 2.2. Since then, there have been a few significant improvements and stable releases to Flutter. At Invertase, as an open-source company, we appreciate all the hard work that hundreds of community contributors have done for Flutter, too; kudos, everyone! It shows how great Flutter is performing and how responsive its team is to address critical issues, upgrade Flutter, and take it to the next level.

This article will summarize what's new in Flutter and Dart.

Introducing Flutter 3.0

Flutter is primarily designed to be portable and able to create beautiful apps. Flutter developer tooling focus on making our development process fast and productive.

At Google I/O 2022, Flutter 3.0 was announced! Let’s take a look at what is new to this major version!

macOS & Linux are finally stable!

Windows, Web, Android, and iOS have been stable for a while, and finally, we can welcome macOS and Linux to the list of stable support. Flutter 3 is one of the most significant milestones in the journey of Flutter up to today because Flutter 3.0 supports all six platforms on the stable channel officially.

Improvement on Flutter Web

Flutter web has not received many upgrades in this version. However, there are a few significant enhancements, especially for performance.

App lifecycle API

A new API that provides you full control over the Flutter framework, engine, and content. This lets you run the Flutter in headless mode on the web. An example could be preloading the content while showing a login screen or a progress bar!

You can see this new change on the gallery.flutter.dev (source code), where you will see a splash screen that zooms in and loads the entire application.

Faster image decoding and scrolling

Flutter 3 for the web comes with a big improvement in image decoding and scrolling, particularly using the Chrome 99+.

In fact, Flutter is levering the new web-codec API in the browsers to improve decoding images and introduces way better scrolling with a high chance of getting 60 fps while decoding images.

Flutter DevTools

Flutter DevTools is a great addition to Flutter that helps to debug any Flutter app as productive as possible. There are a few updates in Flutter DevTools 2.12.2

Enhance Tracing under the performance tab
Improvement on the Network tab
Dedicated plugin for Provider to keep track of change notifier

Android and iOS updates

Android and iOS were the leading platforms from the very beginning, and in Flutter 3, they have received a few major upgrades.

Foldable device support

Flutter team and Microsoft have collaborated to bring better support for foldable devices.

Material 3 widgets

We all have been waiting for Material 3, and YES, it has landed on Flutter for Android. This is a massive update on Material widgets, and it enables developers to welcome Material You for their Android applications.

Material 3 (also known as Material You) is the next generation of Material Design. The significant changes include color system improvements, typography improvements, and updates for many components.

The Material 3 widgets in Flutter were introduced with features including

Adaptive colors
New buttons
New app menu
Variable font support

What you need to do to use Material 3 in Flutter 3.0 is to enable it via a parameter to ThemeData

return MaterialApp(
    theme: ThemeData(useMaterial3: true),
    // ...
 );

Enhanced platform views

The platform view support on Android has been re-architected which will make native inline add much smoother.

Put Flutter to Work

This project is a demo intended to help people test drive Flutter by integrating it into their existing applications. Included in this repo is a Flutter add-to-app module, which contains the UI and logic for displaying a popup to capture user feedback (a "net promoter score"). Alongside the module are three newsfeed applications for iOS, Android, and web, built with SwiftUI, Kotlin, and Angular, respectively. Read more here about Put Flutter to Work

Flutter Casual Games Toolkit

Flutter is taking advantage of the hardware-accelerated graphics support provided by Flutter and open source game engines like Flame, making it easier for casual game developers to get started.

Other updates

Enhance code lints
Improve desktop accessibility
Cascading menus
Desktop system menu support
Theme Extensions
The simplified release model for iOS
CJK desktop support
Signed executables
Apple Silicon native binaries (read more here)

Introducing Dart 2.17

Dart 2.17 stable was announced along with Flutter 3.0 with many long-awaited features that developers have been waiting for. Dart is the secret sauce behind Flutter, and any improvements in Dart would help improve Flutter's development. Let’s take a look at the new features.

Enhanced Enumerations

A massive update has landed for enum to super-charge them. We use leverage extensions to extend the functionality of enums including defining methods. Starting from Dart 2.17, we no longer need to use our older model to work with enum .

enum Cars {
    tesla('Model X', 200);
    bmw('X6', 120);
    porsche('Tycon', 220);

    final String name;
    final int price;

    const Cars(this.name, this.price);

    String get nameAndPrice => '$name:$price';

    String greeting(String yourName) {
        return 'My name is $yourName and I have a $name that costs $price!';
    }   

    @override
    String toString() {
        return 'The name is $name and price is $price';
    }
}

void main() {
  print(Cars.tesla.greeting('Majid'));
  print(Cars.bmw);
  print(Cars.porsche.name);
}

Super constructors

This is perhaps one of my favorites that will shorthand our coding, in which you may pass constructor arguments to the superclass.

Let’s explore what the new syntax looks like. We used to have the old syntax like below

class Animal {
  Animal(this.name);
  final String name;
}

// Old way: before Dart 2.17
class Dog extends Animal {
  Dog(String name, this.age) : super(name);
  final int age;
}

The new syntax is straightforward

class Animal {
  Animal(this.name);
  final String name;
}

// New way: Dart 2.17 and above
class Dog extends Animal {
  Dog(super.name, this.age);
  final int age;
}

Name args anywhere

Previously, we had to add name arguments in the last position of the constructor. From Dart 2.17, we no longer need to do that. You can put your named arguments anywhere in the constructor.

class Animal {
  Animal(this.name);
  final String name;
}

class Dog extends Animal {
  Dog(super.name, {required this.age});

  final int age;

  void bark() => print('$name is $age year-old and is barking');
}

void main() {
  Dog(age: 4, 'Lucy').bark();
}

What’s next?

I have tried to summarize and give you the best features of Flutter 3.0. However, I recommend watching the keynote and enjoying the excellent presentations and exciting interviews.

You can read Introducing Flutter 3 and Dart 2.17: Productivity and integration blogs for more information.

I am sure that the Flutter continues to surprise us with way more features in the features, and I am hoping that the Flutter community, which is a big part of the Flutter's success, can help enhance the Flutter ecosystem.

Nonetheless, we at Invertase aim to support the Flutter community in different ways and hope to improve the Dart and Flutter ecosystem. We started filling in the gaps that we have recognized and strive to serve with our open-source mindset and efforts.

In fact, we have already started doing that with projects such as FlutterFire, Melos, Spec, and more are to come! We have fantastic news and updates for you and the Flutter community in the upcoming weeks.

You may follow us on Twitter, Linkedin, and Youtube to get our latest updates.

Appreciate your achievements!

Majid Hajian — Tue, 07 Sep 2021 07:20:53 +0000

In a blink of an eye, time passes. I had a period in my life where I always thought, what I have is not enough.

I want more.

Consequently, I worked harder, longer, and I didn't notice that my precious time of the moment is passing by, and I didn't enjoy it as I must!

I didn't sleep enough sometimes just because I thought I had to work more to gain more!

It may happen to you, or probably you have even faced it already.

Having so much on your shoulder and feeling pressure for achieving more will result in unhappiness.

When I was initially introduced to "The Subtle Art of Not Giving a F*CK," I thought, ok, probably this is another cliche in the genre. I started to learn more about it on Goodreads. I learned so much from the book below to address unpleasantness.

Soon after reading a few reviews, I realized that it's about the time that I had! The book is the one that might help me to become better at handling similar situations and inspiring me to enjoy my life and appreciating what I have.

I read the book within a short time a few years ago, and about a week ago, I started to listen to the book for the second time.

I decided this time to note down what I learned from the book and share it with you.

More isn't always better

The first listen that I learned!

You might think, well, who doesn't want more money? Who doesn't want a good car, or a house and so on!

Well, you are absolutely right. Those are valuable. Sometimes these assets come by sacrificing your time without you notice it.

Yes, The PRECIOUS time. Let me give you an example of my life.

Back in 2014-2015, I was trying very hard to earn more money. Thus, I worked harder, day and night, sometime around 16 to 17 hours a day! I had enough money to enjoy my life with my family and be happy, but I chose to be insatiable.

As a result, I earned more money, but I was not happy! I decided to travel less, spend less time with family and friends, and be more isolated for about two years. You see, I wanted more, but it wasn't better for me because I sacrificed my happiness, the best time of my life that could be with my family and friends, and enjoy every second of it. Those times never return. That's why I really regret it, even though I earned more money and became wealthier.

There are many of these examples in my life and probably yours.

The point here is that I could have appreciated what I have and be happier, which could have yielded a better income at the end because I could have been thinking of a better way to earn more! Mental health is a real thing!

Sometimes, you should stop, think and enjoy what you have and try to find another way.

If time goes, it never comes back!

Take Responsibility

Many of us start to blame others when there is a problem. That's poisonous. I learned that I should be more responsible because this prevents me from thinking better to find a solution to the problem.

Let me elaborate with an example of my real life.

In my issue one, when I was talking about the job interview, it was quite easy to blame my family, child, friend, or even work that stopped me from educating myself to win a job!

What I did, after each failure, I took responsibility instead; I said, this is my problem, I own it, and I have to become better at it! I must find a way to resolve this problem.

Not even a single time, I blamed anyone or anything for my failure; I learned every single time about the process and tried to level up because I took 100% responsibility for what I did wrong.

Manson, in the book, says: "With great responsibility comes great power."

Stop comparing

Perhaps the most toxic experience is when I compare myself with someone else! In the era of social media, this is even worse!

It's quite often that I open my Twitter, and I see many of my friends share their amazing works, and unconsciously, my mind tells me that what the F* I am doing then!

I learned that I have to stop this way of thinking! We are very different. If someone is doing something, that doesn't mean I have to do that same thing! Or I have to follow what they have done! In fact, I should be proud of what I have done so far.

Let me be honest with you; authenticity is the key! Enjoy what you have achieved. Be proud of yourself! Definitely, be inspired and encouraged but do not blame yourself.

Manson, in the book, is pointing out The Backwards law which says:

The pursuit of a positive experience is itself a negative experience
The acceptance of a negative experience is itself a positive experience. Think about it; This is what actually comparing may affect you! The more you think that someone is rich and you have to become rich, the poorer you feel and the more you want to write articles or want more salary, the less you enjoy what you have written or you have earned.

This doesn't mean you should not try to go to the next level. But it means you should enjoy what you have, plan properly and execute and stay on your mission path; you will finally reach your goals.

Find your values

When I found what really are my values, I tend to become more comfortable with my life and what I do. I started to enjoy it more.

It is absolutely worth the time to sit with yourself and find out your real values.

Manson, in the book, defines Good values and Bad values.

Good values in his option are

Reality-based
Socially constructive
Immediate and controllable
Bad values are:
Superstitious
Socially destructive
Not immediate and controllable
I found the principles great to start with.

For example, honesty is one of my values. It tends to be a good value because it's something that I have complete control over, and it reflects reality. Others can also benefit from it, even if it's unpleasant.

Now that I found this value, I will know what I should sacrifice for or give a f* for.

It's good to have a shortlist to give a f* about rather than everything around us.

Conclusion

"The Subtle Art of Not Giving a F*CK" comes with lots of great examples and advice that perhaps every one of us has faced in our real life!

This book helped me think a bit differently about narrowing down things that I have to really care about and, consequently, making my life less miserable. I recommend you either listen or read this book.

That's it for this week.

I'll be gladly read your feedback and like to hear what you think.

The Art of Failing Job Interviews and Winning a Job! [Personal story]

Majid Hajian — Wed, 01 Sep 2021 07:30:44 +0000

Dear Friends,

A while ago, I shared my personal experiences on Twitter of when I was applying for jobs around 2015-16. Many folks liked it so I decided to write more in this newsletter.

Here is the original tweet:

6 years ago, I decided to live in Europe! for doing that, I had to apply for jobs.

I have had over 50 interviews within 1.5 years, which I was rejected by all of them! It was like every week one rejection letter!

I am now in Oslo because of my 51st job interview.

read more👇
— Majid Hajian 💙 (@mhadaily) August 18, 2021

The story began when I decided to migrate to Europe back in 2015-2016. After living for 4 years in Kuala Lumpur, Malaysia, I thought it’s time for a big change. I had so many friends, most of whom had been offered jobs in Australia, Canada, the USA, and Europe. Meanwhile, I was doing the immigration process for both Australia and New Zealand.

To be honest, I really wanted to go to Canada, but some things happened, and that dream never came true.

In late 2015, I started looking for jobs in Europe. I mainly targeted Germany and the Netherlands; however, I had an eye on different western European countries too, such as France, Denmark, Sweden, etc.

I started by creating a Google sheet to track where I applied for each position, with the details about the job, including how I performed in the interview and a lot more.

I have created a simple template, and if you would like it downloaded from this link.

I search many different sources of jobs, but my main sources were Linkedin, Glassdoor, Stackoverflow.

I always needed visa sponsorship because I had to get a work permit to relocate to the company’s country, which was so challenging for two main reasons:

I held an Iranian passport, and well, it was more difficult for companies to sponsor me.
Not many companies generally sponsor relocation and work permits as it’s hard to apply for the immigration process. It is sometimes very time-consuming and risky; what if the applicant gets rejected, etc.

But anyway, I didn’t give up. As soon as I could find a job, I immediately applied and added it to my sheet for tracking.

All in all, for about 1.5 years, I tried and applied to over 100 Jobs.

Interviews

Among all the jobs I applied for, I only received responses for about half, inviting me for interviews. Now you can imagine, I had about one interview each week. In reality, it was much like that; I had several interviews in a week and sometimes nothing for a month.

However, from the very beginning, I told myself that I would go to all of the interviews, and right after each, I would think then write about my strengths and weaknesses (as you see on my sheet)

Why?

Because I was ready to get rejected, I know that probably to get a job, I have to become way better. I was confident that I am good, but the rejection was part of becoming better. I was not afraid of it. In fact, I knew that part of being successful has so many failures.

So What did you do with rejections then?

Well, easy! I started to fill my gaps in terms of personal, technical, and behavioral aspects.

Let me give one example.

In one of my interviews, I was called to a remote whiteboard for pair programming in the first session. The interviewer started writing code and asked me to complete lines by lines. Guess what? I didn’t have any confidence in doing it. I was stressed to death.

Imagine in such a stressful situation how you would perform? Probably not well, and I didn’t either. I completely forgot everything! My heartbeat was high enough that I could hear it clearly.

I was so embarrassed and disappointed. After the meeting, I was down for a few hours, but you know, I couldn’t let that go. I had to improve this skill.

I wrote everything in my weakness and started to sharpen it. I researched and found videos and blogs and started to write codes without any help from my head, so on and so forth.

I practiced.

Since I had an awful experience, in my next interviews, I asked whether they had pair programming (whiteboard style) or not? I actually decided not to attend those interviews because I already knew I was not good at it and would fail.

But you know, it also was great practice for me, I could see if I have improved or not. So, in any subsequent interviews, I went along much more prepared than previously for at least this skill. At a minimum, I was not as nervous and stressed out as I had been initially.

Another example

Lack of technical knowledge was another reason I got rejected in many of the interviews. But, after every single interview, I started to research questions I didn’t answer well or something that they asked, and I didn’t know about it.

ES6 was so hyped in the JavaScript world in those years, but I was not really familiar with it. Still, interviews helped me understand the most important things in JavaScript ES6. I started learning them one by one until I remember in one of the interviews, I answered all questions and pair programmed with no issue.

Learn from mistakes but give yourself room

This is what I did, even though I got rejected in almost 50 interviews over 1.5 years. I didn’t stop applying and learning to fill my mistakes and hone my skills, and in fact, eventually, I got a job!

Each failure, especially in a technical interview, is a great opportunity to level up your skills. Just embrace it. Learn from your mistakes and be ready for the next one.

Do not underestimate or overestimate yourself.

The last thing I wanted to tell you was that I got a job from a company and from a country that I didn’t even consider.
For example, the majority of my interviews and jobs were for Germany. I was confident that I could get a job there, which I think I overestimated. In reality, I got a job in Norway! A place where I never thought there might be an opportunity for me.

Find all possibilities and study them well. I am sure you’ll find a way.

Last words

These are my closing words which I have learned in my life, the hard way, and I repeat them every day:

1- Be consistent
2- Be persistent
3- Never disappoint
4- Think about your ultimate goals
5- Never give up
6- Success is earned
7- Dream big
8- Focus
9- Do what you love
10- Stay humble

YOU CAN DO IT
— Majid Hajian 💙 (@mhadaily) August 18, 2021

I kept my story short, but if you’d like to know more, please tell me, and I will write it in more detail later.

This is my first newsletter issue where you can find it here https://newsletter.majidhajian.com, I will be happy to see you subscribed to my newsletter. You can always unsubscribe at any time.

Meanwhile, enjoy this beautiful lake that I shot.

Devfest Norway 2020, A free conference with diversity in mind

Majid Hajian — Fri, 28 Aug 2020 07:10:20 +0000

September, October and November are months with lots of conferences and meetups. It's the best time to not only sharpen your skills but also become a speaker and share your knowledge.
This year, due to the Covid19 situation, the number of online conferences goes up; I guess there's no excuse not to participate in some of our favorite ones!

History

Among all conferences, DevFest is usually a local event from GDG (Google Developers Group), which happens in October with lots of participants. Devfest Norway 2020 will be one of them, which is an effort from the Norwegian GDG and GDG Cloud groups including GDG Oslo, GDG Cloud Oslo, GDG Bergen, GDG Trondheim, GDG Sørlandet, GDG Stavanger.

CFP

Of course, no conferences can become successful without their speakers. Therefore, we are looking for you to submit your excellent talk. Devfest Norway 2020's CFP is open until 15th September. Please let us know your cool idea.

Diversity

DevFest Norway 2020 is a unique conference this year as not only are we looking for excellent well-known (international) speakers, but we are also striving to create a platform for local, first-time, and underrepresented groups speakers to let them speak. If you are falling into one of these groups, do not be shy and let us know. I am sure you have something to share.

Special Help

If you feel you want to speak and you need some help with things like checking your presentation, rehearsing, or relieving your stress, etc, you can contact us at contact@devfest.no, or you can directly message me on twitter. You may find me on majidhajian.com. I will be more than happy to help if I can enable you to achieve your dreams.

Topics

You may wonder which topics are the focus of DevFest Norway. Generally, DevFest covers a wide range of issues such as Frontend, Backend, ML/AI, Cloud, and Mobile development. This year, we are planning a two-day conference, held at two different times each day. This way we can cover most of these topics, as well as most of the timezones as we go online on October 14th and 15th.

Schedule

We have allotted 6 hours for talks over the course of 2 days. On the first day, October 14th, we will run from 12 PM (GMT+2) until 3 PM (GMT+2).On the second day, October 15th, we will run from 9:30 AM (GMT+2) until 12:30 (GMT+2). So, we hope that these times will cover most of the time zones around the world and that you won't miss your favorite talk.

Free ticket

DevFest Norway 2020 is free of charge; however, you still need to get your free ticket as we are going to generate badges for you. To get your free ticket click here

Win one of our prizes

We have a surprise for you! Join us and perhaps win one of our prizes, which we will announce soon!
Last but not least, We hope that we can bring a pleasant experience online for you to sharpen your skills and learn more.
Hope to see you all on the 14th and 15th of October.

Website: https://devfest.no/
CFP: http://bit.ly/devfest-norway-2020-cfp
Free ticket: http://bit.ly/free-ticket-devfest-no

*Feel free to comment below or DM me if you have any questions or concerns.

How to capture errors and send platform-specific information to Sentry in Flutter?

Majid Hajian — Mon, 16 Dec 2019 18:15:09 +0000

If you don't use Sentry, this article still might be helpful. You may replace Sentry with your error tracking service solution.

One of the aspects of developing software is to handle errors and log them properly in order to mitigate them at the right time.

When we develop for Flutter, indeed, we have several options to capture and log the errors. One of the greatest tools which come with an easy-to-use dart package is Sentry.io.

It is not always easy to reproduce the errors that occur if there is no extra information about the platform or environment as recreating the exact same situation could be difficult and time-consuming.

So, in this article, I will share my experience in Flutter with Sentry by generating a custom event with extra platform-specific information for Android and iOS respectively to report to the Sentry.

So, you will learn:

Get a DSN from Sentry
Import the Sentry package
Initialize SentryClient
Generate Event with the platform-specific information
Detect Debug mode
Catch and report Dart Errors
Catch and report Flutter Errors
Summary

Let's get started!

1- Get a DSN from Sentry

I assume you already have a Sentry account or you are considering it.

To get a DSN, use the following steps:

Create an account with Sentry.
Log in to the account.
Create a new app.
Copy the DSN.

2- Import the Sentry package

Before you import the dart package to your code, you need to add the library to the pubspec.yaml:

dependencies:
  sentry: ^3.0.0+1

At the time of writing this article, the latest version is ^3.0.0+1 but you may upgrade if you read this later.

3- Initialize `SentryClient`

In your Dart code, import package:sentry/sentry.dart and create a SentryClient. for this purpose, I recommend creating a file named sentry_handler.dart and keep all relevant code in this file, it helps to keep the code organized.

/// sentry_handler.dart
import 'package:sentry/sentry.dart';

/// replace sentryDSN with your DSN
final SentryClient sentry = SentryClient(dsn: sentryDSN);

Next is to capture errors and stack traces, but before that, let's generate an even that contains all of the platform information while reporting the errors.

If you don't need this step you can simply skip it and instead use captureException which is default in Sentry dart package documentation.

4- Generate Event with the platform-specific information

Let's create a function named getSentryEvent where it returns an Event that is required by the capture method on sentry.

Future<Event> getSentryEnvEvent(dynamic exception, dynamic stackTrace) async {

}

Platform from dart:io provides information such as the operating system, the hostname of the computer, the value of environment variables, the path to the running program, and so on. You can get the name of the operating system as a string with the operatingSystem getter. You can also use one of the static boolean getters: isMacOS, isLinux, and isWindows. So, let's leverage this:

Future<Event> getSentryEnvEvent(dynamic exception, dynamic stackTrace) async {
  if (Platform.isIOS) {

  }

  if (Platform.isAndroid) {

  }
}

In order to get device information in Flutter, You can use Device Info dart package to help us getting device information with ease! Simply, add it to pubspec.yaml:

dependencies:
  device_info: ^0.4.1+4

and then import it to your code and create DeviceInfoPlugin:

final DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();

Then, get IOS or Android platform information.

final IosDeviceInfo iosDeviceInfo = await deviceInfo.iosInfo;

final AndroidDeviceInfo androidDeviceInfo = await deviceInfo.androidInfo;

and finaly, create your Sentry event with these extra information so the final code will look like:

Future<Event> getSentryEnvEvent(dynamic exception, dynamic stackTrace) async {
/// return Event with IOS extra information to send it to Sentry
  if (Platform.isIOS) {
    final IosDeviceInfo iosDeviceInfo = await deviceInfo.iosInfo;
    return Event(
      release: '0.0.2',
      environment: 'production', // replace it as it's desired
      extra: <String, dynamic>{
        'name': iosDeviceInfo.name,
        'model': iosDeviceInfo.model,
        'systemName': iosDeviceInfo.systemName,
        'systemVersion': iosDeviceInfo.systemVersion,
        'localizedModel': iosDeviceInfo.localizedModel,
        'utsname': iosDeviceInfo.utsname.sysname,
        'identifierForVendor': iosDeviceInfo.identifierForVendor,
        'isPhysicalDevice': iosDeviceInfo.isPhysicalDevice,
      },
      exception: exception,
      stackTrace: stackTrace,
    );
  }

/// return Event with Andriod extra information to send it to Sentry
  if (Platform.isAndroid) {
    final AndroidDeviceInfo androidDeviceInfo = await deviceInfo.androidInfo;
    return Event(
      release: '0.0.2',
      environment: 'production', // replace it as it's desired
      extra: <String, dynamic>{
        'type': androidDeviceInfo.type,
        'model': androidDeviceInfo.model,
        'device': androidDeviceInfo.device,
        'id': androidDeviceInfo.id,
        'androidId': androidDeviceInfo.androidId,
        'brand': androidDeviceInfo.brand,
        'display': androidDeviceInfo.display,
        'hardware': androidDeviceInfo.hardware,
        'manufacturer': androidDeviceInfo.manufacturer,
        'product': androidDeviceInfo.product,
        'version': androidDeviceInfo.version.release,
        'supported32BitAbis': androidDeviceInfo.supported32BitAbis,
        'supported64BitAbis': androidDeviceInfo.supported64BitAbis,
        'supportedAbis': androidDeviceInfo.supportedAbis,
        'isPhysicalDevice': androidDeviceInfo.isPhysicalDevice,
      },
      exception: exception,
      stackTrace: stackTrace,
    );
  }

/// Return standard Error in case of non-specifed paltform
///
/// if there is no detected platform, 
/// just return a normal event with no extra information 
  return Event(
    release: '0.0.2',
    environment: 'production', 
    exception: exception,
    stackTrace: stackTrace,
  );
}

Awesome, now when you capture an error, not only you see stack traces but also you'll see extra information which might be helpful for debugging and reproducing the bug.

5- Detect Debug mode

With Sentry set up, you can begin to report errors. Since you don’t want to report errors to Sentry during development, first create a function that lets you know whether you’re in debug or production mode.

/// Whether the VM is running in debug mode.
///
/// This is useful to decide whether a report should be sent to sentry.
/// Usually reports from dev mode are not very
/// useful, as these happen on developers' workspaces
/// rather than on users' devices in production.
bool get isInDebugMode {
  bool inDebugMode = false;
  assert(inDebugMode = true);
  return inDebugMode;
}

I suggest adding isInDebugMode function to your utility file where you can use it globally throughout your application.

6- Catch and report Dart Errors

Next, use this isDebugMode in combination with the SentryClient to report errors when the app is in production mode.

/// Reports dart [error] along with its [stackTrace] to Sentry.io.
Future<void> reportError(Object error, StackTrace stackTrace) async {
  if (isInDebugMode) {
    // In development mode, simply print to console.
    print('No Sending report to sentry.io as mode is debugging DartError');
    // Print the full stacktrace in debug mode.
    print(stackTrace);
    return;
  } else {
    try {
      // In production mode, report to the application zone to report to Sentry.
      final Event event = await getSentryEnvEvent(error, stackTrace);
      print('Sending report to sentry.io $event');
      await sentry.capture(event: event);
    } catch (e) {
      print('Sending report to sentry.io failed: $e');
      print('Original error: $error');
    }
  }
}

In your main dart file entry for Flutter, Where you call runApp, import reportError function and assign it to onError callback.

  // Runs the app in a zone to be able to capture and send events to sentry.
    runZoned<Future<void>>(() async {
      await SystemChrome.setPreferredOrientations(<DeviceOrientation>[DeviceOrientation.portraitUp]).then((_) {
        runApp(YouAwesomeApp());
      });
    }, onError: reportError);

6- Catch and report Flutter Errors

In addition to Dart errors, Flutter can throw errors such as platform exceptions that occur when calling native code. To capture Flutter errors, override the FlutterError.onError property. If you’re in debug mode, use a convenience function from Flutter to properly format the error. If you’re in production mode, send the error to the onError callback defined in the previous step.

So, In your main dart file entry for Flutter, Where you call runApp:

    FlutterError.onError = (FlutterErrorDetails details, {bool forceReport = false}) {
      if (isInDebugMode) {
        // In development mode, simply print to console.
        FlutterError.dumpErrorToConsole(details);
      } else {
        // In production mode, report to the application zone to report to Sentry.
        Zone.current.handleUncaughtError(details.exception, details.stack);
      }
    };

7- Summary

Since buggy apps lead to unhappy users and customers, it’s important to understand how often your users experience bugs and where those bugs occur. That way, you can prioritize the bugs with the highest impact and work to fix them. However, sometimes it's crucial to know the specific information about the running platform where the errors occurred in order to reproduce and debug and at the end of the day fix.

Adding more platform-specific information to your error tracking service event whether is Sentry or other services helps to find out the details to resolve the bugs and errors easier by reproducing in the exact same environment.

I hope this small tutorial can help you to manage your errors with better and more extra information.

If you found this article helpful, consider following me here or on Twitter and react to the article.

Your feedback is also highly appreciated.
Happy debugging,

Upgrade to Bloc Library from v0.x to v2.x for Flutter and Angular Dart

Majid Hajian — Thu, 31 Oct 2019 10:30:28 +0000

There has been a great improvement to Bloc library by Felix Angelov which has been published here after a great contribution by the community for an issue on Github. This is the power of the community in order to shape a great library. So, As a community person, I love it!

Since then, I was asked several times regarding the upgrade to the new version. Although changelogs are available by Felix, I still decided to write a short blog in order to share my knowledge after upgrading to the new version on a huge codebase.

The main changes in Bloc v2.0.0 are:

1- Bloc as a Stream, that means all blocs are now Stream. Therefore, you can listen to bloc right away and it enables us to get state as the latest state available. In short, currentState in bloc is no longer makes sense instead it becomes state.

2- Bloc as a Sink, which enables us to use add on sink API in order to notify the bloc of a new event.

So, in order to make your code compatible, technically in your Bloc you need to do the following changes:

from

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
  exampleMethod() {
    print(currentState);
  }
}

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
  exampleMethod() {
    print(state);
  }
}

When you need to manipulate your state you had dispatch method where you could pass an event to, now you can simply use add instead as all blocs are now Sinks.

from

 BlocProvider.of<AnyBloc>(context).dispatch(YourEvent());

 BlocProvider.of<AnyBloc>(context).add(YourEvent());

and simply if you are in Bloc itself,

from

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
  ExampleBloc() {
    dispatch(ExampleInitialEvent());
  }
}

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
  ExampleBloc() {
    add(ExampleInitialEvent());
  }
}

and now if you have cleaned up your bloc by override the dispose method, you should be able to replace it with close due to the change as mentioned above. Simply like:

from

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
  ExampleBloc() {
    dispatch(ExampleInitialEvent());
  }

  StreamSubscription<ExampleStream> _subscription;

  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }
}

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
  ExampleBloc() {
    add(ExampleInitialEvent());
  }

  StreamSubscription<ExampleStream> _subscription;

  @override
  Future<void> close() {
    _subscription.cancel();
    return super.close();
  }
}

These changes should make your code compatible with version v2.0.0.

Post your comment if you still have issues or share your experience on what you have done.

I hope this short blog can help those you have faced problems while upgrading or have worries to start upgrading.

Happy upgrading!

Forem: Majid Hajian

Announcing Zapp! Build Flutter apps in browser

Zapp

Adding Pub.dev packages

IntelliSense

Live Preview, Unique URL

Command Palette

Zapp Public Board

Early Access

Watch our live stream

Conclusion

Firestore to BigQuery via Firebase Extensions

Introduction

What is Firestore?

Why BigQuery?

Google Data Studio

What are Firebase Extensions?

Putting it all together, via the extension

Firestore-BigQuery-Export

Basic configuration

Syncing to Big Query

raw_changelog

raw_latest

Custom Schemas

Backfilling Data

Running Multiple Instances

Visualizing the results

New Features

Wildcards

Partitioning

Clustering

Cross Project Support

Transform Function

Introducing Extension Events

What are events?

Firebase Extensions

Publishing an event

Extension configuration

Setting up a channel

Pushing an event

Subscribing to an event

What next?

Announcing stable FlutterFire Auth for Desktop

Overview

Get started on Linux and Windows

Firebase configurations

OAuth authentication

Let's see an example

What's next for Desktop

Please Welcome Flutter 3.0!

Introducing Flutter 3.0

macOS & Linux are finally stable!

Improvement on Flutter Web

Flutter DevTools

Android and iOS updates

Put Flutter to Work

*Flutter Casual Games Toolkit*

Introducing Dart 2.17

What’s next?

Appreciate your achievements!

More isn't always better

Take Responsibility

Stop comparing

Find your values

Conclusion

The Art of Failing Job Interviews and Winning a Job! [Personal story]

Interviews

Why?

Let me give one example.

Another example

Learn from mistakes but give yourself room

Do not underestimate or overestimate yourself.

Last words

Devfest Norway 2020, A free conference with diversity in mind

History

CFP

Diversity

Special Help

Topics

Schedule

Flutter Casual Games Toolkit

3- Initialize `SentryClient`