If you’re developing your Flutter application using Redux, you know that this architecture has many advantages. Unfortunately, like everything, it also has some drawbacks. One of them is the amount of code you have to write for every new widget that wants to benefit from the Redux Store.

Today I’d like to show you a nice way for speeding up this process. It’ll be useful for you if you’re using Android Studio, IntelliJ IDEA or Visual Studio Code.

Android Studio/IntelliJ IDEA

In this IDE we’re gonna use a feature called Live Template. To create a new Live Template, go to the Settings/Preferences | Editor | Live Templates.

In the editor window, tap on the + icon and add a new Live Template. Fill in the abbreviation you want to use for your template (it’s redux in my case) and the description. Paste the following text in the Template text field.

Under the Template text field, select Define… to choose a context to which template can be applied to and select Dart: top-level.

That’s it! To start using it, open any dart file and start typing redux. That should show your new Redux template.

To read more about Live Templates, visit IntelliJ IDEA documentation

Visual Studio Code

In this IDE we’ll use a feature called Snippets. To create a new Snippet, go to the File/Code | Preferences | User Snippets.

In the window that’ll appear, choose dart. That should open the editor for your snippet. Paste the following code into that editor and save it:

To use it, open one of your dart files and start typing redux. That should highlight your new Snippet:

To read more about Snippets, visit Visual Studio Code documentation

Summary

To summarise, today I showed you how you can use Live Templates or Snippets to speed up your work. You can use them for many other things, including frequently used utility methods or the boilerplate code. Let me know in the comments about your ideas!

Speed up writing Flutter Redux code in your IDE was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hi! Today I’d like to show you how to run Flutter integration tests on devices using Firebase Test Lab.

What are integration tests?

Integration tests check how different parts of the app work together. Unlike unit tests, they are intended to be run on devices (physical or virtual) and are used for end-to-end testing instead of testing particular components in separation. Because of that, integrations tests are much slower than unit tests, but they are a great way to check if our app works correctly in real-life scenarios.

What is a Firebase Test Lab?

While running integrations tests is a great way of testing the app, we’re unfortunately limited to the devices we have. They can be either physical devices, emulators or simulators, but we have to setup each one of them to run tests on our machine. That can become problematic if we’d like to test it on many different devices.

With Firebase Test Lab, we have access to thousands of Google-hosted devices with different device configurations. They are all stored in a cloud, so we can have remote access to them. All we have to do is to upload our app’s tests and Firebase will run them for us.

Pre-requisites

For this example, I’m going to use the default counter app that’s generated when you run flutter create command.

If you want to follow these steps along the way, you can check out this repository’s branch: flutter_integration_testing

Setup

We’re gonna start with adding a dependency in the pubspec.yaml to dev_dependencies section. That’s the section where all dependencies for non-production code should be put.

We’ll use integration_test package. To install it, add this to your pubspec.yaml:

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test: ^1.0.2+2

Add integrations tests support

To add support for integration testing, the first thing to do is to add method IntegrationTestWidgetsFlutterBinding.ensureInitialized() in your test. This method is needed to initialize the Flutter test environment.

In my case, I’m going to add it in the test/widget_test.dart file. That’s the basic widget test added to the counter app on start that checks if the text is updated on the screen whenever we tap ‘+’ button:

Full source code: widget_test.dart

Running test on your machine

To run the test on your machine, you have to first create an entry point for test driver script. To do that, create a new file in test_driver/integration_test.dart and paste it:

Full source code: integration_test.dart

That file can then be used to run flutter drive command and run all tests from test/widget_integration_test.dart. Remember that flutter drive runs test on your device, so you should have one already running!

flutter drive \
 --driver=test_driver/integration_test.dart \
 --target=test/widget_integration_test.dart

As the result, you should see that your app is installed, tests are running quickly and later on you’ll see test results:

Running tests on Firebase Test Lab

If you haven’t already done it, you can start with creating new Firebase project in the console. You don’t have to setup Android & iOS apps, you can finish when you see that screen:

Now you can go and setup either Android, iOS, or both apps and prepare them to upload to Firebase Test Lab.

Note: This article describes uploading Android versions. If you’d like to see how to setup iOS, check out this integration_test package documentation.

Android setup

To setup Android, you have to create a new file in android/app/src/androidTest/java/your/package/yourapp/MainActivityTest.java directory. That /java/your/package/yourapp path should be replaced with your path:

Full source code: MainActivityTest.java

And the last thing is to add dependencies for android testing in android/app/build.gradle file:

Full source code: build.gradle

After this setup, you can prepare the instrumentation test build with the following command:

pushd android
flutter build apk
./gradlew app:assembleAndroidTest
./gradlew app:assembleDebug -Ptarget=test/widget_test.dart
popd

That should generate file in /build/app/outputs/apk/debug/app-debug.apk. Take that file and drag it (or upload) into the Firebase console in the Test Lab tab:

This will automatically start Robo testing. That’s another test type that you can explore, but we’re not gonna focus on that today. Instead, we’ll go to running our integration tests.

To do that, click on “Run a test” and choose “Instrumentation”:

On the next screen you should upload two previously generated APKs:

1. App APK is located in /build/app/outputs/apk/debug/app-debug.apk
2. Test App is located in /build/app/outputs/apk/androidTest/app-debug-androidTest.apk

After they are uploaded, on the next screen you can choose on which devices you want to run integration tests:

After selecting devices and continuing, your tests will start to run. After a few minutes you’ll see the results. If everything is ok you should see this screen with green success!

If you’ll have some test failures, you’ll see them here too.

And that’s it! If you want to check out the full source code, visit my repository:

pszklarska/flutter_integration_testing

I hope you liked this article. If you want to read more of my articles, don’t forget to follow me. Stay tuned for more! 🙌

Running Flutter integration tests on Firebase Test Lab was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hi! Today I’d like to share my favourites keyboard shortcuts I can’t imagine living without.

A few years ago I wrote two articles about keyboard shortcuts in Android Studio. They can be also applied to IntelliJ IDEA, so if you don’t know them, give it a reading!

• Top (unknown) keyboard shortcuts in Android Studio
• Top (unknown) keyboard shortcuts in Android Studio — Part II

Today, I’d like to share those who might be more obvious, but for those of you who don’t know them —I’m sure they’ll save you plenty of time and mouse clicking! Let’s start!

#1 Go to declaration

That’s my №1 shortcut, my all-time-favourite! With this shortcut, you can easily find all places where a class is declared. Super helpful when you want to check what are the occurrences of a specific class.

Just tap on a class name and use the shortcut:

macOS: Cmd + B

windows: Ctrl + B

More info: IntelliJ IDEA — Go to declaration and its type

#2 Find a class by name

Another very frequently used by me shortcut is for finding a class by its name. It’s very handy either when you’re looking for a specific class, or if you don’t remember the exact name or location, but just want to look through all the places.

With “All Places” option enabled, this will work both for classes in your code, as those from SDK as well.

To open this “Search” dialog, simply run:

macOS: Cmd + O

windows: Ctrl + N

Note: You can navigate with Tab through “All”, “Classes”, “Files”, etc. tabs to look also in other places!

More info: IntelliJ IDEA — Searching everywhere

#3 Find action

This one runs in the same dialog as “Find a class by name”, but it’s so handy it requires a separate mention!

This shortcut is great when you want to use any of those actions, but… you haven’t remembered all those keyboard shortcuts yet. With one simple shortcut, you can access all of them!

macOS: Cmd + Shift + A

windows: Ctrl + Shift + A

More info: IntelliJ IDEA — Search for actions

#4 Reformat code

With many languages, there comes a strict guideline of how each file should look like. It’s very important to keep the same code style across all the files in a project because it makes ours and other developers’ life easier when they have to read that in the future. To ensure the same code style you can run code reformatting.

macOS: Cmd + Option + L

windows: Ctrl + Alt + L

More info: IntelliJ IDEA — Reformat and rearrange code

#5 Rename

The last, but not the least is a shortcut for renaming fields. IntelliJ IDEA has a very wide range of refactoring options, and that’s the one that I use probably 20 times a day. This refactoring option can be applied to everything — a class, method, field or variable name.

macOS: Shift + F6

windows: Shift + F6

More info: IntelliJ IDEA — Rename refactorings

That’s it for today! Thanks for reading, I hope you’ll try one or two of these shortcuts in your projects soon. Let me know in the comments if you use them already or if you know any other interesting ones! Stay tuned for more ✌️

Top 5 most useful keyboard shortcuts in IntelliJ IDEA was originally published in Code Well Mobile on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hi! In today’s article I would like to cover topic of image labelling using Firebase ML in Flutter.

Firebase ML is a library that uses machine learning for solving a variety of problems, including language identification, text recognition, face detection, or — main topic of this article — image labelling. With Firebase ML we can use great potential of machine learning without having expert knowledge on how neural networks work. In this article you’ll learn how to implement this API in your Flutter project.

Ready? Let’s start!

Example

In this article we’re gonna build a simple app that will allow us to choose photo from the gallery and label it with Firebase ML.

When working with Firebase ML, you can use either cloud or on-device API. In this article we will use on-device version. For more information about which version you should use, check out the documentation.

Installing

To setup Firebase ML in the Flutter app, we’re gonna use firebase_ml_vision library. First step is adding it to your pubspec.yaml file:

dependencies:   
  firebase_ml_vision: ^0.10.0

Note: At the time of writing this article, current version was 0.10.0. You may want to check current version on the firebase_ml_vision website.

Next step is creating Firebase project and doing platform-specific configuration (for Android and iOS). To do that, you can follow steps from this tutorial: Codelabs — Firebase for Flutter.

The last step is making setup for using on-device image labeler:

Android

To setup Android, add this piece of code to your build.gradle in android/app folder:

android {
    dependencies {
        // ...

        api 'com.google.firebase:firebase-ml-vision-image-label-model:17.0.2'
    }
}

iOS

To setup iOS, add this line to your Podfile in ios folder:

pod 'Firebase/MLVisionLabelModel'

And run cd ios && pod update

Usage

To use image labels detection, we have to create FirebaseVisionImage object from an image file. For getting image file you can use many different libraries, for example image_picker.

Note: To see the full code of Firebase ML with image_picker, visit my GitHub repository.

Once you get a file, you can use it to create FirebaseVisionImage object. I’ll do it in the separate method that will be later called by tapping on a button:

Future<void> _getImageAndDetectLabels() async {
  final pickedFile = await picker
    .getImage(source:ImageSource.gallery);

  if (pickedFile != null) {
    File image = File(pickedFile.path);

    final FirebaseVisionImage visionImage =
      FirebaseVisionImage.fromFile(image);

    ...
  }
}

With this object, we can call imageLabeler() to get a labeler and call processImage() to detect image labels:

Future<void> _getImageAndDetectLabels() async {
  ...

  final ImageLabeler labeler =
      FirebaseVision.instance.imageLabeler();
  final List<ImageLabel> labels = await labeler
      .processImage(visionImage);
  }
}

ImageLabel class contains information about labels — its name and confidence of the result:

for (ImageLabel label in labels) {
  final String name = label.text;
  final double confidence = label.confidence;
}

And we can use that to show results on the screen:

Text(
  labels
      .map((label) => '${label.text} with confidence ${label.confidence.toStringAsFixed(2)}')
      .join('\n'),
),

Ta-da! That’s all. We learned how to use Firebase ML in Flutter to detect image labels.

To see the full source code of this example visit my GitHub repository:

pszklarska/flutter_image_labelling

Thanks, that’s it for today! I hope you like this article. If you do, don’t forget to clap! ✌️

Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm

Labelling pictures in Flutter using Firebase Machine Learning was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

This layout, when the screen width is smaller than 500px, scales all the children and keeps their ratio. However, if the screen width is smaller than 500px, it keeps all children’s sizes and makes the whole view scrollable.

That kind of layout might be very useful when you want to keep a minimum width for all your children, allowing them to resize up if they have any space on the screen. It can have many practical uses, including support for different layouts in a mobile application based on screen size, or in the desktop and web apps.

If you want to see it in the action, check out this DartPad example! You can play with it, modify and keep it for later.

Problem

We’re gonna start with a simple layout. One Row with four children Containers, each of them wrapped in Expanded view to set different flex parameters. The code can look like this:

class AdaptableRow extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: Container(color: Colors.yellow),
        ),
        SizedBox(width: 10.0),
        Expanded(
          flex: 1,
          child: Container(color: Colors.blue),
        ),
        SizedBox(width: 10.0),
        Expanded(
          flex: 3,
          child: Container(color: Colors.green),
        ),
        SizedBox(width: 10.0),
        Expanded(
          flex: 1,
          child: Container(color: Colors.pink),
        ),
      ],
    );
  }
}

And will result in this simple UI:

How to make it react to the screen width? That’s super simple. We will use a combination of two widgets: SingleChildScrollView and ConstrainedBox. This first one will be responsible for making a view scrollable, and the second one for maintaining constraints for maximum width. Let’s start!

Solution

To make it work, all you have to do is to wrap your Row in those two widgets:

import 'dart:math';

class AdaptableRow extends StatelessWidget {
  final minWidth = 500.0;
  
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: ConstrainedBox(
        constraints: BoxConstraints(
          maxWidth: max(screenWidth, minWidth),
        ),
        child: Row(
          children: [
            Expanded(
              flex: 2,
              child: Container(color: Colors.yellow),
            ),
            SizedBox(width: 10.0),
            Expanded(
              flex: 1,
              child: Container(color: Colors.blue),
            ),
            SizedBox(width: 10.0),
            Expanded(
              flex: 3,
              child: Container(color: Colors.green),
            ),
            SizedBox(width: 10.0),
            Expanded(
              flex: 1,
              child: Container(color: Colors.pink),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation

Thanks to ConstrainedBox, our view always has a maximum width of either screen width or 500px (whichever is bigger):

maxWidth: max(screenWidth, minWidth),

So, if the screen width is bigger than 500px (let’s say 800px), then it takes 800px as it’s maxWidth, allowing the view to take as much space as it’s needed.

However, if the screen size is less than 500px (let’s say 300px), ConstrainedBox imposes additional maxWidth constraint set to 500px, but SingleChildScrollView provides an infinite amount of space. This results in the view taking only as much space as it’s allowed by the constraints (500px) and being scrollable if it doesn’t fit on the screen.

If you want to know more about constraints in Flutter, you can read the article Understanding constraints from a Flutter website.

That’s it for today! You can check out the full source code on GitHub or play with this example on DartPad. If you liked my post, don’t forget to clap! 🙌 🙌 🙌

Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm

How to make an adaptable layout in Flutter? was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hi! Today I’d like to share a few tips on how to write tests in Flutter. Some say that writing tests slows you down, but it is not true if you know how to write them efficiently. There are a few good practices on how to achieve that in basically every language and framework. In this article I will show you some of them in Flutter.

If you want to learn some basics about Flutter testing first, I encourage you to visit Flutter website. You can find there an explanation of unit, widget, and integrations tests. Otherwise, let’s start with today's tips!

Follow Given-When-Then

Are you familiar with Given-When-Then approach? It’s a style to formulate your tests. With that idea, you start a test by describing the initial state (e.g. Given user is logged in), then you describe what should happen (e.g. When user taps on a button), and finally you describe the expected state or result (e.g. Then user sees logged in message). This way lets you clearly separate the conditions, actions, and results and will help you see what’s the goal of each test.

Moreover, you can use that concept in the test name as well! This is how it may look like in Flutter:

testWidgets(
    'GIVEN user is logged in '
    'WHEN user taps on a button '
    'THEN info is shown', (tester) async {
  
  // given
  when(user.isLoggedIn).thenReturn(true);
  
  // when
  await tester.pumpWidget(Home());
  await tester.tap(find.byType(FlatButton));
  await tester.pump();
  
  // then
  expect(find.text('I\'m logged in!'), findsOneWidget);
});

Note: If you don’t know what when(…).thenReturn(…) means, you can follow reading to learn about mockito. It’s a must-have for testing!

Use Mockito

If you don’t know mockito yet, it’ll become your best friend in testing. Mockito is a library that allows to mock behaviors of classes. Why you may need that? The simplest use case is, of course, anything time and resources consuming, such as API calls, database operations, loading resources from network, etc. Those services may take a while and you can’t always predict their result, so you really don’t want them in your tests. Imagine running a test that randomly fails because you have a bad internet connection!

This is where mockito gets very useful. You can use it to mock behaviour of any(!) class you want and return the expected behaviour. For example:

when(apiClient.fetchKittyNames()).thenReturn(['Lilly', 'Bella','Coco']);

when(databaseManager.saveProduct()).thenReturn(true);

when(resourceProvider.getImage()).thenThrow(Exception());

This way you can check all possibilities in your tests with a full control over external dependencies. Pretty cool, right?

However, it’s not only for long-running operations. You can use Mockito for all your dependencies. Let’s look at the previous example with the user being logged in. If we want to test different behaviours based on the user state, we have to pass User mock to Home widget:

testWidgets(
    'GIVEN user is logged in '
    'WHEN user taps on a button '
    'THEN info is shown', (tester) async {
  
  // given
  final user = UserMock();
  ...  

  // when
  await tester.pumpWidget(MaterialApp(home: Home(user: user)));
  ...
});

Where UserMock is a new class created outside of the test with a mockito:

class UserMock extends Mock implements User {}

And this way we can control whether the user is logged in or not and check that in our test:

testWidgets(
    'GIVEN user is logged in '
    'WHEN user taps on a button '
    'THEN info is shown', (tester) async {
  
  // given
  final user = UserMock();
  when(user.isLoggedIn).thenReturn(true);
  
  // when
  await tester.pumpWidget(MaterialApp(home: Home(user: user)));
  await tester.tap(find.byType(FlatButton));
  await tester.pump();
  
  // then
  expect(find.text('I\'m logged in!'), findsOneWidget);
});

You can check the full source code on my GitHub:

That’s it for today! I hope this post clarified Flutter testing topic for you. If you still need more information, I encourage you to dive deeper into Flutter documentation where you can find a lot of useful articles and tutorials. Thanks for reading! 👋

https://www.twitter.com/FlutterComm

Flutter Testing — My Tips & Good practices was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

Often you read those articles about unit testing or TDD, you see examples of fully tested code and maybe you wonder — it looks so simple, why haven’t I started doing this yet?

Perhaps, as it was in my case, you come with this knowledge to your project, and… you have no idea where to even start it. It’s easy to try testing on a small, example project that someone showed you to prove that you don’t have to feel scared about it. But it’s different when it comes to practice. But hey, there’s good news! If you already made this first step and feel convinced that you’d like to add some tests to your code, you still can do it. You just need more than a simple article showing you how can you write tests. You need a proper framework. You need a schema that you can follow every time you’d like to test something, so you can take it and start testing in your project.

Let’s make an exercise here. Go to your project (can be any you have in mind, but it’s the best when you’re familiar with the whole structure of the code) and grab some class you’d like to test. Before doing that you may ask yourself a question…

Which class should I test?

That’s the first decision we need to make. When it comes to testing, you have a few options. It can be a class that has some complicated logic that you’d like to cover with tests to make sure nothing will blow in your face when you don’t expect. It can be some UI class that you’d like to check if it’s gonna look ok in different scenarios. Or it can be class with utilities that you keep to make writing code simpler. Can be anything. If you don’t know what you should use, just take the main screen of your app. You can change this decision later.

Pro tip — it doesn’t really matter at the beginning, so don’t feel super focused on it. As you’ll be more natural with your testing, you’ll feel which classes are better candidates for testing, and which are not, but at the beginning probably most of your classes should be tested (if you don’t have any tests in your project).

In my case, I picked up a class to show the list of articles in a feed.

Now, as we already have chosen a class that we’ve committed to cover with tests, it’s time to ask ourselves:

What do I want to test here?

Now, look into your class. What’s the main purpose? If you can answer it shortly, that’s good, it means your class is probably quite small and responsible for a specific thing. If you can’t say, what’s this class exactly for (e.g. it’s mostly for showing a list of products, but it’s also for making some dates modifications), then it probably means that your class is too big or has too many different responsibilities. Why is it important? Because at this step you need to decide what do you want to test and it’s best if you’ll focus on just one thing, as that’s what unit testing is all about. If your class is too big, just try to extract non-main responsibilities to the other classes. You can unit test them separately.

When you already know, what’s the purpose of your class, you can come up with some testing scenarios. For example, if you have a class to prepare your account history based on a transaction list, you can think about different cases, e.g. how the history should look like when this list is empty? What if there are transactions from different months? What if some transactions have positive, and the others have negative values? What if the dates have different formats?

When you think about test cases you should always have at least:

• happy path scenario (that’s what you think should be a normal case)
• edge cases (null, empty, zero, negative values)
• unhappy path (that’s what you think shouldn’t be valid and your test can confirm that)

Of course, you can have much more than this. There are tons of books about preparing unit test cases, but that’s just for a good start.

For my class, the main responsibility is to properly show a different kind of articles. I have few different types there (e.g. with title, body, image, video), they are all optional and can be in different configurations. I’d like to test that for each scenario the article renders correctly.

Now, as we have it, it’s time to think…

How can I test it?

You already know what you’d like to test, you open your class (yeah, do it now!) and you wonder… what’s next?

Here’s what we already have: a subject of the test (your class) and different testing scenarios. Let’s start with the simplest one, a happy path.

There’s a template to describe user stories called Given-When-Then. It means that Given some conditions, When something happens, Then some result occurs. You can follow that template in your test. Start with Then part first. What’s the result you expect? For me, I expect to see an article with a title and video. It should be visible When I enter article details, assuming that Given article has title and video. It may sound really silly, of course, when an article has a video, I want to see a video. But nothing is silly in unit testing. There might be really complicated things happening under the hood, but you have simple action and you expect a simple result. Now, look at your code — what’s your Given-When-Then?

When you picked up your scenario, again start from the end — write assertions first. Why? Because it’s much simpler to make puzzles when you see an image on the box.

Your first assertions (depending on the language) can be as simple as assertThat(yourClass.someMethod()).isEqualTo(result)

Now, look at your code. Remember what’s your test subject and try to eliminate all the other dependencies. If you test countdown calculation, don’t worry about the current date — mock it! If you want to check if the user list is shown properly, don’t use real data from API — mock it! If you test login flow, but you use some external library for it — mock it!

That might not be that easy at the beginning. When you write code without tests in mind, you don’t always focus on separating different logics. It might occur to you that you have everything in one class and when you want to test it, you can’t — because it’s all coupled together. Unfortunately, that’s the moment when you need to take a big shovel and start refactoring. It doesn’t have to be a huge refactor, you can just extract classes one by one, piece by piece. But to be able to write unit tests, you’ll need to.

At this point, you’ll probably realize two things:

1. It’s good to create smaller classes with dependencies because you can separate some portions of logic and you can test it independently
2. If you test any kind of frontend app (either web or mobile), it’s good to keep your UI and business logic separately. If you have it in one place, it’s often impossible to write a proper unit test

If you don’t know what you should put as someMethod() , because your case is too complicated to be described as just one method, it’s ok to have multiple assertions. If you want to test that filling the form with a valid data triggers progress indicator, and then enables button and makes automatic navigation to the next screen, then… it’s ok, as long as you’re testing one specific scenario.

Depending on your case, you might want to call some actions before and that’ll be your When. The last step is usually arranging context around the test and preparing the environment, e.g. opening the proper screen, creating model data, which is your Given.

Now… Run your test! And don’t worry if it’s not green immediately. It takes time and practice, but it’s worth it. After you’ll see this green light for the first time… You’ll know why!

That’s it! You wrote your first test in your project. And remember, it doesn’t have to be perfect at the beginning. You can test very easy things, or tests may not have that much sense. But as you’ll write them more, you’ll feel more confident about it, and one day you’ll ask yourself… What was I afraid of? And you won’t even remember.

Thanks!

Today I’d like to introduce you into a beacons and how to became a beacon using only your phone and a Flutter. Let’s start!

What’s a beacon?

Beacon is a small device, operating on batteries that can last for a few years. It can send a radio signal and communicate with smartphones via Bluetooth. The name is not without a reason — when we go near the beacon, it can contact the application on our phone and display the information we need, refer us to the store or informs us about the current place.

For instance, if you walk into the museum (with your Bluetooth on), you can get the informations about the artpiece whenever you pass it by!

The possibilites are endless. Airports, shops, museums, bus stops, shopping centers, music festivals, galleries, smart homes. The list of examples is huge.

But why use your phone instead of a beacon?

Beacon is a great device. It’s small, so you can hang it almost enywhere. It looks nice on the walls, next to the cash desk or… even on the trees.

But beacon is… another device. You need to buy it and remember about changing to the new one when batteries are out (it needs to be done every 1-2 years, but still). What about using the device you already have, your phone? The answer is good — you can!

How to turn your phone into a beacon?

I faced this issue some time ago. There are ready-made solutions for both platforms, e.g. AltBeacon library for Android or CoreLocation for iOS. But there was nothing for Flutter. So I decided to… write it on my own!

beacon_broadcast | Flutter Package

I made a plugin that makes all the work for you. All you need to do to turn your phone into beacon is to add a plugin to your Flutter project:

dependencies:
  beacon_broadcast: ^0.2.1

And then after running flutter pub get command you’re ready to go:

import 'package:beacon_broadcast/beacon_broadcast.dart';

BeaconBroadcast()
    .setUUID('39ED98FF-2900-441A-802F-9C398FC199D2')
    .setMajorId(1)
    .setMinorId(100)
    .start();

To check more options (e.g. setting beacon layout, manufacturer, transmission power), visit the plugin site.

That’s all! I hope you’ll find this post (and my library!) useful. If you have any comments or feedback, don’t hesitate to left it.

JavaScript is not available.

How to turn your phone into a beacon with Flutter? was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

This year’s Google IO is behind us. Google introduces us to a lot of new things. Among all of the informations, there is some great news for Flutter. What’s this? Let’s check!

Flutter for Web

The biggest news for Flutter developers is Flutter Web announcement. Back in December on Flutter Live, we’ve heard about the plans for incoming 2019 year. One of those plans was to support building websites with Flutter. Now, this week, Google has released a preview version of Flutter for the web! By the way, it’s not called Hummingbird anymore, now it’s called Flutter web.

Flutter Web supports popular browsers — Chrome, Firefox, and Safari. For now, there’s no support for plugins system yet, so you can’t port your application without mocking part of it, but Flutter team is constantly making changes and improvements, so it’ll be possible any day soon. And I encourage you to give it a try, you can build beautiful UI for web exactly as you’ll build it for mobile app:

You can read more about Flutter for web on the new website.

Flutter 1.5

Another huge announcement is a new version of Flutter: 1.5! With this new version came a lot of improvements, including In-App purchase plugin (this issue had over a hundred reactions!), support for iOS widgets translations and updates for new App Store requirements.

Also, worth noticing is support for Dart 2.3 with UI-as-code feature, which allows us to build UI with code in a more efficient way. For example:

You can more about Flutter 1.5 here.

Flutter ML Kit

Another great announcement is the new project — ML Kit Custom Image Classifier. It’s an app (made of course in Flutter!) for creating custom image classification models. In this app, you can create your own dataset for machine learning. The app is made using Firebase and allows you to do the whole process — from creating your database, through updating it with the new data (you can invite friends to help you!), ending with training and testing your models on your device.

Flutter for desktop

Although Flutter for desktop is not something production-ready, the Flutter team published an early version of instructions for creating Flutter apps for desktops. It may be a great point to start playing with Flutter desktop and we’re keeping our fingers crossed for this to be ready soon.

Summary

Google IO has brought us a lot of news. As far as we can see, Flutter team puts a lot of effort into making Flutter beyond mobile by creating the ability to develop apps to the web and desktop.

By studying Flutter 2019 roadmap I can say it’ll be a very interesting year for the Flutter. I’m really excited about being part of it 🙌

You can read the whole announcement on GoogleDevelopers blog.

What’s new in Flutter at IO ‘19? was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to create button animation with Flare in Flutter? Part 3: Implement animation in Flutter project

Hi everyone! 👋

In today’s article we’ll continue a series in which we’re going through the process of creating animation in Flutter using Flare. This series is split into three parts and you can check all of them here:

• Part 1: Create your first animation!
• Part 2: Animations with TrimPath
• Part 3: Implement animation in Flutter project

This is the last part. In this article we’ll go through the final step: integrating animation with our Flutter project to achieve this result:

If you haven’t read previous articles, you can read them all (I encourage you!) or you can fork this Flare project and start from this point.

Step 1: Create a Flutter project

We’ll start with the empty Flutter project. You can omit this step if you’ll integrate animation into an existing app. If you don’t have one, follow these steps from the guide on Flutter site.

Step 2: Add flare_flutter package

To have the ability to use flare in your Flutter project, you need to add proper library. This library is called flare_flutter and you can check it on the pub packages site. Here you’ll find also instructions on how to install and use it. Basically, all you need to do is:

a) Add this to your pubspec.yaml file:

dependencies:   
  flare_flutter: ^1.5.0

b) Run flutter packages get to update packages in your project.

Now you’re ready to use it!

Step 3: Add animation code

When we have a library ready, we can run with the actual part of this article: coding. We’ll start by modifying main.dart file:

import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';

void main() => runApp(FlareButtonApp());

class FlareButtonApp extends StatefulWidget {
  @override
  _FlareButtonAppState createState() => _FlareButtonAppState();
}

class _FlareButtonAppState extends State<FlareButtonApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            height: 75,
            child: FlareActor(
              'assets/Button.flr',
              animation: 'Loading',
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
    );
  }
}

The most interesting widget here is FlareActor . This widget is reponsible for showing animation. As you can notice, I wrapped this widget inside SizedBox widget — I’ve done it to make sure that my widget’s size will be exactly 500x75 pixels.

FlareActor has few parameters. First one, ‘assets/Button.flr’, is the file path to our animation. To make it work, we need to export our Flare file and put this file into assets:

Step 3.1: Add Flare asset

To add Flare asset, you need to open your Flare file (like this one), tap on the Export icon on the right, choose Export and confirm it. The generated file will have *.flr extension and you need to put it inside some folder in Flutter project. In my case it’s assets in the project root:

To make this file visible for Flutter, you need to declare assets folder in pubspec.yaml file:

flutter:
  assets:
    - assets/

And that’s all! Now let’s go back to FlareActor widget.

Step 3: Add animation code (continuation)

The next parameter in FlareActor widget is animation: ‘Loading’ . That’s the name of our animation. You can change the name of the animation in Flare project, from the menu on the left visible after switching to Animate tab:

Next parameter is fit: BoxFit.fitWidth, which describes the way animation is shown (just as with images), in this case, we’d like to make sure the full width is visible.

That’s it! You can run your app and check the animation! Right now it should look like this:

But there is more…

Bonus: Adding idle and restart animations

If you saw the animation from the beginning of the article, you may notice that it was slightly different. This is because we can add multiple animations in Flare project to have multiple states of our Flare objects. And right now we only have one state (Loading).

I added the missing states to the file here. You can notice there are two more animations: Idle and Restart. The first one is not really an animation, rather an initial state of the button. The second one is the animation that happens after we click on the button.

To make them work you need to add few lines in the code I presented above:

class _FlareButtonAppState extends State<FlareButtonApp> {
  String _animationName = 'Idle';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            height: 75,
            child: GestureDetector(
              onTap: _onButtonTap,
              child: FlareActor(
                'assets/Button.flr',
                animation: _animationName,
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _onButtonTap() {
    setState(() {
      if (_animationName == 'Idle' || _animationName == 'Restart') {
        _animationName = 'Loading';
      } else {
        _animationName = 'Restart';
      }
    });
  }
}

Voilà! Now our animation works like a charm:

You can check this Flare project here on 2dimensions.com.

You can check also code for the repository from today’s article here:

pszklarska/flutter_flare_button

Summary

That’s all! It’s the end of this series. Through all the articles we completed the full process of creating fancy animation using Flare and integrating this animation into Flutter project. If you’d like to check previous posts, you can do it here:

• Part 1: Create your first animation!
• Part 2: Animations with TrimPath
• Part 3: Implement animation in Flutter project

Thanks for reading, comments, and feedback! 🙌 If you liked this article, don’t hesitate to clap it!

How to create button animation with Flare in Flutter? Part3: Implement animation in Flutter project was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.