DEV Community: suesitran

Flutter — Interactive Diary — A developer diary #13

suesitran — Tue, 27 Sep 2022 00:04:29 +0000

Create Connectivity service

To check device connectivity, there’s a package that works perfectly for that purpose: connectivity_plus.

It’s also a Flutter Favourite package, so I assume it’s safe to use right now. However, I’m being skeptical about using 3rd party directly in the app, so I’m going to wrap it inside my ConnectivityService again.

Connectivity research

The idea of ConnectivityService is only to check if the device is having any form of connection, be it wifi, mobile, bluetooth or ethernet.

For a mobile device, connecting to Wifi or Mobile can suggest that there’s internet connection on the device. However, when I was playing with my Android phone, I realised that it has Bluetooth tethering, and with little search on Google, and I came across this page. It means there can be internet sharing using Bluetooth connection. Therefore I added Bluetooth into my list of online status.

And although it’s not common among mobile users, but connecting mobile device to ethernet to have internet access is also possible. Here is an article how to connect your mobile to ethernet. So as tricky as it can be, ethernet is 1 of my online status as well.

That’s all for connectivity research. Now let’s do code plan.

Code plan

The first need of this service is to know at any point of time, is the device having any form of connectivity? To do this, I need a boolean that returns true/false, in which, true means there is connectivity, and false means there’s no connectivity.

Next, in some cases, I’ll also need to be informed immediately when my device loses connectivity, or regains connectivity. So I’ll need a Stream<bool> which will send true/false value, true means there is connectivity, and false means there’s no connectivity.

That’s simple. Let’s code.

Coding time

First, I’ll need to create a boolean to check if device is currently having any connectivity at all. Because checking connectivity from connectivity_plus will return a Future, therefore my boolean also needs to be a Future.

Secondly, I need a Stream<bool>, so there it is, a Stream<bool>.

Now I need to do the actual implementation of _checkConnectivity(), and _connectivityChange.

But first, I need an instance of Connectivity from connectivity_plus package.

The optional Connectivity? here is to be used later in test with a mocked instance of Connectivity class.

Then, let’s look at _checkConnectivity(). The idea of this method is to return a boolean, with false means no connectivity, and true means otherwise, so the code is as simple as this.

The reason optional ConnectivityResult? is added is because this method will be reused later with ConnectivityResult value.

Now, let’s look at _connectivityChange. This is actually a StreamController, which can emit a new value to the Stream attached to it.

There are multiple connectivity types, but I only want to emit changes when connectivity is from connected to none. I do not want to be informed when connectivity is switching from 1 type to another. Therefore I need a boolean to know the current connectivity status, and will emit change if and only if connectivity is change from connected to none.

To do this, I’ll create a boolean for current connectivity, and check connectivity as soon as the instance is created.

Now it’s time to work on the connectivity change. Connectivity class has a Stream that emit ConnectivityStatus. I will just need to listen to this stream, and check when connection change from connected to none, and emit the change when connection status is changed. I’ll do this in the constructor as well, so the constructor becomes this.

And last step, add implementation of _handleConnectivityChange().

That’s it. Now, test time.

Test time

To test my ConnectivityService, I’ll need to mock the behaviour of Connectivity class. To do this, I’ll need to use Mockito package, as well as build_runner package.

These packages are added under dev_dependencies because I only need them during development.

The test class name is nartus_connectivity_test.dart, which is the same file name as the class I want to test, and add suffix _test to it. This is to make it easier to find which class this test is about, and also easier for me to write script later if I need to.

To generate the mocks to classes I need, I add this annotation right above the main method

After that, I need to run following command to generate the mock file.

This command is included in scripts/generate_dependencies.sh, so my actual command is

There are pro and con in doing it this way. Pro is that it saves time for me to remember the command to run, but con is that it takes longer time, because this script will run in all packages. As I add more packages to the project, this script will take longer time to run. Maybe I need to find a better way to do this.

Anyway, back to the test. Now I have the mock file generated, I can import it into my test, and start making an instance of the mock, and start testing.

In each of the test, it’s always a good practice to give the condition of the test (GIVEN), then action to do (WHEN), and the expected result (THEN). This way, it’s clear what the test is about.

In the first test, I want to ensure that isConnected will return false if current connectivity is none, so I give the description of the test as

given current connectivity is none, when get isConnected, then return false

Similarly, I need to test with other connectivity types as well: bluetooth, wifi, mobile, ethernet.

Next, I’ll need to test the connectivity stream. I know that when connectivity is changed from none to other connectivity type, I expect there is a value emit to my stream. So the description of this test will be

given current connectivity is none, when connectivity change to mobile, then emit true to connectivity change stream

Then I continue to test the same scenario with other connectivity types: wifi, bluetooth, ethernet.

Another case to test is when changing between these connectivity type, there should be no value emit to my stream. So the description of the test will be

given current connectivity is mobile, when connectivity change to bluetooth, then do not emit changes to stream

Lastly, I need to test that when there are multiple connectivity change happens, but onConnectivityChange will only emit 1 change when connectivity is changed to none.

given connectivity switches multiple times, when listening on stream, then only emits value when Connectivity change to none

And that’s it, my ConnectivityService is done.

That’s all for today. If you like my article, please follow for more tips.

Flutter — Interactive Diary — A developer diary #12

suesitran — Sun, 18 Sep 2022 11:17:32 +0000

Let’s BLoC

The work I pickup today is Location Permission handling, which is divided into 2 parts:

Part 1: Handle location permission within app

Part 2: Handle location permission between app and App Settings

Actually the work for Part 1 has been done by KoC, however, we did not have a good technical discussion before the work started, therefore he did not use the correct lib to open the native App Setting page, and so the work is undone. That’s why I continue his work any complete both Part 1 and Part 2 of this issue.

Analyse issue

Before I start coding, I need to understand all scenarios in the issue (story) that’s assigned to me. And to do that, I start by translating scenarios from user’s point of view into technical point of view.

Convert scenarios to technical knowledge

Here is the link to the issue I need to implement: Location Permission

Each scenario describes a small technical requirement I will need to implement.

Scenario 1:
GIVEN Location permission is denied
AND Internet connection is available
AND I do not have any location stored in storage
WHEN I launch the app
THEN I’ll be presented a dialog to explain why location permission is needed

This part means “when location permission is NOT granted”, then show dialog to explain why location permission is needed.

Scenario 2:
GIVEN scenario 1
WHEN I tap on ‘Continue’ button
THEN the map is loaded with default location lat/lng

With the dialog above, the user taps on Continue button, then dismiss the dialog, and show the map with default location.

Scenario 3:
GIVEN scenario 1
WHEN I tap on ‘Allow’ button
THEN native Location permission request dialog is presented to me

With the dialog in scenario 1, when user taps on Allow button, then dismiss the dialog, and request native location permission

Scenario 4:
GIVEN scenario 3
WHEN I tap on ‘Deny’ button
THEN Location permission dialog is dismissed
AND I’ll be presented a dialog to explain why location permission is needed

When native location permission dialog is showing, if user denies permission, then we show dialog in scenario 1 again. This is when Location permission status is NOT GRANTED.

Scenario 5:
GIVEN scenario 3
WHEN I tap on ‘Deny, do not ask again’
THEN Location permission dialog is dismissed
THEN I’ll be presented a dialog to explain why location permission is needed

In Android, there’s a term for permission permanently denied, and similarly, in iOS, there’s also a similar term. So this scenario describes this case, when user permanently denied location permission. When this happens, if I try to request native location permission dialog, nothing happens, and location permission status remains FOREVER NOT GRANTED

Scenario 6:
GIVEN scenario 5
WHEN I tap on ‘Allow’ button
THEN I’ll be navigated to native App Setting screen, where I can change location permission for my app.

This continues from scenario 5 above, in the dialog within my app, when user taps Allow, because the permission now is FOREVER NOT GRANTED, and requesting native location dialog will take no effect, the only way for user to allow location permission to this app is to change it in App Setting screen.

Summary of scenarios

All 6 scenarios above can be summarised to this short technical requirement:

When request current user’s location, and location permission is granted, then show Map with current user’s location
When request current user’s location, if location permission is NOT GRANTED, then show Dialog 1 to explain location needs
If user taps Continue in Dialog 1, then load default location
If user taps Allow in Dialog 1, then
=> If location permission is NOT GRANTED, then request native location permission dialog
=> If location permission is FOREVER NOT GRANTED, then open App Settings.

That’s easier to understand now.

Tech time

After understanding the requirement in tech’s POV, it’s time to do code plan. This time, since most of the logic is done by KoC, I just need to continue base on that logic.

I’ll be using flutter_bloc for this complex issue. There’s a choice between using bloc, or just cubit, but for learning purpose, I choose to use bloc this time. Maybe next time I’ll use cubit.

As it’s quite complex issue, it’s better to draw a diagram of the flow.

First diagram is how each component send request to its processor.

And how the processor returns result to the requester.

So the UI will only communicate to the BLoC, the BLoC will communicate to Location Wrapper, and Location Wrapper will communicate with Location and Permission Handler.

There are 3 notes here:

The reason for breakdown communication is to simplify the flow between each component, and makes it easier to test.
Location Wrapper is in-place in order to make the code modular and easy to change or update later if there’s ever a need to change Location package or Permission Handler package, and also ensure to reduce changes to the main app.
Using Permission Handler to handle location permission in stead of using Location’s permission handler is because Permission Handler also provide convenient method to open App Settings. Besides, it also provides handling to other permissions that I’ll need later.

Now I need to plan activity between each components.

Code plan

Let’s do code plan for each block.

For UI

What’s needed in the UI?

UI will need to show Dialog 1, with a Text for title, a Text for content, and 2 TextButtons for buttons.

When is Dialog 1 needed? When Location Permission is NOT GRANTED, aka, DENIED.

How does UI know location permission is DENIED? use LocationPermissionDeniedState from Location BLoC.

When user taps on Allow button in Dialog 1, send event to LocationBLoC to request location permission.

But if Location permission is PERMANENTLY NOT GRANTED, aka PERMANENTLY DENIED, then the wording on Allow button needs to be different, so that user knows he’s being taken to App Settings screen right?

OK, then let’s have a state for PERMANENTLY DENIED, call it LocationPermissionDeniedForeverState, then Dialog 1 will show with TextButton as Open Settings, and Continue.

For Location BLoC

From UI plan above, I know there are 2 States I’ll need in Location BLoC: LocationPermissionDeniedState and LocationPermissionDeniedForeverState.

How to reach LocationPermissionDeniedState? When permission is DENIED, and NOT PERMANENTLY DENIED

How to reach LocationPermissionDeniedForeverState? When permission is PERMANENTLY DENIED.

These info are from Location Wrapper, in term of Exceptions.

LocationPermissionDeniedException => State is LocationPermissionDeniedState

LocationPermissionDeniedForeverException => State is LocationPermissionDeniedForeverState

For the events, there will be 2 events:

Request to show native location permission event => call location wrapper to show native location permission request dialog

Request to open App Settings => call location wrapper to open app settings

For Location Wrapper

Location Wrapper class will wrap around location and permission_handler packages, and use these packages for each needs:

location package: to get user’s current lat/lng value
permission_handler package: to handle permission status, request native location permission request dialog, and open app settings.

Within this issue today, I’ll focus on location permission, which is mainly maintained by permission_handler package.

As code plan above, this Location Wrapper class will need to throw 2 Exceptions

LocationPermissionDeniedException: When permission status is denied, limited, or restricted.
LocationPermissionDeniedForeverException: when permission status is permanently_denied.

That’s it. Simple. Now it’s time to code.

Code time
First step, I need to add permission_handler into pubspec.yaml

Then I need to run flutter pub get to update my pub. Actually let’s leave it to Android Studio, and I just click the Pub get button instead.

Second step, edit LocationService class, inside method getCurrentLocation(), and convert permission status into Exceptions as needed

I also need to add methods to request permission, and open app settings

With requestPermission method, I also wanna know what option user chooses, by checking permission again after user makes their choice.

requestOpenAppSettings is straight forward, no tricky logic here.

Next step, I need to update LocationBloc, to add 2 new states.

And I also need 2 new events for LocationBloc

Now, implement handler for those events

And implement functions for each event

Notice that in _showDialogRequestPermissionEvent(), when use allow location permission, I immediately request current location. This is to refresh UI immediately with updated user’s currently location.

That’s almost it. The next step is to update the code in UI, but the code is too long to copy here, so here is the link to my PR.

However, there’s something I did not anticipate during code plan, which is when user returns from App Settings. There are 2 scenarios when user returns from App Settings, and I described them in this issue here.

In order to accommodate this new scenarios, I changed my StatelessWidget to be a StatefulWidget, in order to use WidgetsBindingObserver to listen to AppLifecycleState changes.

And I added new state to my LocationBloc.

And new event as well

When user taps on Open Settings button, I change the state to AwaitLocationPermissionFromAppSettingsState

And by using WidgetsBindingObserver, I can now override didChangeAppLifecycleState in the UI, and notify LocationBloc when users returns to the app

Then when LocationBloc received event ReturnedFromAppSettingsEvent, it will just try to get user’s current location again.

That’s it. The rest is tinkering work to make it works, and write test.

Full code can be found here in this PR.

That’s all for today. If you like my article, please follow for more tips.

Flutter — Interactive Diary — A developer diary #11

suesitran — Sun, 11 Sep 2022 10:53:33 +0000

Have fun with Animations

Let’s put the Dev hat on, and enjoy the fun of code today.

As I’m switching back to Dev role, I look for the most interesting work I always like: Animation. And there’s 1 story fits nicely in my interest: Core UI — Date text field with error integration.

Here is the design I came up with.

And it can be transform into below UI, when error is shown

I also came up with a nice description of the animation I wish to have

Animation
When switching from normal state to error state, the error banner should slide down from behind the Date banner
When switching from error state to banner state, the error banner should slide up to hide behind the Date banner
Animation duration is 300ms

Now, let’s start coding.

Code Plan

Code plan is actually to analyse the problem at hand, and try to solve it with a plan, before I write any code at all.

For simple problem, I usually just think of what to do, then remember the step, and start writing the code. But for this problem, there are actually 2 different hard-to-remember solutions I can try, so I’m gonna write them down here, in case I may forget them.

The first step is to create the UI. Looking at the 2 UI (with and without error), There are 2 ways to create this UI

Create a Stack, with Label on top, and Error underneath
Create a Column, and show/hide error as needed

Now, let’s analyse each solution

Solution 1 — Stack

So I’ll need a Stack, a large text for Label, and smaller text for error

Stack: need error background colour, so that when the error text is showed, this background colour will be showed.

Label: need container to wrap around it because I need the decoration, with border radius, and background colour

Error: Just text, white colour, with some padding
Now, let’s think of animation.

When switching from normal state to error state, the error banner should slide down from behind the Date banner.

This suggest I can use SlideTransition. But if I use SlideTransition on the error text, only the error text will slide down, without the red background colour. So no, not SlideTransition.

Next implementation I can think of is to create Error with its own container, with decoration and background colour to be error colour, then use AnimatedBuilder to update the height of this container.

But to what height should I change this container’s height to?

I know the size of the Error text, I know the padding value I wanna give to it. So maybe, I can calculate this height.

Okie, this sounds fun, although it does not sound like the best solution. Why? Because

with Accessibility large text, there’s a good chance that the calculation will fail
and each time to show/hide error, I’ll have to do a calculation again.

This sounds silly, but actually it will work. Actually I coded this as well in this PR, and tried to stop here, because this works.

But after thinking again and again, this is not best approach yet. So, let’s look at the 2nd solution.

Solution 2 — Column

This solution is straight-forward. First, I create a Column with 2 children: the Text for Label, and the Text for error.

I’ll need some decoration for Label, border radius, background colour, text size, text colour.

Then I’ll look at the error. If I create decoration for the Error, when the error is showed, it will totally be separated from the Label, and I will not have the effect that the Error is extended from the Label above.

To solve this, I need a container to wrap outside of the Column, and apply decoration for the Error on this Container.

When there’s no Error, this decoration is totally hidden behind the Label decoration, but when there is error, the lower part will be visible as if it’s the background of the error.

But wait, there’s shadow in the UI. In this case, I can wrap them in a Card, and use its elevation value to show shadow, and I can also decorate the Card by updating its shape.

Now, the animation part. The simplest animation is to change the height of this Error text, and create the illusion that the text slide down from underneath the Label.

The only thing I’m worried here is that the text in Error may be distorted during animation.

If I use the SizeTransition widget, I can change the value of axisAlignment, so maybe this can help saving the text from being distorted due to layout change.

That sounds like a good plan. It’s now time to code.

Write the code

Here is the link to the complete code of solution 2. And below is detail how the Code plan matches the code.

First step, create a StatelessWidget to host the custom widget I want to create.

Then, in the build method of this StatelessWidget, I create a Column widget, with 2 children: 1 Text for label, and 1 Text for error.

Column(
  children: [
    Text('label'),
    Text('error'),
  ],
)

But I need decoration for the label text, so I’ll separate it out to another method, to make it easy to implement and edit later. And I’ll do the same for error text as well, because it’ll need animation. The code now becomes

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    _labelWidget(),
    _errorWidget(),
  ],
)

At this time, the 2 methods _labelWidget() and _errorWidget() are simply returning Text widget.

Now, let’s work on this line

I’ll need some decoration for Label, border radius, background colour, text size, text colour.

This implementation will go into _labelWidget() method, and I’ll need a Container widget for this. And also need to update the textStyle of this label to match the design.

Widget _labelWidget() => Container(
  alignment: Alignment.center,
  decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.onBackground,
      borderRadius: const BorderRadius.all(
          Radius.circular(NartusDimens.padding24))),
  padding: const EdgeInsets.symmetric(
      horizontal: NartusDimens.padding16,
      vertical: NartusDimens.padding14),
  child:
  Text('Label', style: Theme.of(context).textTheme.headline6),
);

Then I also need to update the padding for my error text.

Widget _errorWidget() => Padding(
  padding: const EdgeInsets.symmetric(
      horizontal: NartusDimens.padding16,
      vertical: NartusDimens.padding4),
  child: Text(
    'error',
    style: Theme.of(context)
        .textTheme
        .subtitle1
        ?.copyWith(color: Theme.of(context).colorScheme.onError),
    textAlign: TextAlign.center,
  ),
);

Right now, the UI of this widget component looks like this

I still need decoration for the background of error text. So I’ll wrap the Column inside a Card widget, then do decoration on the Card itself.

Card(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(NartusDimens.padding24)),
  ),
  color: Theme.of(context).colorScheme.error,
  elevation: NartusDimens.padding4,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      _labelWidget(),
      _errorWidget(),
    ],
  ),
)

Now it looks matching the designed UI. It’s time to implement animation.

In order to add animation to this widget, I’ll need to use SingleTickerProviderStateMixin, and with this mixin, I’ll need to convert my StatelessWidget to be a StatefulWidget, then implement the State of my StatefulWidget with SingleTickerProviderStateMixin

class _TextAndErrorLabelState extends State<TextAndErrorLabel>
 with SingleTickerProviderStateMixin {}

Actually I used Android Studio to do the conversion, so it’s like there’s no work on me at all.

I’m going to use SizeTransition widget, so I’ll need an AnimationController to control my animation, which will have the duration of 300ms.

late final AnimationController _controller = AnimationController(
    vsync: this, duration: const Duration(milliseconds: 300));

and an Animation with double for the actual animation.

late final Animation<double> _sizeAnimation =
    CurvedAnimation(curve: Curves.fastOutSlowIn, parent: _controller);

The controller will need a value, so I’ll define this value in initState()

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

  _controller.value = 1;
}

And of course, I also need to dispose the controller when I no longer need it.

@override
void dispose() {
  super.dispose();

  _controller.dispose();
}

All setup is done, now it's the time to wrap the error inside a SizeTransition.

The SizeTransition widget will take full space of parent’s width, so my error text will no longer be center align. Therefore I need to change to use Container to wrap it, in order to have both padding and alignment in 1 container.

I also change the axisAlignment value to 1 (default is 0) because I want the Container to update the size from the bottom of its height, not the center or top.

Widget _errorWidget() => SizeTransition(
      sizeFactor: _sizeAnimation,
      axisAlignment: 1,
      child: Container(
        alignment: Alignment.bottomCenter,
        padding: const EdgeInsets.symmetric(
            horizontal: NartusDimens.padding16,
            vertical: NartusDimens.padding4),
        child: Text(
          'error',
          style: Theme.of(context)
              .textTheme
              .subtitle1
              ?.copyWith(color: Theme.of(context).colorScheme.onError),
          textAlign: TextAlign.center,
        ),
      ),
    );

And I think this is done.

But wait. Is it done? There’s no animation although I already added SizeTransition in my error text.

The reason is because I still need to use the AnimationController to start my animation. To do this, simply run _controller.forward(); when it’s needed. In my case, because I’m going to use this widget in a bloc, so I’ll need it to run animation immediately as it’s showed, therefore this code will be in my build() method.

And that’s it. The animation works!

The full source code for this widget with animation can be found in this link.

That’s all for today. If you like my post, please follow me for more tips.