DEV Community: Rene Lazo Mendez

Null or Nothing? Unmasking the Mystery of Parameters in Dart

Rene Lazo Mendez — Sun, 19 May 2024 20:46:19 +0000

Sometimes, in the world of development, things get a little confusing. Is a parameter null because it was explicitly passed that way, or simply because it wasn't specified? It's like trying to decipher a riddle: was it a "no" or a "don't know"?

In Dart, the distinction between a null parameter and one that hasn't been specified can be crucial. To prevent our code from turning into a soup of letters, we need a way to unmask this mystery.

Introducing the Marker Technique!

Imagine a magical object called _unspecified. This object holds no information, it merely exists to tell us that a parameter hasn't been defined. With a bit of code magic, we can use this object as a beacon to distinguish between an intentional null and a lack of information.

const Object _unspecified = Object();

Now, let's create a function that looks for this magical object:

bool _isUnspecified(value) => identical(value, _unspecified);

In our code, we can use this function to figure out if a parameter is null by design, or if it was simply not passed.

A Practical Example!

Let's imagine the SpaceState class. In its copyWith function, we want the successMessage and errorMessage parameters to be able to be null, but we also want the possibility for them to simply not be specified, preserving the original value.

class SpaceState {
  final bool isLoading;
  final String? successMessage;
  final String? errorMessage;

  SpaceState copyWith({
    bool? isLoading,
    Object? successMessage = _unspecified,
    Object? errorMessage = _unspecified,
  }) {
    return SpaceState(
      isLoading: isLoading ?? this.isLoading,
      successMessage: _isUnspecified(successMessage) ? this.successMessage : successMessage as String?,
      errorMessage: _isUnspecified(errorMessage) ? this.errorMessage : errorMessage as String?,
    );
  }
}

Eureka!

With this approach, we can avoid errors and keep our code clean and readable. The marker technique allows us to differentiate between "null" and "not specified" with a clarity that brings us closer to achieving perfection in our code.

Remember:

The marker technique is a creative and flexible solution, but it can also add a bit of complexity to your code.
It's crucial to maintain consistency in using the marker to avoid confusion and errors.

With this technique, your code will speak clearly and help you create robust and easy-to-understand applications!

Resume Downloads in Flutter with Dio

Rene Lazo Mendez — Wed, 26 Apr 2023 20:46:09 +0000

Add the ability to resume downloads in your Flutter app

Summary

By the end of this post, you will be able to download files, handle incomplete downloads, resume downloads, cancel, get current download status (percentage or size remaining) and merge all chunks into one file.

Current issue

I was facing a problem with my current project. I need to handle large video files, sometimes the download would not complete and every time the user accesses this specific view the download starts again from the beginning.

At the time of writing this post, the dio plugin does not have the ability to append data to an existing file during the download.

So, what can we do?

We are going to implement a customized procedure to handle our business logic.

Imports

We are going to need to add some dependencies to help us with the implementation of our service.

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

Procedure Parameters

We will receive the remote url of the file (fileUrl) to download and the local route of the file (fileLocalRouteStr) in our user’s local storage.

Future<File?> getItemFileWithProgress({
  required String fileUrl, 
  required String fileLocalRouteStr,
}) async {
  ...
}

Local Variables

Let’s first create an instance of the Dio class and the necessary variables to handle the file path so we can “play” with the filename.

Dio dio = new Dio();
File localFile = File(fileLocalRouteStr);
String dir = path.dirname(fileLocalRouteStr);
String basename = path.basenameWithoutExtension(fileLocalRouteStr);
String extension = path.extension(fileLocalRouteStr);

String localRouteToSaveFileStr = fileLocalRouteStr;

Now let’s check if the local file exists.
bool existsSync = localFile.existsSync();

If the local file DO NOT EXIST, then we are in the best case scenario where we are going to start the download from scratch. But if the file DO EXIST then we need to do some magic.

The Magic ✨

First let’s get the source file size, then the local file size and add it to a list containing all chunk (file part) sizes.

if(existsSync) {
  Response response = await dio.head(fileUrl);
  int totalBytes = int.parse(response.headers.value('content-length')!);

  int fileLocalSize = localFile.lengthSync();
  List<int> sizes = [fileLocalSize];

We will create as many chunks of the file as needed and of course this number will be unknown so we will iterate over time until the (temporary) chunk file does not exists and each iteration will modify the chunk file name and add this chunk size to our list of sizes (we’ll need to know the sum of all sizes eventually).

int i = 1;
localRouteToSaveFileStr = '$dir/$basename''_$i$extension';
File _f = File(localRouteToSaveFileStr);
while (_f.existsSync()) {
  sizes.add(_f.lengthSync());
  i++;
  localRouteToSaveFileStr = '$dir/$basename''_$i$extension';
  _f = File(localRouteToSaveFileStr);
}

When the code exits the while loop, we have the new chunk-file ready to store the remaining bytes of the file. So we’ll need to add up the sizes so far and create the Options for the header in the download.

  int sumSizes = sizes.fold(0, (p, c) => p + c);
  Options options = Options(
    headers: {'Range': 'bytes=$sumSizes-'},
  );
}

We’re saying here, on the next download fetch only from this byte (sumSizes) forward to the end of the file (we could also specify the end range of bytes, but it’s not necessary in this case)

End of The magic ;)

Merge all chunks of the file

Wait, we still have to do a few things with all the chunk files. If the localFile exists, then we need to merge all the small pieces of the original file into one and delete the chunks after.

if (existsSync) {
  var raf = await localFile.open(mode: FileMode.writeOnlyAppend);

  int i = 1;
  String filePartLocalRouteStr = '$dir/$basename''_$i$extension';
  File _f = File(filePartLocalRouteStr);
  while (_f.existsSync()) {
    raf = await raf.writeFrom(await _f.readAsBytes());
    await _f.delete();

    i++;
    filePartLocalRouteStr = '$dir/$basename''_$i$extension';
    _f = File(filePartLocalRouteStr);
  }
  await raf.close();
}

return localFile;

We’ll open the localFile in write mode, but we’ll only adding the new bytes at the end (append), so we won’t overwrite what’s already there. Very similar to what we did before, we’ll iterate until the chunk filename doesn’t exist and then return the FULL FILE. 🥳

BONUS: Download progress & Cancel download

Let’s add 2 more variables to the environment

CancelToken cancelToken = CancelToken();
final percentNotifier = ValueNotifier<double?>(null);

The first one will be “cancelToken” to give us the possibility to cancel the current download, and the “percentNotifier” will help us to listen only to the percent changes so we don’t have to redraw all the screen, instead of only the desired widget.

Now we’ll need 2 more procedures to handle this new logic.

_cancel() {
  cancelToken.cancel();
  percentNotifier.value = null;
}

_onReceiveProgress(int received, int total) {
  if (!cancelToken.isCancelled) {
    int sum = sizes.fold(0, (p, c) => p + c);
    received += sum;
    percentNotifier.value = received / total;
  }
}

Before executing the download we’ll need to check if the cancel token was already used and if so, refresh the variable with a new value.

if (cancelToken.isCancelled) {
  cancelToken = CancelToken();
}

await dio.download(
  fileUrl,
  localRouteToSaveFileStr,
  options: options,
  cancelToken: cancelToken,
  deleteOnError: false,
...

“deleteOnError” parameter in false will allow us to cancel the download and left the incomplete file in the user’s storage

Now we’ll listen to the Dio provided callback “onReceiveProgress” to update our notifier.

await dio.download(
  fileUrl,
  localRouteToSaveFileStr,
  options: options,
  cancelToken: cancelToken,
  deleteOnError: false,
  onReceiveProgress: (int received, int total) {
    _onReceiveProgress(received, fileOriginSize);
  },
);

Take a look at the example repo in GitHub:

https://github.com/rlazom/resumeDownload

If this was helpful to you please clap your hands a bit and follow me for more content. 👏👏👏

Compass Heading with AnimatedRotation in Flutter

Rene Lazo Mendez — Thu, 09 Jun 2022 04:13:48 +0000

Create a smooth angle transition for the users in your map application

So, I'm working on a project that involves a map. One of the requirements was to update not only the position, but also were the user points to.

To do this, I integrated the following plugins into the app:

flutter_compass - A Flutter compass. The heading varies from 0-360, 0 being north.
flutter_map - A versatile mapping package for Flutter, based off leaflet.js, that's simple and easy to learn, yet completely customizable and configurable.

For full documentation on the flutter_compass plugin, see the the example page on pub.dev.

Now, to get the continuous changes in the user's heading we need to subscribe to the API provided by the flutter_compass plugin:

double? userHeading;

FlutterCompass.events?.listen((CompassEvent event) {
  userHeading = event.heading;
}

If direction is null this means the client does not have the compass sensor on their device, and this scenario must be handled so as not to have exceptions in the execution of our app.

To expose this direction value, you could have several approaches:

StreamBuilder
Provider
ValueNotifier
etc.

But this is not the main topic, so just use your preferred one ;)

For the widget, the plugin's example suggest us to use Transform.rotate as follows:

Transform.rotate(
  angle: (direction * (math.pi / 180) * -1),
  child: Image.asset('assets/compass.jpg'),
)

Even though it works, I have found another way to make the angle changes in a smooth way.

Which other option do we have???

AnimatedRotation
Animated version of Transform.rotate which automatically transitions the child's rotation over a given duration whenever the given rotation changes.

But this widget requires a turn value to check against its previous value and then animate the transition of the rotation, left to right (if the value increases) or right to left (if the value decreases).

Transform the angle into turns

Ok cool, this is easy right? Simply divide the direction / 360 to get a value based on where the user is pointing.

But now we will face the first BIG issue:
The compass will misbehave in two scenarios:

If the user's rotation it's from 1 degree to 360.
If the user's rotation it's from 360 degrees to 1.

This is the tricky part

Because we will need to do some math to just get the variation of the angle and then get the expected behavior.

Lets upgrade our listener function like this:

double turns = 0;
double prevValue = 0;

FlutterCompass.events?.listen((CompassEvent event) {
  double? direction = event.heading;

  direction = direction < 0 ? (360 + direction): direction;
  double diff = direction - prevValue;
  if(diff.abs() > 180) {
    if(prevValue > direction) {
      diff = 360 - (direction-prevValue).abs();
    } else {
      diff = 360 - (prevValue-direction).abs();
      diff = diff * -1;
    }
  }
  turns += (diff / 360);
  prevValue = direction;
}

We now have in turns the desire value, just the change between the last and the new angle.

The widget should look like this:

AnimatedRotation(
  turns: turns,
  duration: const Duration(milliseconds: 250),
  child: const Icon(Icons.arrow_upward_outlined),
)

I hope this helps you and saves you some time ;)

Easy and Dynamic Themes in Flutter

Rene Lazo Mendez — Thu, 15 Oct 2020 05:54:03 +0000

Develop an application with dynamic themes has never felt easier than with Easy Dynamic Theme

When I decided to add this feature in my current project I came across several ways to achieve this goal, but none of them really got all my needs covered.

I was looking for a plugin (or some easy way) that would provide:

Dynamic theme: On new versions of Android you can define on the system setting the mode (light / dark) of your preference, and I need my app to get this information and build the UI accordingly.
Switch between themes: Some users may want to "force" his preferred theme no matter what the system says, or actually reset the theme mode to dynamic and be defined by the system.
Persist user selection: Of course, this option is not negotiable.

This was what I was aiming to find, so I took all the little pieces I found and made to myself a pretty good looking hello world app, and at that point I decided to make a plugin that could make things easier to other flutter developers who want to achieve this too, as easily as I can and save them as many hours of tedious web searching as possible.

Enough chitchat, let's show some code

Let's get the app configuration ready:

All the cool magic occurs in the main.dart file.

First, just wrap your MyApp with an EasyDynamicThemeWidget and add the values for the theme, darkTheme and themeMode attributes in your MaterialApp as follows:

void main() { 
  runApp( 
    EasyDynamicThemeWidget( 
      child: MyApp(), 
    ), 
  );
}

class MyApp extends StatelessWidget {  
  final String title = 'Easy Dynamic Theme'; 

  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      title: title, 
      theme: ThemeData.light(), 
      darkTheme: ThemeData.dark(), 
      themeMode: EasyDynamicThemeWidget.of(context).themeMode, 
      home: new MyHomePage(title: title,) 
    ); 
  }
}

No way, is that it!!!??? Yes, easy as that.

How can I actually change the theme?:

To do this, you just need to execute this from anywhere in your app:

EasyDynamicTheme.of(context).changeTheme();

With the code above, you will toggle (starting from your current theme) between the Theme Modes in the following order:
dynamic -> light -> dark -> dynamic -> ...

Or, if you prefer to play yourself with it, the function have two optional parameters (dynamic and dark) to achieve this.

And if I want to get the current theme?:

Well, in that case, you can get the current theme of your application as follows:

ThemeMode themeMode = EasyDynamicTheme.of(context).themeMode;

This will return one of the following values:

ThemeMode.system - Use either the light or dark theme based on what the user has selected in the system settings.
ThemeMode.light - Always use the light mode regardless of system preference.
ThemeMode.dark - Always use the dark mode (if available) regardless of system preference.

Easy peasy, don't you think? ;)

Please visit my Github Repo or the plugin's page at pub.dev for full documentation.