DEV Community: May Lau

Note to Keep Alive

May Lau — Thu, 22 Sep 2022 12:16:12 +0000

Recently testing on the example of keeping image in ListView. Simply using AutomaticKeepAliveClientMixin can solve the case.

This is an image keeping example class.

class ImageKeepAliveWidget extends StatefulWidget {
  const ImageKeepAliveWidget({Key? key}) : super(key: key);

  @override
  State<ImageKeepAliveWidget> createState() => _ImageKeepAliveWidgetState();
}

/// use [AutomaticKeepAliveClientMixin] keeping the state
class _ImageKeepAliveWidgetState extends State<ImageKeepAliveWidget>
    with AutomaticKeepAliveClientMixin<ImageKeepAliveWidget> {
  String? _imageUrl;

  @override
  void initState() {
    super.initState();
    _fetchUrl();
  }

  void _fetchUrl() async {
    try {
      http.Response res =
          await http.get(Uri.parse('https://dog.ceo/api/breeds/image/random'));
      _imageUrl = json.decode(res.body)['message'];
      setState(() {});
    } catch (e) {
      debugPrint('error in getting image url');
    }
  }

  @override
  Widget build(BuildContext context) {
    /// must add super.build(context) to preserve state
    super.build(context);
    if (_imageUrl?.isNotEmpty == true) {
      return Image.network(_imageUrl!);
    } else {
      return const CircularProgressIndicator();
    }
  }

  @override
  bool get wantKeepAlive => true;
}

But how the mechanism is doing? Let’s take a look to the ListView first.

If you trace the ListView addAutomaticKeepAlives , you will find ListView children delegate is using SliverChildListDelegate. Inside its build function, you can see if the addAutomaticKeepAlives is true, the child widget will be wrapped by a AutomaticKeepAlive widget.

@override
  Widget? build(BuildContext context, int index) {
    /// ...
    if (addAutomaticKeepAlives)
      child = AutomaticKeepAlive(child: child);
    return KeyedSubtree(key: key, child: child);
  }

What will AutomaticKeepAlive do?

Checking the _AutomaticKeepAliveState, we can see the _updateChild is called when this stateful widget is updated. It wraps a NotificationListener for listening the KeepAliveNotification. And later it will wrap a KeepAlive widget for the listener widget.

@override
void initState() {
  super.initState();
  _updateChild();
}

@override
void didUpdateWidget(AutomaticKeepAlive oldWidget) {
  super.didUpdateWidget(oldWidget);
  _updateChild();
}

void _updateChild() {
  _child = NotificationListener<KeepAliveNotification>(
    onNotification: _addClient,
    child: widget.child!,
  );
}

@override
Widget build(BuildContext context) {
  assert(_child != null);
  return KeepAlive(
    keepAlive: _keepingAlive,
    child: _child!,
  );
}

Let’s check what the notification callback has done in the listener widget.

In short, the callback function has 2 main goals. One is using a map to store the KeepAliveNotification handler. Another is to apply parent data to child which is the later KeepAlive widget.

bool _addClient(KeepAliveNotification notification) {
  final Listenable handle = notification.handle;
  _handles ??= <Listenable, VoidCallback>{};
  assert(!_handles!.containsKey(handle));
  _handles![handle] = _createCallback(handle);
  handle.addListener(_handles![handle]!);
  if (!_keepingAlive) {
    _keepingAlive = true;
    final ParentDataElement<KeepAliveParentDataMixin>? childElement = _getChildElement();
    if (childElement != null) {
      // If the child already exists, update it synchronously.
      _updateParentDataOfChild(childElement);
    } else {
      // If the child doesn't exist yet, we got called during the very first
      // build of this subtree. Wait until the end of the frame to update
      // the child when the child is guaranteed to be present.
      SchedulerBinding.instance.addPostFrameCallback((Duration timeStamp) {
        if (!mounted) {
          return;
        }
        final ParentDataElement<KeepAliveParentDataMixin>? childElement = _getChildElement();
        assert(childElement != null);
        _updateParentDataOfChild(childElement!);
      });
    }
  }
  return false;
}

ParentDataElement<KeepAliveParentDataMixin>? _getChildElement() {
    ///...
}

In the KeepAlive widget, we can see the applyParentData function about how the parent data will set the renderObject keepAlive status by the notification from the AutomaticKeepAliveClientMixin. If it is not keepAlive, the renderObject will redo the layout.

@override
void applyParentData(RenderObject renderObject) {
  assert(renderObject.parentData is KeepAliveParentDataMixin);
  final KeepAliveParentDataMixin parentData = renderObject.parentData! as KeepAliveParentDataMixin;
  if (parentData.keepAlive != keepAlive) {
    parentData.keepAlive = keepAlive;
    final AbstractNode? targetParent = renderObject.parent;
    if (targetParent is RenderObject && !keepAlive)
      targetParent.markNeedsLayout(); // No need to redo layout if it became true.
  }
}

In summary, the whole process will be like this:

Personal Thoughts on Flutter Chart Packages

May Lau — Tue, 23 Aug 2022 01:57:33 +0000

Last year, I had reviewed some chart packages which allow to draw multiple chart types. Last month, I picked up the note I marked down about the chart packages for my latest personal project. It seems things have changed a lots this year.

Drawing chart on Flutter app basically has two approaches — native painting and embedding third party js chart library webview. Normally, we may have an impression that using webview to do the rendering may have relatively lower performance than that of native rendering. The reason why we may consider the js library because at the beginning there has very few options on chart packages with native drawing and only some basic line or bar chart are supported. However, many js chart libraries are already in a mature release. At this time, embedding webview with js chart library is the fastest way to obtain what we want. Since last year, more and more mature native chart packages published, we now have more options on charting package selection.

In spite of types, charting feature support like customise axis label, tooltips and gesture control is another important things need to consider. If the packages provide flexible customisation and charting tool or gesture support, it speeds up the chart implementation time and most important lower difficulties on later packages upgrade risk. Where the risk comes from? Sometimes, we need to override the classes for customisation. If the packages originally not expected developer to override classes, the change of classes may leads to conflict with the extended classes we have. This increases the difficulty.

Maintenance also need to be take into account. By experience, many people including I will have an impression that official plugin or library should have better compatibility with the official framework. I think Flutter Community breaks this 😆. Chart package and WebView package prove this. I somehow understand they want to put more effort on the main features and at the same time community really produced many valued packages. I will explain more on the later part about why I think the chart package from Google is not as good as the others for now, but even official one has not been updated for 9 months. Checking the issue and PR board before selecting a package is vital.

Information last updated: 04/08/22

Name	Type	Maintenance Status	License	Chart Types	Chart Feature Support	Reference
high_chart	WebView with highchart.js	3 months ago	MIT for package. HighChart.js has its own commercial license required.	Rich variety types, types depends on the products have more chart types	Very flexible customisation	HighChart.js
flutter_echarts	WebView with ECharts	9 months ago, looks have issue with Android 10+	BSD 2-Clause for package. ECharts is under Apache license.	Rich variety types, including 3D charting	Very flexible customisation	ECharts
syncfusion_flutter_charts	Native	few days ago, active	Syncfusion License. If you have ≥5 dev in organisation and gross revenue ≥ 1million USD, you cannot use their community license	30+ chart types support	Very flexible customisation	Syncfusion
mp_chart	Native, translated from MPAndroidChart, a popular Android open source chart library	11 months ago, flutter 3.0 fix PR pending, looks discontinued	Apache-2.0	7+ chart types support	Very flexible customisation
charts_flutter	Native, Google package	9 months ago, many PR accumulated	Apache-2.0	7+ chart types support	Flexible customisation, bad tooltip support or in other word, you need to paint it yourselves
fl_chart	Native	few hours ago, active	MIT	5+ chart types support	Flexible customisation, very good animation support

If the application requires complex type charting, I will suggest using syncfusion_flutter_charts. If this package types does not fulfil the requirement, then I will recommend using either highchart or echarts depends on the source volume and license cost. However, if there is not much user interaction, in other words, only display, fl_chart can also be take consideration.

mp_chart is really a great package. Some of my early projects are using this for charting. Due to the maintenance status, I am not going to use it unless I force to be as I don’t want to fork the version myself while there are many other options.

charts_flutter is also a good package on charting. Despite accumulated PRs, I hope they can enhance the tooltip implementation. AFAK, the tooltip can only able to paint with the chart’s provider returned value which takes time for me to calculate a dynamic coordinate tooltip when user is able to adjust visible range. I won’t consider this package if this issue or design is not settled.

If you have any comment or experience about charting on Flutter project, please kindly reply on thread and let everyone not to repeat the same mistake.

Support me if you like the content🍖

Connect🍻

Google Drive App Data Backup

May Lau — Tue, 16 Aug 2022 13:17:00 +0000

Backing up app data is a common action for mobile app. This article will show the steps about backing up Android and IOS files to Google Drive.

Google SignIn

The app data read and write scope require Google Account SignIn. The detail implementation may reference to Google SignIn without Firebase.

Enable Drive API

Goto Enabled APIs & Services on the side menu and click + ENABLE APIS AND SERVICES.

Search google drive api.

Click Enable Google Drive API.

Flutter Project Config

Run flutter pub add googleapis to add googleapis plugin to the project.

Create a class called GoogleDriveAppData. The sign in logic will also put inside this class. Since we are going to use the app data storage in Google Drive, we will add the scope to drive.DriveApi.driveAppdataScope.

import 'package:google_sign_in/google_sign_in.dart';
import 'package:googleapis/drive/v3.dart' as drive;

class GoogleDriveAppData {
  /// sign in with google
  Future<GoogleSignInAccount?> signInGoogle() async {
    GoogleSignInAccount? googleUser;
    try {
      GoogleSignIn googleSignIn = GoogleSignIn(
        scopes: [
          drive.DriveApi.driveAppdataScope,
        ],
      );

      googleUser =
          await googleSignIn.signInSilently() ?? await googleSignIn.signIn();
    } catch (e) {
      debugPrint(e.toString());
    }
    return googleUser;
  }

  ///sign out from google
  Future<void> signOut() async {
    GoogleSignIn googleSignIn = GoogleSignIn();
    await googleSignIn.signOut();
  }
}

To use the drive API with its client, we will create a GoogleAuthClient class for passing the auth info with the drive API request.

Run flutter pub add http to import the http package.

import 'package:http/http.dart' as http;

class GoogleAuthClient extends http.BaseClient {
  final Map<String, String> _headers;
  final _client = http.Client();

  GoogleAuthClient(this._headers);

  @override
  Future<http.StreamedResponse> send(http.BaseRequest request) {
    request.headers.addAll(_headers);
    return _client.send(request);
  }
}

Go back to the GoogleDriveAppData class.

Add a function to create the Drive client instance.

import 'package:google_drive_app_data/google_auth_client.dart';

class GoogleDriveAppData {
    ...
    ///get google drive client
  Future<drive.DriveApi?> getDriveApi(GoogleSignInAccount googleUser) async {
    drive.DriveApi? driveApi;
    try {
      Map<String, String> headers = await googleUser.authHeaders;
      GoogleAuthClient client = GoogleAuthClient(headers);
      driveApi = drive.DriveApi(client);
    } catch (e) {
      debugPrint(e.toString());
    }
    return driveApi;
  }
}

Google Drive has an app data folder especially for the app’s file storage. The file will save to the appDataFolder.

Run flutter pub add path to add path package for easily get file’s base name.

drive.File is storing the file’s information the drive having.

io.File is the io file which is the local file the device having.

If the file is previously uploaded to the drive, we can use the driveFileId to update the latest version file to the drive.

import 'dart:io' as io;

import 'package:path/path.dart' as path;

class GoogleDriveAppData {
    ...
    /// upload file to google drive
  Future<drive.File?> uploadDriveFile({
    required drive.DriveApi driveApi,
    required io.File file,
    String? driveFileId,
  }) async {
    try {
      drive.File fileMetadata = drive.File();
      fileMetadata.name = path.basename(file.absolute.path);

      late drive.File response;
      if (driveFileId != null) {
        /// [driveFileId] not null means we want to update existing file
        response = await driveApi.files.update(
          fileMetadata,
          driveFileId,
          uploadMedia: drive.Media(file.openRead(), file.lengthSync()),
        );
      } else {
        /// [driveFileId] is null means we want to create new file
        fileMetadata.parents = ['appDataFolder'];
        response = await driveApi.files.create(
          fileMetadata,
          uploadMedia: drive.Media(file.openRead(), file.lengthSync()),
        );
      }
      return response;
    } catch (e) {
      debugPrint(e.toString());
      return null;
    }
  }
}

To get the file information of drive like id, version and modified time, we can use the following function to get the file list and compare the filename with the uploaded files.

class GoogleDriveAppData {
    ...
    /// get drive file info
  Future<drive.File?> getDriveFile(
      drive.DriveApi driveApi, String filename) async {
    try {
      drive.FileList fileList = await driveApi.files.list(
          spaces: 'appDataFolder', $fields: 'files(id, name, modifiedTime)');
      List<drive.File>? files = fileList.files;
      drive.File? driveFile =
          files?.firstWhere((element) => element.name == filename);
      return driveFile;
    } catch (e) {
      debugPrint(e.toString());
      return null;
    }
  }
}

To download the drive file to local, we can use the following function. Basically download the data stream and write to a new file.

class GoogleDriveAppData {
    ...
    /// download file from google drive
  Future<io.File?> restoreDriveFile({
    required drive.DriveApi driveApi,
    required drive.File driveFile,
    required String targetLocalPath,
  }) async {
    try {
      drive.Media media = await driveApi.files.get(driveFile.id!,
          downloadOptions: drive.DownloadOptions.fullMedia) as drive.Media;

      List<int> dataStore = [];

      await media.stream.forEach((element) {
        dataStore.addAll(element);
      });

      io.File file = io.File(targetLocalPath);
      file.writeAsBytesSync(dataStore);

      return file;
    } catch (e) {
      debugPrint(e.toString());
      return null;
    }
  }
}

The complete GoogleDriveAppData class will be like this:

import 'dart:io' as io;

import 'package:flutter/foundation.dart';
import 'package:google_drive_app_data/google_auth_client.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:googleapis/drive/v3.dart' as drive;
import 'package:path/path.dart' as path;

class GoogleDriveAppData {
  /// sign in with google
  Future<GoogleSignInAccount?> signInGoogle() async {
    GoogleSignInAccount? googleUser;
    try {
      GoogleSignIn googleSignIn = GoogleSignIn(
        scopes: [
          drive.DriveApi.driveAppdataScope,
        ],
      );

      googleUser =
          await googleSignIn.signInSilently() ?? await googleSignIn.signIn();
    } catch (e) {
      debugPrint(e.toString());
    }
    return googleUser;
  }

  ///sign out from google
  Future<void> signOut() async {
    GoogleSignIn googleSignIn = GoogleSignIn();
    await googleSignIn.signOut();
  }

  ///get google drive client
  Future<drive.DriveApi?> getDriveApi(GoogleSignInAccount googleUser) async {
    drive.DriveApi? driveApi;
    try {
      Map<String, String> headers = await googleUser.authHeaders;
      GoogleAuthClient client = GoogleAuthClient(headers);
      driveApi = drive.DriveApi(client);
    } catch (e) {
      debugPrint(e.toString());
    }
    return driveApi;
  }

  /// upload file to google drive
  Future<drive.File?> uploadDriveFile({
    required drive.DriveApi driveApi,
    required io.File file,
    String? driveFileId,
  }) async {
    try {
      drive.File fileMetadata = drive.File();
      fileMetadata.name = path.basename(file.absolute.path);

      late drive.File response;
      if (driveFileId != null) {
        /// [driveFileId] not null means we want to update existing file
        response = await driveApi.files.update(
          fileMetadata,
          driveFileId,
          uploadMedia: drive.Media(file.openRead(), file.lengthSync()),
        );
      } else {
        /// [driveFileId] is null means we want to create new file
        fileMetadata.parents = ['appDataFolder'];
        response = await driveApi.files.create(
          fileMetadata,
          uploadMedia: drive.Media(file.openRead(), file.lengthSync()),
        );
      }
      return response;
    } catch (e) {
      debugPrint(e.toString());
      return null;
    }
  }

  /// download file from google drive
  Future<io.File?> restoreDriveFile({
    required drive.DriveApi driveApi,
    required drive.File driveFile,
    required String targetLocalPath,
  }) async {
    try {
      drive.Media media = await driveApi.files.get(driveFile.id!,
          downloadOptions: drive.DownloadOptions.fullMedia) as drive.Media;

      List<int> dataStore = [];

      await media.stream.forEach((element) {
        dataStore.addAll(element);
      });

      io.File file = io.File(targetLocalPath);
      file.writeAsBytesSync(dataStore);

      return file;
    } catch (e) {
      debugPrint(e.toString());
      return null;
    }
  }

  /// get drive file info
  Future<drive.File?> getDriveFile(
      drive.DriveApi driveApi, String filename) async {
    try {
      drive.FileList fileList = await driveApi.files.list(
          spaces: 'appDataFolder', $fields: 'files(id, name, modifiedTime)');
      List<drive.File>? files = fileList.files;
      drive.File? driveFile =
          files?.firstWhere((element) => element.name == filename);
      return driveFile;
    } catch (e) {
      debugPrint(e.toString());
      return null;
    }
  }
}

Result

Let’s make a simple widget with sign in and call the upload function.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GoogleDriveAppData _googleDriveAppData = GoogleDriveAppData();
  GoogleSignInAccount? _googleUser;
  drive.DriveApi? _driveApi;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GoogleAuthButton(
              onPressed: () async {
                if (_googleUser == null) {
                  _googleUser = await _googleDriveAppData.signInGoogle();
                  if (_googleUser != null) {
                    _driveApi =
                        await _googleDriveAppData.getDriveApi(_googleUser!);
                  }
                } else {
                  await _googleDriveAppData.signOut();
                  _googleUser = null;
                  _driveApi = null;
                }
                setState(() {});
              },
            ),
            ElevatedButton(
              onPressed: _driveApi != null
                  ? () {
                      FilePicker.platform.pickFiles().then((value) {
                        if (value != null && value.files[0] != null) {
                          File selectedFile = File(value.files[0].path!);
                          _googleDriveAppData.uploadDriveFile(
                            driveApi: _driveApi!,
                            file: selectedFile,
                          );
                        }
                      });
                    }
                  : null,
              child: Text('Save sth to drive'),
            ),
          ],
        ),
      ),
    );
  }
}

After the upload success, if you goto the drive web portal and click setting.

Choose Manage Apps from the side bar, you will find the app appear in the app list.

Notice: if you signed in once in the previous article which means your account does not included the drive app data permission may causing 403 when upload file. You need to sign out once and sign in or other methods to let the account allow the app data permission.

Support me if you like the content🍖

Connect🍻

Google SignIn without Firebase

May Lau — Tue, 09 Aug 2022 05:31:25 +0000

Many tutorials for Google SignIn are using Firebase while Google SignIn does not require Firebase. Unless you want to use other Firebase service together, you can simply login with the Google Cloud Platform directly. In fact, the Firebase login is also using Google Cloud Platform. The difference is Firebase will help you automatically create the project in Google Cloud Platform and make the following config for you. This article is the steps how we do the config ourselves.

Create Google Cloud Platform Project

Goto Google Cloud Platform create a project. In this article, I have created a project called GoogleDriveAppData.

If you have previous project, please ensure you are opening it after created the project.

Goto side bar, select APIs & Services and click Credentials.

Then we need to first fill the credential consent. Let’s click Configure Consent Screen.

If you are doing the test for organisation Google Accounts, you can check Internal. In this article, we will choose External as we are using normal Google Accounts for test.

Fill the necessary information App name, user support email and developer contact email to the form. The reason why we are not filling all because this will start trigger the requirement of app verification. I suggest fill the others when the app is ready to publish.

Add the test users for testing in Testing stage. Later you can set the app to published when go live.

After the consent is filled, we will create a OAuth Client ID for both Android and IOS.

Similarly, fill the necessary information for Android and IOS. Fill the remaining information when the app is going to release.

IOS Project Config

After the OAuth client for IOS is created, this dialog is popped up. You first download the plist file and rename it as GoogleService-Info.plist. And then place it under the flutter project’s ios/Runner folder.

Open Xcode with the flutter’s IOS project. Right click Runner and select Add Files to "Runner". Select the GoogleService-Info.plist and click add to the target Runner.

Open info.plist and copy the following config to plist. You need to replace the REVERSED_CLIENT_ID from the GoogleService-Info.plist to the CFBundleURLSchemes array value.

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <!-- TODO Replace this value: -->
            <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
            <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
        </array>
    </dict>
</array>
<!-- End of the Google Sign-in Section -->

Flutter Project Config

Go back to the flutter project. Open the terminal and run flutter pub add google_sign_in to add the google_sign_in plugin to the project.

You can sign in with Google Account with following code. If the setting is correct, you will be able to popup an account selection dialog for Android and login page for IOS when app is first login.

GoogleSignInAccount? _googleUser;
Future<void> _signInGoogle() async {
  try {
    GoogleSignIn googleSignIn = GoogleSignIn(
      scopes: [
        ///TODO: put scopes app will use
      ],
    );
        /// if previously signed in, it will signin silently
        /// if not, the signin dialog/login page will pop up
    _googleUser =
        await googleSignIn.signInSilently() ?? await googleSignIn.signIn();
  } catch (e) {
    debugPrint(e.toString());
  }
}

///sign out from google
Future<void> signOut() async {
  GoogleSignIn googleSignIn = GoogleSignIn();
  await googleSignIn.signOut();
    _googleUser = null;
}

Support me if you like the content🍖

Connect🍻

Personal Thoughts on Popular GraphQL Clients

May Lau — Tue, 02 Aug 2022 10:05:00 +0000

I am working on a project with GraphQL and therefore I have reviewed some popular client packages. The top 3 packages I can search are artemis, ferry and graphql_flutter. My usual state management approach is bloc and provider. This makes me try to avoid using the provided flutter widget directly updates the children widgets. The following review is based on my POC bloc project playing with these three packages.

Basic information I have found (22/06/2022):

	artemis	ferry	graphql_flutter
publisher	borges.dev	gql-dart.dev	zino.company
Enough documentation to install	Yes	Yes	Yes
Enough example or documentation to implement basic request	Yes	Yes	Yes
Own community chat group	Yes	Yes	Yes
Scheme class code generation	built in	built in	No built in, but author has suggested a package to do this (graphql_codegen)
Current maintain status	Actively updating	Looking for maintainers	Actively updating

When I use these three packages with a simple GraphQL project for test, I find that they somehow similar to the Apollo client. It is not hard for me to use them for simple query or mutation. Although all of the packages have multiple dependance, the installation of graphql_flutter is the easiest one because there is no built in code generation.

Is code generation really necessary for the GraphQL in flutter? It depends on the scale of the project or the size of scheme you use. If it is just a small project with a few request, I do not see any advantage on the code generation as it does not take much time for me to write my own. If the scale of the scheme used is large, a small enum changed affects a large area. Code generation in this case is really helpful.

And a fun fact, the core gql package these three packages depending is from the gql-dart.dev and all of them are stream based which I can easily listen the snapshot or subscribe from the client. Using bloc or provider handling the state management, the flutter widget they provided does not interest me a lot. Most of the time I am listening to the result in the bloc or provider classes. What concerns me more are the maintain status and the flexibility of overriding generated classes. artemis and graphql_flutter + graphql_codegen are more suitable for me. Personally, I prefer more on the graphql_flutter + graphql_codegen. graphql_flutter is simple and straight forward on installation and requesting and graphql_codegen is flexible on the graphql fragment handling. The author of the graphql_codegen have an article talking about this. You may take a look at it to see if the use case suit you.

After all, it is the package suit your case, not making your case suit the package. You can even use a dio to make a graphql request. If you have your stories on using any approach with GraphQL, both good or bad one, please feel free to share with us on the comment. This will help us a lot to choose the approach and avoid the same mistakes.

Support me if you like the content🍖

Connect🍻

5 Steps to Secure Flutter App Instantly

May Lau — Tue, 26 Jul 2022 12:31:21 +0000

1. Know What You Are Using

Flutter community is good. Many useful and good quality packages on pub.dev are ready on hand by many open source maintainers. The frontend application development is fast and easy now. Although many packages are in good quality and continuously maintained, it is no harm to take a second to review who publish it, the maintain status and if possible how is the source code. Since the code is written by third party, it is recommended to take a look at least lower the possibility of using vulnerability code. Especially, when you are developing application handles sensitive user data, a vulnerable can be a risk of data leakage.

2. Keep Every Things Up-to-date

Nothing is perfect. Both the official and third party framework and packages keep releasing new version for security fixes and patches for vulnerabilities. Trying to keep flutter version and packages to the latest version can make the application having better protection.

3. Restrict Network Traffic

Controlling network travel between the known server and your app can avoid unexpected connection perform risky move. For example, Android can take a look to the Network Security Configuration which is a xml config defined in the Android project about backlisting and whitelisting domain and traffic. IOS has similar config on info.plist for trusted domain and traffic, you may take a look at NSAppTransportSecurity.

4. Encrypt Sensitive Data Before Boxing

Sometimes we may force to store sensitive data on local, encryption before storing is a good practice to avoid data leakage. Some popular packages provide easy method on store data with encryption, for example, flutter_secure_storage, encrypted_shared_preferences and hive (database) provide encrypted data storage methods, but as mentioned previously this related to sensitive data, do take a little time to understand the crypto methods the packages are using on different platforms to define whether it fits what you expected.

5. Obfuscate when Release

Try to turn on the obfuscate option when building release version. This can make the reverse engineering on flutter app harder.

Currently only Android, IOS and MacOS is supported the obfuscate options.

flutter build <support apk, appbundle, ipa, ios and ios-framework> --obfuscate --split-debug-info=/<project-name>/<directory>

On Android, it is recommend also enable the proguard which can obfuscate the Android native code and also minimise the size of Android app.

/android/app/build.gradle

android {  
  buildTypes {
    release {
      // Enables code shrinking, obfuscation, and optimization for only
      // your project's release build type.
      minifyEnabled true

      // Enables resource shrinking, which is performed by the
      // Android Gradle plugin.
      shrinkResources true

      // Includes the default ProGuard rules files that are packaged with
      // the Android Gradle plugin. To learn more, go to the section about
      // R8 configuration files.
      proguardFiles getDefaultProguardFile(
              'proguard-android-optimize.txt'),
              'proguard-rules.pro'
    }
  }
}

/android/app/proguard-rules.pro

# Flutter
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.**  { *; }
-keep class io.flutter.util.**  { *; }
-keep class io.flutter.view.**  { *; }
-keep class io.flutter.**  { *; }
-keep class io.flutter.plugins.**  { *; }

# Any other classes the packages mentioned

As far as I know, there are mobile security companies provide paid flutter app obfuscate solutions which can also be taken on consideration for highly secure application.

Reference

Support me if you like the content🍖

Connect🍻

Drag and Drop Header for HorizontalDataTable

May Lau — Thu, 21 Jul 2022 12:30:39 +0000

Recently, I have gradually updating common examples when using the horizontal_data_table packages. One of the popular topic is enable to reorder the columns. This feature is really easy by working with the flutter Draggable and DropTarget Widget. The following is the steps I have been playing with the example SimpleTablePage and hope this can also be useful as an example using Draggable and DropTarget.

The whole class can check with the GitHub repo.

This is what it shows at the end of the article:

Let's start!

First, extract the important information from each column to a private list. I have created a data class UserColumnInfo just to store the header name and width.

late List<UserColumnInfo> _colInfos;

@override
  void initState() {    
    super.initState();
    widget.user.initData(100);
    _colInfos = [
      const UserColumnInfo('Name', 100),
      const UserColumnInfo('Status', 100),
      const UserColumnInfo('Phone', 200),
      const UserColumnInfo('Register', 100),
      const UserColumnInfo('Termination', 200),
    ];
  }

Next, we start working on the header. If you trace to the _getTitleWidget function, you will see the header widgets are basically the same, the only different is their width.

List<Widget> _getTitleWidget() {
    return [
      _getTitleItemWidget('Name', 100),
      _getTitleItemWidget('Status', 100),
      _getTitleItemWidget('Phone', 200),
      _getTitleItemWidget('Register', 100),
      _getTitleItemWidget('Termination', 200),
    ];
  }

Then it is easy that we can apply the _colInfos to generate the list of widget easily, like this:

List<Widget> _getTitleWidget() {
    return _colInfos.map((e) => _getTitleItemWidget(e.name, e.width)).toList();
}

After all, everything is set. We can start our drag and drop implementation.

Since we are handling this with the Draggable and DropTarget, if you are not familiar with these two widget, it is recommend you to take a few minutes to watch this video from flutter.dev:

What I need to do is to prepare the Draggable widget header allows people drag and a DropTarget for other header to drop to. And this is it! I will explain more below.

List<Widget> _getTitleWidget() {
    return _colInfos
        .map((e) => DragTarget(
              builder: (context, candidateData, rejectedData) {
                return Draggable<String>(
                  data: e.name,
                  feedback:
                      Material(child: _getTitleItemWidget(e.name, e.width)),
                  child: _getTitleItemWidget(e.name, e.width),
                );
              },
              onWillAccept: (value) {
                return value != e.name;
              },
              onAccept: (value) {
                int oldIndex =
                    _colInfos.indexWhere((element) => element.name == value);
                int newIndex =
                    _colInfos.indexWhere((element) => element.name == e.name);
                UserColumnInfo temp = _colInfos.removeAt(oldIndex);
                _colInfos.insert(newIndex, temp);
                setState(() {});
              },
            ))
        .toList();
  }

builder is to build the widget that the DragTarget is displaying. I build the Draggable inside to enable the child to be draggable to somewhere else. The feedback widget is wrapped the Material widget because the feedback widget is not inheriting the parent theme on default. If you want it to adopt the same UI as the existing header looks like. You need to let the child of feedback wrapped by the Theme widget. In this case, it is using the Materail theme and therefore I just simply use the Material widget to handle this issue.

builder: (context, candidateData, rejectedData) {
  return Draggable<String>(
    data: e.name,
    feedback:
        Material(child: _getTitleItemWidget(e.name, e.width)),
    child: _getTitleItemWidget(e.name, e.width),
  );
}

onWillAccept is indicating which value is allowed to be accept. Since the interchange only allow the header is different to the existing position’s header, the value is set to not equal to the current header name.

onWillAccept: (value) {
  return value != e.name;
},

onAccept is handling the changes when the drop is accepted. I first find out the old and new index of the column. And then just simply remove and insert the column again.

onAccept: (value) {
  int oldIndex =
      _colInfos.indexWhere((element) => element.name == value);
  int newIndex =
      _colInfos.indexWhere((element) => element.name == e.name);
  UserColumnInfo temp = _colInfos.removeAt(oldIndex);
  _colInfos.insert(newIndex, temp);
  setState(() {});
}

While header part is finished, the body part needs to follow the change of columns. I use the similar approach for the body part. I first extract the table cell widgets. Since there are generally two types of cell, one is plain text and one is icon. I have these two functions:

Widget _generateGeneralColumnCell(
      BuildContext context, int rowIndex, int colIndex) {
    return Container(
      width: _colInfos[colIndex].width,
      height: 52,
      padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
      alignment: Alignment.centerLeft,
      child: Text(widget.user.userInfo[rowIndex].get(_colInfos[colIndex].name)),
    );
  }

  Widget _generateIconColumnCell(
      BuildContext context, int rowIndex, int colIndex) {
    return Container(
      width: 100,
      height: 52,
      padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
      alignment: Alignment.centerLeft,
      child: Row(
        children: <Widget>[
          Icon(
              widget.user.userInfo[rowIndex].status
                  ? Icons.notifications_off
                  : Icons.notifications_active,
              color: widget.user.userInfo[rowIndex].status
                  ? Colors.red
                  : Colors.green),
          Text(widget.user.userInfo[rowIndex].status ? 'Disabled' : 'Active')
        ],
      ),
    );
  }

You may notice these is a get(_colInfos[colIndex].name) for the getting the UserInfo field. Since the header is dynamic changing, the field cannot be hardcoded. I have added a function get in UserInfo class to get the field value by their header name.

dynamic get(String fieldName) {
  if (fieldName == 'Name') {
    return name;
  } else if (fieldName == 'Status') {
    return status;
  } else if (fieldName == 'Phone') {
    return phone;
  } else if (fieldName == 'Register') {
    return registerDate;
  } else if (fieldName == 'Termination') {
    return terminationDate;
  }
  throw Exception('Invalid field name');
}

The HorizontalDataTable left hand side and right hand side builder will also changed as following like the header:

Widget _generateFirstColumnRow(BuildContext context, int rowIndex) {
  if (_colInfos.first.name == 'Status') {
    return _generateIconColumnCell(context, rowIndex, 0);
  } else {
    return _generateGeneralColumnCell(context, rowIndex, 0);
  }
}

Widget _generateRightHandSideColumnRow(BuildContext context, int rowIndex) {
  return Row(
    children: _colInfos.sublist(1).map((e) {
      if (e.name == 'Status') {
        return _generateIconColumnCell(
            context, rowIndex, _colInfos.indexOf(e));
      } else {
        return _generateGeneralColumnCell(
            context, rowIndex, _colInfos.indexOf(e));
      }
    }).toList(),
  );
}

Finally, since the column will change to different order, the column width will also changed. The total width of the fixed side column and the bi-directional side need to be update as follow:

double get _sumOfRightColumnWidth {
  return _colInfos
      .sublist(1)
      .map((e) => e.width)
      .fold(0, (previousValue, element) => previousValue + element);
}

HorizontalDataTable(
  leftHandSideColumnWidth: _colInfos.first.width,
  rightHandSideColumnWidth: _sumOfRightColumnWidth,
    ...
)

This is what it looks like now:

Support me if you like the content🍖

Connect🍻

3 Steps to Migrate to Lint 2.0

May Lau — Tue, 12 Jul 2022 12:51:24 +0000

Flutter 3.0 introduce along with the lint 2.0. For project created after flutter 3.0 will automatically use the lint 2.0, but for project created previously required to migrate manually.

1. Add flutter_lints package to dev dependance

flutter pub add flutter_lints --dev

2. Add analysis_options.yaml to root level

# This file configures the analyzer, which statically analyzes Dart code to
# check for errors, warnings, and lints.
#
# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
# invoked from the command line by running `flutter analyze`.

# The following line activates a set of recommended lints for Flutter apps,
# packages, and plugins designed to encourage good coding practices.
include: package:flutter_lints/flutter.yaml

linter:
 # The lint rules applied to this project can be customized in the
 # section below to disable rules from the `package:flutter_lints/flutter.yaml`
 # included above or to enable additional rules. A list of all available lints
 # and their documentation is published at
 # https://dart-lang.github.io/linter/lints/index.html.
 #
 # Instead of disabling a lint rule for the entire project in the
 # section below, it can also be suppressed for a single line of code
 # or a specific dart file by using the `// ignore: name_of_lint` and
 # `// ignore_for_file: name_of_lint` syntax on the line or in the file
 # producing the lint.
 rules:
   # avoid_print: false  # Uncomment to disable the `avoid_print` rule
   # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule

# Additional information about this file can be found at
# https://dart.dev/guides/language/analysis-options

3. Fix Reported Issues

Command Fix

According to the document, most of the issues can be fixed by running:

dart fix --apply

IDE Fix

For those hard to be command fixed, IDE can help use to fix most of them.

Manual Fix

Most frequent issue I got is the Avoid using private types in public APIs.

@override
_MyWidgetState createState() => _MyWidgetState();

Most of them should related to the State class. From the latest document:

Subclasses should override this method to return a newly created instance of their associated State subclass:

@override
State<MyWidget> createState() => _MyWidgetState();

Another issue I got most in my packages is the Publishable packages can't have 'path' dependencies.

For my case, it is example project which gets the error. Since it is not publishable, I have added the publish_to: none to solve the issue.

Reference:

Introducing package:flutter_lints

Support me if you like the content🍖

Connect🍻

2 Steps to Make Project Always in Dart Format

May Lau — Sat, 09 Jul 2022 03:49:28 +0000

Maintaining flutter projects and open source packages, keeping all source in dart format is important to let other collaborators to review your PRs with ease and passing flutter analyse for package. Since most of my projects are on GitHub and GitLab, free monthly GitHub Action and GitLab CI helped me a lot.

1. Local Pre-commit Hook

I have added a pre-commit hook to my flutter project which can ensure the source fits dart format before commit.

open terminal goto .git/hooks and create a file pre-commit.
run chmod +x pre-commit to make the file executable.
update the pre-commit file with following script.
a message will show and block the commit if the commit is not following dart format

#!/bin/sh

DARTFMT_OUTPUT=`dart format lib test | grep "0 changed"`
if [ -n "$DARTFMT_OUTPUT" ]; then
  echo "[pre-commit] All Dart files are formatted."
  echo "[pre-commit] $DARTFMT_OUTPUT"
  exit 0
else  
  echo "[pre-commit] Files are changed, please verify and re-attempt commit"  
  echo "[pre-commit] $DARTFMT_OUTPUT"
  exit 1

fi

2. Test Before Merge PR

Many platform provide custom CI action allow perform test before merging PR. For example, GitHub Action, GitLab CI and CodeMagic are able to conduct the format test. Depending on cost and platform using, no need to implement every platform. This move is to avoid the commits made by web portal causing incorrect format since some situations not every collaborators are developer.

GitHub Action

For project using GitHub, I will add a yaml file to .github/workflows/. For example, this is my .github/workflows/dart-format.yaml which will run once at pull request to avoid merging some reviews directly on web accidentally causing dart format incorrect.

name: Dart-Format

on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    container:
      image:  google/dart:latest

    steps:
      - uses: actions/checkout@v2

      - name: Print Dart SDK version
        run: dart --version

      - name: Verify formatting
        run: dart format --output=show --set-exit-if-changed .

GitLab CI

Similarly, GitLab also can setup a file declare to do different action on different situation. I will create a .gitlab-ci.yml in the project. The following file will run the dart format checking when I pushed something.

stages:   
    - test

dart-format-test:
   image: cirrusci/flutter
   stage: test
   script:
   - flutter format lib test --set-exit-if-changed
   only:
     - pushes

CodeMagic

I have put the bash script which is the same as the local one to the pre-test part. If the format is not correct, it will soon stop further action and notify me.

Support me if you like the content🍖

Connect🍻