DEV Community: Steve

Understanding var, dynamic const, final in Dart

Steve — Mon, 07 Jun 2021 06:58:45 +0000

Introduction

When you are a beginner with Dart you could get lost in the understanding of the different keywords to create a variable. These variable types in Dart follow a set of rules (some common to other programming languages). This writing aims to provide these rules and to explain to beginners what are the differences between these.

What is var ?

varis a keyword allowing to create a variable without specifying a type. The type of the variable will therefore be determined according to the initial value of this variable.
Note that the type of the variable will be inferred only if you assign it a value at its declaration:

void main() {
  var a = 1;
  a = "salut"; // Will not compile

  var b;
  b = 2; // runtimeType is int
  b = "salut"; // runtimeType is String
}

This happens because we are not assigning an initial value to our variable at it's declaration.

What is dynamic ?

When creating a variable using the dynamic keyword, the data type will depend on the variable this variable will contain :

void main() {
    dynamic myVar = 2;
    print("$myVar is of type ${myVar.runtimeType}");
    myVar = "Hello World";
    print("$myVar is of type ${myVar.runtimeType}");
}

This will output:

2 is of type int
Hello World is of type String

What is final ?

The final keyword allows you to create variables that can only be assigned once at runtime. This means they are immutable. This keyword is mostly used to create instance variables for a class.

What is const ?

You may use the const keyword to create constant values; these variables are implicitly final. The thing you have to take care of is that the value of this variable must be known at compile time :

void main() {
  var myValue = 2;
  const myConst = myValue; // Cannot compile
  const activityCount = 4; // Will compile
}

myValue's variable is not known at compile time because it's type is infered, therefore Dart will need to determine the type of the variable before executing the code; note that changing myValue to a constant will actually my everything work.

For a more complete reference, consider reading the dart language tour.

Thank you for reading, don't hesitate to let me know if you have any suggestion.

Add Crashlytics to your WatchOS app

Steve — Wed, 02 Jun 2021 14:15:31 +0000

Introduction

I've been working on a WatchKit extension for an existing iOS application recently and i went through a problem: Firebase Crashlytics integration on WatchOS. Since it was quite difficult for me to find a clear documentation about this on the internet i thought it would be interesting to share a step by step guide on how i did it for my project.

This guide assumes you already have configured your product in Firebase Console. If it's not the case, you can follow the guide at this url. Also make sure you have the GoogleService-Info.plist copied at the root of your WatchExtension folder.

Integration

1. Adding the dependency

You'll need to add the dependency to your Podfile as you would on a normal iOS application; make sure to add it under the WatchKit extension target.

Example:

target 'ExampleApp Watch Extension' do
    platform :watchos, '5.1'
    # other dependencies
    pod 'Firebase/Crashlytics', '7.10.0'
end

Then you'll need to run the two command below to update your dependencies and launch your app in XCode.

$ pod install
$ open example-app.xcworkspace

2. Adding Firebase Crashlytics SDK to your app

In your ExtensionDelegate.swift file, import the Firebase module:

import Firebase

Next step is to configure FirebaseApp. It's recommanded to do this in the applicationDidFinishLaunching() method:

func applicationDidFinishLaunching() {
    // Firebase configuration
    FirebaseApp.configure()
}

Compile your app again.

3. Crashlytics initialisation

You'll need to initialize crashlytics by adding a Build Phase to your project so XCode will automatically download your project's DSYM file each time your application will crash, so that Crashlytics will be able to automatically generate crash reports.

Step 1: Open XCode and select the project in the left navigation.
Step 2: Click on the WatchKit Extension target and go to the Build Phases tab.
Step 3: Click the plus button on the top left side, then choose the "New Run Script Phase" option
Step 4: Add this code

"${PODS_ROOT}/FirebaseCrashlytics/run"

You should then have something like this :

make sure that your new generation phase is the last generation phase of the project, otherwise Crashlytics cannot initialize correctly.

Step 5: Take some beer, you've just accomplished something great !

4. Test your integration

Now we have configured Crashlytics in our project, we need to make sure it works.
To do this, we will create a test crash and see how it's handled by Crashlytics and showed in our console.

Go to your project settings, choose the Watch target (i said Watch, not Watch Extension); then go the the Build settings tab and type debug information format in the search bar. the value is probably 'DWARF', change it to DWARF with dSYM File.

Why this you'll ask me (yeah, i can read your mind ;) )
You actually need to disconnect your simulator from your XCode debugger to be able to see crash reports in the crashlytics console. (don't ask me why, I am not employed at Google, even if I dream of it).

Go to your app (for example the ExtensionDelegate.swift) file and add the code below after Firebase configuration:

func applicationDidFinishLaunching() {
    // Firebase configuration
    FirebaseApp.configure()
    Crashlytics.crashlytics().record(error: NSError(domain: "Test crash", code: 00, userInfo: nil))
}

When you are done, launch your app and you normally should be able to see your first report in your Crashlytics console.

Thanks for reading, and don't hesitate to leave a comment if you have any suggestion or questions.

How to use WKCrownDelegate in WatchOS Development

Steve — Wed, 24 Mar 2021 09:15:28 +0000

Hi everyone.

While working on a WatchOS application recently I needed to perform some operations in the application when the user rotated the digital crown; I had difficulties to find the solution because there were very few resources on the subject, and the official documentation is not clear enough for me. (A full example is always better).
After doing some research on the subject, I finally was able to find a solution and this guide will explain step by step how I achieved it.

So i'm using Swift 5 on XCode 12.4 with WatchKit.

We gonna start from a blank project so it's clear for everybody:

The InterfaceControllercode looks like :

import WatchKit
import Foundation

class InterfaceController: WKInterfaceController {

    override func awake(withContext context: Any?) {
        // Configure interface objects here.
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
    }

}

The first step will be to modify our InterfaceController so it conforms to WKCrownDelegate protocol.
This looks like :

extension InterfaceController : WKCrownDelegate {}

Before implementing our protocol methods, we will need to add some code to our InterfaceController class; we need to tell the crownSequencer it should focus, and define a delete.
To do that, add a didAppear() method (this method is automatically called when the watch interface is visible to user). This looks like :

override func didAppear() {
    super.didAppear()
    crownSequencer.delegate = self
    crownSequencer.focus()
}

Now we are ready to listen to events; the available ones are :

func crownDidRotate(WKCrownSequencer?, rotationalDelta: Double)

Called when the user rotates the crown.
func crownDidBecomeIdle(WKCrownSequencer?)

Called when the user stops rotating the crown.

Full code:

import WatchKit
import Foundation

class InterfaceController: WKInterfaceController {

    override func awake(withContext context: Any?) {
        // Configure interface objects here.
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
    }

    override func didAppear() {
        super.didAppear()
        crownSequencer.delegate = self
        crownSequencer.focus()
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
    }

}

extension InterfaceController : WKCrownDelegate {
    func crownDidRotate(_ crownSequencer: WKCrownSequencer?, rotationalDelta: Double) {
        print(rotationalDelta)
    }
}

When the digital crown will rotate, the rotational delta will be printed like on the screenshot below :

I hope this article has helped you, feel free to add your suggestions in comments.

Have a nice day! (or night)

Hide your api keys from your android manifest file with Flutter using local.properties

Steve — Wed, 26 Aug 2020 12:06:03 +0000

A common problem we face is the protection of out private data such as API keys.
When working with Flutter, you may need to integrate a third party service which requires you to add your API key to your manifest file.

You wouldn't want to check-in your API keys to the source code. Instead, you would like to embed them into an internal file ignored by your source control and use them through your app. For Android there's already a standard file that's used for this purpose called local.properties.

The AndroidManifest.xml is an xml file thus we cannot write scripts there. Instead, we can write a small script in build.gradle file, read api key from the local.properties file and assign it to a variable. AndroidManifest will be able to read that variable.

Let's dive into the code!

Assuming we want to integrate segment, we would need to add the write key toe our AndroidManifest.xml file, instead of writing the clear API key, we would write :

<meta-data android:name="com.claimsforce.segment.WRITE_KEY" android:value="${segmentWriteKey}" />

And then register the API Key in the local.properties file under the variable named "segment.writeKey" like:

sdk.dir=
flutter.sdk=
flutter.buildMode=debug
flutter.versionName=1.0.0
flutter.versionCode=1
segment.writeKey=<SEGMENT API KEY GOES HERE> # We've added this line

segmentWriteKey is the name of the variable we are going to create in the module level build.gradle (android/app/build.gradle).

Add these lines before android{} :

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
def segmentWriteKey = properties.getProperty('segment.writeKey') // Notice we get the property we the exact same name we wrote in the local.properties file

This should look like :

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream()) 
def segmentWriteKey = properties.getProperty('segment.writeKey')

android {
    compileSdkVersion 28
    ...
}

Under the android section, in the defaultConfig, add this line to the end:

manifestPlaceholders = [segmentWriteKey: segmentWriteKey]

Now everything should look like:

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
def segmentWriteKey = properties.getProperty('segment.writeKey')

android {
    ...
    defaultConfig {
        ...
        manifestPlaceholders = [segmentWriteKey: segmentWriteKey]
    }
    ...
}

Note that the local.properties file is ignore by the source control by default so you will not have to do it yourself (but prevention is better than cure ;) ).

Well, we are done.
Hope this article helped you and see you on another one.
Thanks for reading.

Flutter app development good practices

Steve — Thu, 16 Apr 2020 17:46:54 +0000

Hello everyone,

Please be lenient on the quality of the writing as this is my first article. Nevertheless I would make efforts to improve myself in my next essays.

Note: This article may include elements mentioned on the documentation at https://flutter.dev/docs/perf/rendering/best-practices.

The content you will read in this article is based on my own experience and may be very opinionated.

The guidelines

I know, it can be a pain in the ass to do so much reading, but you'll thank me later.
Before you start developing mobile applications (with Flutter, or any other technology), please read the guidelines.

They'll give you strong knowledge about platform specific design patterns to improve your users experience.

Don’t make costly operations in your build methods

Do nothing else than building your UI in your build method; adding costly operations (like async calls or too big calculations) can lead to performance losses or unwanted behaviors (yeah, Flutter is very fast, but let's not abuse it 😉)

Avoid large trees, split your code into small widgets instead

Dividing your code into small reusable widgets not only promotes its reusability, but also its readability. So, you should split your code into different Widgets based not only on encapsulation but also on how “it changes”

Use widgets instead of _buildXXX (methods) to build UI elements

Build widgets instead of builder methods. Using methods instead of classes to build UI elements can not only lead to performance losses, but also to unwanted behaviors or silly-nilly bugs.

Use absolute positioning only when it’s truely necessary

Responsiveness/adaptability is a well-known topic today. Not all devices have the same pixel density, nor the same size, etc... so it's important to build UIs that adapt to all theses changes. I personally use absolute values for some cases (paddings, margins, border radiuses, etc...)

Flex is life

Prefer using Flex widgets as much as you can. The ones that come to my mind are (Row, Column, Flex, Expanded, Flexible). You can find further explanations here

"const", my friend

Use const constructors whenever possible when building your own widgets or using Flutter widgets. This helps Flutter to rebuild only widgets that should be updated.

Widget build(BuildContext context) {
    return Column(
        children: const [
          AspectRatio(aspectRatio: 10/1),
          Text("Hello world");
        ],
    );
}

Widgets choice matters

It is important to choose the widgets to use when you want to build a view. A bad choice of widgets can lead to a too large tree and a lot of useless code.
Always remember to check if a native widget does not exist before creating yours.

Use packages only when necessary

Packages can be a good choice when you want to speed up your building process and pub has a ton of them. Nonetheless, they can have significant effects on your app performances when they are used without prior study

Dealing with lists

Use the default constructor ListView for rendering small lists of known size; for longer lists (for example a list returned by the API call), use the ListView.builder constructor which renders list elements as users scroll to them.

Important notice: The shrinkWrap attribute on a ListView will force it to calculate it's size and thus to render all the elements at once.

Linting

Dart is great and we love it. It offers us a lot of freedom, but sometimes too much, so it is important to limit its features to prevent bugs in the application later.
One of your first reflexes when creating a new Flutter project should be to create the analysis_options.yml file at the root of your project.

[UPDATE: 11/04/2022]
When you create a project with the latest versions of Flutter, the analysis_options.yml file is now created by default with the official lint rules

Visit https://flutter.dev/docs/perf/rendering/best-practices for a complete reference about the two first points, and more other good practices.

Thank you for reading.
Leave a comment if you have any suggestion, or if you don’t agree on some points.