Building traditional native apps often requires maintaining two or more codebases. Let’s look at two frameworks that let you keep your code unified.

I recently worked on an app prototype with a friend in another industry. By day, I’m a full-stack developer targeting desktop and mobile web, but considering the use cases for this app, we determined it needs to be fully-functional offline. There are a couple of traditional ways for web developers to deliver offline experiences:

1. Progressive Web Apps. With the addition of a manifest file and service worker, a responsive web app can be quickly converted to something that will load without an internet connection. Whether it will actually work is another story and really depends on how the web app was built. Typically, there’s a lot more to be done surrounding data caching, syncing, conflict resolution, and offline request handling than there is in simply making your app a PWA, and at the end of the day you still won’t have an app in either app store. For it to show up on someone’s home screen, the user will have to visit the website and click the Install button at the bottom of the screen, which is an unfamiliar operation and goes against most users’ muscle memory of swiping away or clicking X on anything that covers site content. I have high hopes for the future of PWAs, but right now I don’t see them as an effective way of reaching users.
2. Cordova. Apache Cordova turns websites into mobile apps by putting them in a WebView (basically an iframe for native apps) and packaging that WebView as an iOS or Android app. While this is by far the cheapest way to bring a website to both app stores, and in theory can accomplish nearly everything a native app can, in my experience this is anything but frictionless. Both the process and the end result are full of unpleasant surprises. Even a website that works perfectly in a mobile browser may need substantial work to look and feel right as a Cordova app. Additionally, the support for native smartphone APIs is patchy and sometimes unreliable; even simple things like media controls can be frustrating to implement. So although Cordova fills an important role as the most cost-efficient way to deliver a “website in an app,” I decided it wasn’t a great choice for a new project. (I would be remiss here not to mention Ionic, which really helps achieve a native look and feel but typically requires a partial or full rewrite and still doesn’t fix a lot of the problems I’ve mentioned.)

Having ruled out those options, the remaining ones I was aware of were:

• Traditional native apps
• Xamarin
• React Native
• Flutter

Building traditional native apps would require me to maintain two or more codebases, and I’d be learning Swift from scratch, so that sounded like more trouble than I signed up for. Xamarin might have been a good choice since I use .NET at my day job, but my impression is that it doesn’t have the robust community or market share that the others have. I also have some relevant experience to consider: I’ve built a couple of side projects with React and have been working on a game in Flutter. In the end, React Native and Flutter seemed like the best choices for my skillset.

Over the course of a couple weekends, I built two proof of concept apps, one each with the latest versions of React Native and Flutter. I didn’t go into this planning to write about my experiences — I just wanted to prototype a simple app — but the comparison has turned out to be very interesting; these are two radically different frameworks, each frustrating and delightful in its own ways, and I think it’s valuable to compare and contrast them from a web developer’s perspective.

I don’t expect to come across totally unbiased. My experience with Flutter has been much better than with React Native. However, I’ll try my best to treat them fairly and acknowledge the advantages and disadvantages of each.

How they work: Components and rendering

React Native (created by Meta/Facebook) provides a set of React components that represent layout and UI abstractions such as a View (used for containing and arranging elements, like a `div` with `display: flex` on it) or a TextInput (like an HTML `input` or `textarea`). Then it uses a C++ engine, compiled separately for each platform, to translate those into native components for rendering on screen. Your code is run with a JavaScript engine (currently JavaScriptCore, the engine used by Safari, but a custom engine called Hermes is probably going to take over soon) and communicates with native code via serialized messages over a bridge.

Flutter (created by Google) is a view framework, rendering engine, code execution engine, and component library all in one. It uses Dart, a high-level programming language created and maintained by Google, and is clearly inspired by React: each widget (component) has a build (render) method that typically returns a tree of one or more other widgets. Flutter does not render native components on the target device, instead opting to take over the entire screen and render its own UI (not unlike a video game). Your Dart code is compiled ahead of time for the various instruction sets used by desktop and mobile devices. On the web, it’s transpiled to JavaScript.

The learning process: Language and tools

You might think the time needed to learn a new programming language for Flutter would be an order of magnitude greater than the time it takes to set up and learn the tools of React Native. However, I didn’t find this to be true at all. Dart is a very simple and developer-friendly language with strong similarities to TypeScript, C#, and Kotlin. Its documentation is superb. What’s more, I enjoyed learning it — it’s extremely readable and has a lot of cool features like cascade notation and null safety by default, and the compiler is good at telling you what’s wrong. So yes, it’ll take a day or so to learn the language, but if you already know a strongly-typed imperative programming language, you’ll have an easy time of it.

With React Native, you won’t spend any time learning a new programming language as long as you know JavaScript or TypeScript. You will, however, have to learn some standard tools and libraries to get up to speed — and it feels like the tooling and ecosystem for React Native are far more complex than for Flutter, with no real advantage in quality (more on this in the next section). For me, the ramp-up time for both frameworks was about the same, comparing when I first learned Flutter (via Flame, a game development library) to when I learned React Native. I’d estimate minimum time to productivity at ten to fifteen hours either way.

I acknowledge that my case isn’t necessarily typical. There are more developers on the market who are conversant in React than in any form of Dart, so there are a lot of business scenarios where React Native may make more sense. But for your own projects, don’t let the Dart barrier hold you back.

Features: There ain’t no party like a first party

React Native follows the standard approach to web development characterized by your local `node_modules` folder. It includes the basic tools you need to have an app, but if you want a UI language (like Material Design or Cupertino), icons, state management, localization, HTTP requests, advanced developer tools, and so forth, you’ll be relying on community-supported code or writing your own. This isn’t necessarily a bad thing. The React Native community is large and very active. But it does mean that a typical React Native app is going to be a patchwork quilt of packages representing different design philosophies, non-standardized APIs, and hit-or-miss documentation.

By comparison, Google has invested heavily in Flutter over the last several years and supports an impressive feature set out of the box: Material Design and Cupertino components, hundreds of icons, a basic state management setup, several runtime developer tools, and 25 core first-party packages including localization, HTTP requests, and more — all with tree-shaking so you don’t bloat your app with anything you’re not using. The components I’ve used all have a consistent design and fit the framework like a glove. You could ship a powerful and well-designed Flutter app without any third-party packages at all, which just isn’t feasible with React Native. The difference in size between my `package.json` file in React Native and my `pubspec.yaml` file in Flutter is staggering. Flutter just does more.

Or, I should say, it does more off the shelf. Dart’s package repository, pub.dev, will probably never approach the size of NPM. It’s hard to estimate how many NPM packages are compatible with React Native considering that it doesn’t have access to browser or Node APIs, but I’d guess there are still more than enough to win the quantity battle.

If you’re confident in your ability to write uncommon algorithms or visuals on your own, you’ll probably be fine with either framework. Otherwise, you’ll want to snoop around in each package repository before you start and see if they have what you need.

The UI: Platforms, consistency, and customization

I had some trouble getting my UI to look the same across platforms with both Flutter and React Native. Flutter ships with its own graphics engine, so you’d think everything would be identical wherever you go. But I did notice a couple of differences in spacing and alignment between the web, MacOS, and iOS outputs that I wasn’t able to fix. Though they were very minor, single-pixel differences — I doubt an end user would even notice — they did make me twitch a little.

Since React Native renders native components on each platform, there’s almost no way for it to have fewer consistency issues than Flutter. And sure enough, I spent most of one Sunday cursing at my computer over an app bar that worked fine on web but disappeared and crashed the debugger on iOS, with no helpful error messages in sight. The problem ended up being an intersection of issues between my iPhone 12 simulator, a third-party design library I was using, and some custom styles. I have yet to encounter anything quite that elusive with Flutter.

Speaking of styles, React Native uses CSS. It’s slightly more complicated than that, but if you’re comfortable with CSS (and, importantly, flexbox) you’ll be right at home making things look however you want in React Native. Flutter’s styling mechanism, though different, isn’t entirely foreign — most CSS-like properties are represented by widget fields of the same name, and the Column and Row widgets are straightforward stand-ins for flex layouts. Still, you’ll probably have to look up each thing you’re trying to do or peek at widget code rather than plugging in some CSS properties and going on your merry way. The compositional paradigm of Flutter also takes some getting used to; a lot of the things you might usually apply with a CSS property have their own widget in Flutter.

Both frameworks are very customizable. If you’ve got pixel-perfect designs to work from, you’ll quickly get into the groove of building components to match.

Performance: Responsive UX and animations

Flutter’s big selling point from the very beginning has been speed. The framework’s marketing demos are full of sweeping full-screen animations that never miss a frame. And, from my experience building a simple game with it, I can vouch for its ability to handle whatever you throw at it. It’s smooth. In fact, the reason I turned to Flutter in the first place was because I was tired of watching sprites glitch and stagger across the screen on an HTML5 canvas.

That isn’t to say Flutter will ever be faster than a native app. Even if the performance is visually similar to native, you’ve still got a full non-native rendering engine running on top of the hardware. At the very least you’re going to be using more memory.

React Native doesn’t put up much of a fight in the performance category. It’s interpreting JavaScript in the background, then playing middleman between a JavaScript engine and native code. We already know JavaScript is relatively slow. This adds a whole new translation layer to it.

That said, both are more than fast enough. I wouldn’t recommend trying to build an immersive first-person shooter in either (although Flutter would doubtless manage it better) but that’s not what you’re here for, is it? When we’re talking about text forms and business logic, there’s no point quibbling over ten or twenty milliseconds of response time. The decisions you make as a programmer will make far more impact on the user experience than the framework running under the hood.

The one caveat to this is animation. The Flutter team has worked hard to make their framework synonymous with beautiful, touch-responsive animations. If you want to build an app that surrounds the user with ripples and flourishes, Flutter is where it’s at.

Pipelines: Building and releasing your app

Perhaps the single biggest thing keeping React Native developers from jumping ship is Expo. Expo is a private company that provides developer tooling and services for React Native apps, including a managed cross-platform runtime, native API modules, and an automatic deployment tool for both app stores. Expo also provides an app called Expo Go that lets you test your apps on a smartphone without sideloading or using a wired connection; just point your camera at a generated QR code and you’re all set. It’s an impressive offering.

Flutter doesn’t have an equivalent service. There’s fastlane, which fills some of the gaps in the release automation department, and of course Flutter has a cross-platform runtime built in. But if you want to test your Flutter apps on a physical smartphone you’ll have to plug it into your laptop and move some .apk or .ipa files around (or have your IDE move them for you). Both Android and iPhone have good first-party simulators available, so you won’t necessarily be doing this on a daily basis. But it is less convenient than using Expo Go.

Developer experience: Being in the trenches

This section will be more subjective than the others. I’m sure a lot of developers love the React Native experience, and plenty have their frustrations with Flutter. But for me, Flutter was so much easier to use and work with than React Native it was ridiculous. There are a few objective points in Flutter’s favor here — hot reloading, tighter VS Code integration, and more extensive built-in debugging tools — but I can’t say any of those were a deciding factor.

My proof-of-concept app consists of an app bar, a list of clickable tiles, a form with some numeric inputs, a few equations, and an output table. I had never built any of these things in either framework before.

It took me twice as long to build in React Native as in Flutter.

Most of that time is accounted for by head-scratching over basic things: project setup, icons, the disappearing app bar I mentioned earlier, cryptic CLI warnings, getting a controlled input to work. And since I built the React Native app first, there were a couple things I could copy and paste to save time on the Flutter app. But when I look back on the experience, the time difference isn’t even what stands out. It’s that I was almost constantly frustrated with React Native and almost constantly delighted with Flutter. Flutter always had what I needed and it worked perfectly. React Native pointed me to an NPM package and a Stack Overflow answer and said “good luck.”

Again, this is my own experience. I’m sure with time I’d get used to the quirks of React Native and discover things I dislike about Flutter. But there’s no question in my mind of what I want to use in the future: Flutter, every time.

Your mileage will vary. For an alternate perspective, Jamon Holmgren’s article favoring React Native is definitely worth a read. And Fireship’s comparison video provides a balanced perspective covering many of the same points I’ve talked about here.

Summary: The best framework is the one you use

If you’re looking for a smooth and integrated developer experience, all business implications aside, I can’t recommend Flutter highly enough. But there’s a lot of exciting news in the React Native camp these days and it makes a strong case for itself in terms of easier hiring and massive open-source community support. There’s more than enough buzz to go around; this year’s Stack Overflow Developer Survey has Flutter and React Native neck-and-neck, with RN slightly ahead in the “Professional Developers” category and Flutter slightly ahead in the “All Respondents” category. (Both are pretty far ahead of Ionic, Cordova, and Xamarin.)

Objectively speaking, there’s no clear winner here. You’ll pick a framework based on the needs and constraints of your app, just as you’d do with any technological decision. React Native clearly isn’t going anywhere, and a year from now the developer experience may be much improved thanks to the steady pace of community contributions. But for my money, Flutter is here to stay and will grow substantially in the short term as developers discover how powerful and easy to use it is.

In this chapter, you’ll learn how to serialize JSON data into model classes. A model class represents data for a particular object. An example is a recipe model class, which usually has a title, an ingredient list and steps to cook it.

You’ll continue with the previous project, which is the starter project for this chapter, and you’ll add a class that models a recipe and its properties. Then you’ll integrate that class into the existing project.

By the end of the chapter, you’ll know:

• How to serialize JSON into model classes.
• How to use Dart tools to automate the generation of model classes from JSON.

What is JSON?

JSON, which stands for JavaScript Object Notation, is an open-standard format used on the web and in mobile clients. It’s the most widely used format for Representational State Transfer (REST)-based APIs that servers provide (https:// en.wikipedia.org/wiki/Representational_state_transfer). If you talk to a server that has a REST API, it will most likely return data in a JSON format. An example of a JSON response looks something like this:

That is an example recipe response that contains two fields inside a recipe object.

While it’s possible to treat the JSON as just a long string and try to parse out the data, it’s much easier to use a package that already knows how to do that. Flutter has a built-in package for decoding JSON, but in this chapter, you’ll use the json_serializable and json_annotation packages to help make the process easier.

Flutter’s built-in dart:convert package contains methods like json.decode and json.encode, which converts a JSON string to a Map<String, dynamic> and back. While this is a step ahead of manually parsing JSON, you’d still have to write extra code that takes that map and puts the values into a new class.

The json_serializable package comes in handy because it can generate model classes for you according to the annotations you provide via json_annotation. Before taking a look at automated serialization, you’ll see in the next section what manual serialization entails.

Writing the code yourself

So how do you go about writing code to serialize JSON yourself? Typical model classes have toJson() and fromJson() methods, so you’ll start with those.

To convert the JSON above to a model class, you’d first create a Recipe model class:

class Recipe {
  final String uri;
  final String label;

  Recipe({this.uri, this.label});
}

You don’t need to type this into your project, since in the next section you’ll instead switch to automated serialization.

Then you’d add toJson() and fromJson() factory methods:

factory Recipe.fromJson(Map<String, dynamic> json) {
 return Recipe(json['uri'] as String, json['label'] as String);
}

Map<String, dynamic> toJson() {
 return <String, dynamic>{ 'uri': uri, 'label': label}
}

In fromJson(), you grab data from the JSON map variable named json and convert it to arguments you pass to the Recipe constructor. In toJson(), you construct a map using the JSON field names.

While it doesn’t take much effort to do that by hand for two fields, what if you had multiple model classes, each with, say, five fields, or more? What if you renamed one of the fields? Would you remember to rename all of the occurrences of that field?

The more model classes you have, the more complicated it becomes to maintain the code behind them. Fear not, that’s where automated code generation comes to the rescue.

Automating JSON serialization

You’ll use two packages in this chapter: json_annotation and json_serializable from Google.

You use the first to add annotations to model classes so that json_serializable can generate helper classes to convert JSON from a string to a model and back.

To do that, you mark a class with the @JsonSerializable() annotation so the builder package can generate code for you. Each field in the class should either have the same name as the field in the JSON string or use the @JsonKey() annotation to give it a different name.

Most builder packages work by importing what’s called a .part file. That will be a file that is generated for you. All you need to do is create a few factory methods which will call the generated code.

Key points

• JSON is an open-standard format used on the web and in mobile clients, especially with REST APIs.
• In mobile apps, JSON code is usually parsed into the model objects that your app will work with.
• You can write JSON parsing code yourself, but it’s usually easier to let a JSON package generate the parsing code for you.
• json_annotation and json_serializable are packages that will let you generate the parsing code.

Where to go from here?

In this chapter, you’ve learned how to create models that you can parse from JSON and then use when you fetch JSON data from the network. If you want to learn more about json_serializable, go to https://pub.dev/packages/json_serializable.

Introduction

What Socket.IO is​

Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.

It is built on top of the WebSocket protocol and provides additional guarantees like fallback to HTTP long-polling or automatic reconnection.

INFO

WebSocket is a communication protocol which provides a full-duplex and low-latency channel between the server and the browser. More information can be found here.

What Socket.IO is not

CAUTION

Socket.IO is NOT a WebSocket implementation.

Although Socket.IO indeed uses WebSocket for transport when possible, it adds additional metadata to each packet. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a plain WebSocket server either.

Features​

Here are the features provided by Socket.IO over plain WebSockets:

HTTP long-polling fallback​

The connection will fall back to HTTP long-polling in case the WebSocket connection cannot be established.

This feature was the #1 reason people used Socket.IO when the project was created more than ten years ago (!), as the browser support for WebSockets was still in its infancy.

Even if most browsers now support WebSockets (more than 97%), it is still a great feature as we still receive reports from users that cannot establish a WebSocket connection because they are behind some misconfigured proxy.

Automatic reconnection​

Under some particular conditions, the WebSocket connection between the server and the client can be interrupted with both sides being unaware of the broken state of the link.

That’s why Socket.IO includes a heartbeat mechanism, which periodically checks the status of the connection.

And when the client eventually gets disconnected, it automatically reconnects with an exponential back-off delay, in order not to overwhelm the server.

Without further ado, I'll start right away with a Flutter app using SocketIO

Use this package as a library

Depend on it

Run this command:

With Dart:

$ dart pub add socket_io_client

With Flutter:

$ flutter pub add socket_io_client

This will add a line like this to your package’s pubspec.yaml (and run an implicit dart pub get):

dependencies:
  socket_io_client: ^2.0.0

Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.

Create socket_io_manager.dart:

Usage with stream and streambuilder in Flutter

In the above article, I gave you a basic guide to SocketIO on Flutter.

Hope to help you in real projects.

Thank you!

In the process of developing mobile applications using Flutter, you will have to develop a lot of screens. Properties like Appbar, background, color, loading, … always have to be in 1 screen, so you just need to code in this base class, and use them in other classes.

In this article I will write a base screen class for the purpose of reducing the amount of code for you as well as the maintenance for later, it’s easy to modify because you just need to fix it here and other screens will also be applied.

I will put the code below, then I will explain it to you

BasePageScreenState contains functions that will let you access the base, you can customize them as needed.

Mixin BaseScreen for you to generate the UI base. I write the body function to contain your interface code for different screens.

Using

You can create a lot of screen files, then using this base class, I find this is a very important thing in large projects, containing many screens, you can manage it in the best way.

Hope this article will bring many benefits to you.

Thank you!

Problems and Solutions

As your Flutter project has grown, the widgets you build have become very complex and overlapping, sending and listening for events will become more difficult and complex.

Today, I will introduce you to a library that can solve this problem in an extremely easy way : use Event Bus.

Event Bus Pattern

An Event Bus follows the publish/subscribe pattern. It allows listeners to subscribe for events and publishers to fire events. This enables objects to interact without requiring to explicitly define listeners and keeping track of them.

Event Bus and MVC

The Event Bus pattern is especially helpful for decoupling MVC (or MVP) applications.

One group of MVC is not a problem.

But as soon as there are multiple groups of MVCs, those groups will have to talk to each other. This creates a tight coupling between the controllers.

By communication through an Event Bus, the coupling is reduced.

Use this package as a library

Depend on it

Run this command:

With Dart:

$ dart pub add event_bus

With Flutter:

$ flutter pub add event_bus

This will add a line like this to your package’s pubspec.yaml (and run an implicit dart pub get):

dependencies:
  event_bus: ^2.0.0

Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.

How to use in Project?

1. Create an Event Bus

Create an instance of EventBus and make it available to other classes.

Usually there is just one Event Bus per application, but more than one may be set up to group a specific set of events.

import 'package:event_bus/event_bus.dart';

EventBus eventBus = EventBus();

Note: The default constructor will create an asynchronous event bus. To create a synchronous bus you must provide the optional sync: true attribute.

2. Define Events

Any Dart class can be used as an event.

class EventSendData {
  String? name;
  int? id;

  EventSendData({this.name, this.id});
}

3. Register Listeners

Register listeners for specific events:

eventBus.on<UserLoggedInEvent>().listen((event) {
  // All events are of type UserLoggedInEvent (or subtypes of it).
  print(event.user);
});

Register listeners for all events:

eventBus.on().listen((event) {
  // Print the runtime type. Such a set up could be used for logging.
  print(event.runtimeType);
});

About Dart Streams

EventBus uses Dart Streams as its underlying mechanism to keep track of listeners. You may use all functionality available by the Stream API. One example is the use of StreamSubscriptions to later unsubscribe from the events.

StreamSubscription loginSubscription = eventBus.on<UserLoggedInEvent>().listen((event) {
  print(event.user);
});

loginSubscription.cancel();

4. Fire Events

Finally, we need to fire an event.

eventBus.fire(EventSendData(id: 1, name: "Value you want to send"));

Using Custom Stream Controllers

Instead of using the default StreamController you can use the following constructor to provide your own.

An example would be to use an RxDart Subject as the controller.

import 'package:rxdart/rxdart.dart';

EventBus behaviorBus = EventBus.customController(BehaviorSubject());

Example

Thank you for reading, I would be happy to receive your support.

Problems and Solutions

Maybe you are too familiar with the libraries that store data in Flutter applications such as: Hive, Share Preference, … These applications are very good to use, but you have used them when your application in the background yet?

I have tried many ways but still can’t save the data when the app is running in the background.

And today I will introduce to you a library that can solve that problem.

Let’s get started!

A Flutter plugin to store data in secure storage:

• Keychain is used for iOS
• AES encryption is used for Android. AES secret key is encrypted with RSA and RSA key is stored in KeyStore
• With V5.0.0 we can use EncryptedSharedPreferences on Android by enabling it in the Android Options like so:

AndroidOptions _getAndroidOptions() => const AndroidOptions(
        encryptedSharedPreferences: true,
      );

For more information see the example app.

• libsecret is used for Linux.

Note KeyStore was introduced in Android 4.3 (API level 18). The plugin wouldn't work for earlier versions.

Use this package as a library

Depend on it

Run this command:

With Flutter:

$ flutter pub add flutter_secure_storage

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_secure_storage: ^5.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now, we need an admin class for you to save and retrieve data

Save data

SecureStorageManager.instance.saveData(key: "yourKey", value: "yourValue");

Get data

String? value = await SecureStorageManager.instance.getData(key: "yourKey");

Thank you for reading, I would be happy to receive your support.

Introduce

The MVVM architecture in Flutter is one of the most used patterns in the process of building Flutter applications. To understand more about how to use this pattern, please follow this article.

MVVM Architecture: Short for Model — View — ViewModel. Is a model that supports two-way data binding (Two-way data binding) between View and ViewModel. Allows separation of data (Model), execution code (Logic or ViewModel) and user interface (View).

Model

Model is a component associated with the database, in the Model there are always functions to retrieve data from the database.

View

View or UI or Presentation Layer is the part of the application interface and receives user interaction. Another difference of View in MVVM is: the ability to perform behaviors and respond to users through binding, command.

ViewModel

• It is an intermediate layer between View and Model.
• Considered as a component that replaces the Controller class in the MVC model.
• The ViewModel does not know anything about its upper layer, nor does it know anything about the View.
• A ViewModel can be used for many Views through binding data, which can be one- or two-way depending on the needs of the application.
• The difference is that: In the ViewModel contains the code that implements Data Binding, Command.

MVVM Flutter Architecture Implementation

In this example, I will take data from any API, then display the data to the view.

Create a new project and declare the latest library of :

cupertino_icons: ^1.0.2
provider: ^6.0.3
dio: ^4.0.6
cached_network_image: ^3.2.0

About the data, we will get it at https://api.randomuser.me/?results=50 This API provides the necessary information for us (for free). You need to convert this data to Dart object by going to the website https://javiercbk.github.io/json_to_dart/

You copy this class into the model of your project

data_sources

Create file app_url:

Create file api_client.dart:

view_models

Create file user_view_models.dart

views

Create file user_list_screen.dart và user_items.dart

Conclusion

MVVM architecture in Flutter is one of the commonly used architectures not only in Flutter but also in other mobile programming platforms, especially native.

Hope this article will make you better understand how MVVM model works in Flutter in particular, and programming in general.

Thank you very much.

What is SignalR?

A Flutter SignalR Client for ASP.NET Core.
ASP.NET Core SignalR is an open-source library that simplifies adding real-time web functionality to apps. Real-time web functionality enables server-side code to push content to clients instantly.

Tested with ASP.NET Core 3.1 & ASP .NET Core 6

The client is able to invoke server side hub functions (including streaming functions) and to receive method invocations issued by the server. It also supports the auto-reconnect feature.

The client supports the following transport protocols:

• WebSocket
• Service Side Events
• Long Polling

The client supports the following hub protocols:

• Json
• MessagePack

ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data.

SignalR can be used to add any sort of “real-time” web functionality to your ASP.NET application. While chat is often used as an example, you can do a whole lot more. Any time a user refreshes a web page to see new data, or the page implements long polling to retrieve new data, it is a candidate for using SignalR. Examples include dashboards and monitoring applications, collaborative applications (such as simultaneous editing of documents), job progress updates, and real-time forms.

SignalR also enables completely new types of web applications that require high frequency updates from the server, for example, real-time gaming.

SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that call JavaScript functions in client browsers (and other client platforms) from server-side .NET code. SignalR also includes API for connection management (for instance, connect and disconnect events), and grouping connections.

SignalR handles connection management automatically, and lets you broadcast messages to all connected clients simultaneously, like a chat room. You can also send messages to specific clients. The connection between the client and server is persistent, unlike a classic HTTP connection, which is re-established for each communication.

SignalR supports “server push” functionality, in which server code can call out to client code in the browser using Remote Procedure Calls (RPC), rather than the request-response model common on the web today.

SignalR applications can scale out to thousands of clients using built-in, and third-party scale-out providers.

SignalR and WebSocket

SignalR uses the new WebSocket transport where available and falls back to older transports where necessary. While you could certainly write your app using WebSocket directly, using SignalR means that a lot of the extra functionality you would need to implement is already done for you. Most importantly, this means that you can code your app to take advantage of WebSocket without having to worry about creating a separate code path for older clients. SignalR also shields you from having to worry about updates to WebSocket, since SignalR is updated to support changes in the underlying transport, providing your application a consistent interface across versions of WebSocket.

I won't be verbose anymore. I will show you how to configure SignalR into your Flutter project

Use this package as a library

Depend on it

Run this command:

With Flutter:

$ flutter pub add signalr_netcore

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  signalr_netcore: ^1.3.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

Thank you for reading, I would be happy to receive your support.

Define

SharedPreferences is an Android and iOS application used for simple data storage in allocated space.

This data persists even when the application is shut down and restarted; we can still get the original value back.

Data stored in SharedPreferences can be edited and deleted. SharedPreferences stores data in a key-value pair.

Install SharedPreferences

shared_preferences | Flutter package

The usage is detailed in pubdev, I won’t repeat it too much. I will share the code base that I have developed to help programmers save time.

Below is a base class, we can use it anywhere in your project

How to save?

SharedPreferencesClass.save("Token", "yourToken");

How to get?

String token = await SharedPreferencesClass.get("Token");

Very simple right?

Thank you for reading, I would be happy to receive your support.

Opening

Are you familiar with the usual Push Notification form of IOS, IOS can only display the App Icon, Title, Sub Title, Body?

Today I will introduce to everyone a new feature on iOS 15 and above: Communication Notification: you can change the Notification app Icon as you want (currently the icon will be the URL of the image taken from the Sever).

Currently I have used a lot of applications, 95% of the applications that I have installed do not have this feature, even Facebook, Instagram, Messenger, Google I have not seen this feature yet. On Apple’s homepage, there is an introduction to Communication Notification, but really, for longtime iOS developers, it is also difficult to understand, Apple does not provide detailed instructions on this feature for developers. Therefore, I will share in detail how I developed this feature.

Things to prepare

• Basic knowledge of Mobile (Android/IOS)
• MacOS (Xcode)
• Firebase Cloud Message (I will use Firebase to make push notification server to IOS devices)

Note

There are a few features that I will not guide in detail, because those features have been used by too many articles and developers, you just need to search and there will be a lot of results.

Let's get started now

• Create your Project IOS: you can use Native or Hybrid (Flutter/React Native, …)
• Config Firebase Cloud Message for iOS devices (you can see instructions in many articles)
• Create NotificationService:

Xcode -> File -> Target

Set name this Service is NotificationService

• In your Notification Service Extension’s Info.plist, add this: NSExtension → NSExtensionAttributes (dictionary) → IntentsSupported (array) → INSendMessageIntent (string)
• Enable the Communication Notifications capability on your main app target

Now, I will conduct Push Notification from server to IOS device (using Firebase Cloud Message — https://fcm.googleapis.com/fcm/send). Below is the json string i use for push notification.

Notification Content

Now run the code and push notification, you will be able to customize the image you want.

Details of the files you need I will put in the git link below:

GitHub - ferguquang/communicationnotification

Good luck. This is my first time posting my article on Medium, for the purpose of sharing the knowledge I have done, if there is something wrong, please comment below so I can correct and improve myself. Thank you!