Flutter for Frontend Engineer

Flutter, a framework that allows developers to build cross-platform app with single codebase, is introduced by Google that is easy to use and promises great performance rendering in 60 fps. In JavaScript world, we have solutions like React Native and NativeScript that re-use your knowledge on web frontend to create your cross-platform mobile apps. Flutter is similar except it’s using a language called Dart. What really attracts me using Flutter are that it compiles our apps into native binary code as if we wrote our apps in Java or Swift and since Flutter is from Google, the support for new SDK is supposed to be pretty fast. If you would like to use Flutter for your next project, here are some things I’ve learned as a frontend engineer.

Code Structure ​

Flutter really embraces this component paradigm that is often seen in frontend. In face, if you are familiar with React or Vue then you will feel right at home. These frontend frameworks try to keep your template code, business logic, and styling in one same place for organization purpose. Flutter adopts the same paradigm in which all of the relevant code for this piece of UI is in the same place and it manages its logic and lifecycle.

dart
import ‘package:flutter/material.dart';

class Chat extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Text(“Sup”),
      ),
    );
  }
}

Flutter has a huge collection of components in material design as well as Cuppertino style for iOS. There’s a padding component for spacing, there’s scaffolding components for basic UI layout, there are all kinds of layout components like columns or rows. So in short, there’s a component for everything.

Familiar Methods and Syntaxes ​

In JavaScript we are used to having many convenient funtions operating around array like forEach and map. Luckily they are also available in Dart but on List.

dart
List<String> list = new List<String>();
list.add(“A”);
list.add(“B”);
list.forEach((String char) => print(chat));
list.map((String char) => char + “!”);

Syntaxes are almost the same so we only need minimum training to get used to this new language. You have probably noticed that arrow function is used in the example above and yes Dart does have arrow function as well.

dart
var text1 = “Dart”;
String text2 = “Dart”;

Although Dart 2 (the latest version of dart) is a statially typed language, you can initialize a variable and infer its type latest by setting a value to it. This behaviour is similar to what TypeScript offers. In most cases I would suggest indicating type so we can catch potential bugs during build time.

Promises ​

In Dart it is called Future which is something that can be resolved in an asynchronous manner. In JavaScript we can use the keyword then to run a callback function when it has been resolved. Better yet, JavaScript has async await to make deal asynchronous code as easy as synchronous. Dart has all of the above.

dart
FutureFunc().then(successCallback);

function myFunc() async {
	await Futurefunc();
}

State Management ​

Seeing Flutter has similar paradigm as React and Vue, there have been many different solutions for sharing states between components. Redux, React people are very familiar with this, is a state management library popular in React community that is based on flux pattern. You emit an action and based on that action it will mutate the state and pass those state to components as props so your components can react on them. If you are a fan of reactive programming then you can also use RxDart which utilizes the concept of Observable that you can subscribe to watch for the changes. The official recommendation from the Flutter team is called Provider. It has a set of data providers and consumers for consuming the data. You can expose the data from the top layer and consume them in the child component. As long as the BuildContext is viable, you can update the state from anywhere. It is very similar to the Context API which offers the same functionalities.

dart
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<AppState>(
          create: (BuildContext context) => AppState(),
        )
      ],
      child: Consumer<AppState>(
        builder: (BuildContext context, AppState appState, _) {
          return Scaffold(
            appBar: AppBar(
              title: Text(“Home”),
            ),
            body: Column( 
              children: <Widget>[
                Text(“${appState.firstName}”),
              ],
            ),
          );
        },
      ),
    );
  }
}

Dart ​

Flutter is using a language developed by Google called Dart. I won't go into details on what type of language it is but to me personally, if you have used TypeScript before then you basically need zero effort in learning it. The syntaxes are similar, the usual methods we have on JavaScript also exist like previously mentioned. For Flutter team Dart allows them to develop quickly and perform fast thanks to JIT and AOT compilation. To developers, Dart is easy to pick up which means we can get productive is shortest amount of time.

Flutter, as mentioned, aims to be performant while saving your time by targetting multiple platforms at once. Some benefits of using Flutter include hot reloading, compilation to native, familiar syntaxes if you are frontend engineer thanks to Dart, and strong growing community. Next time you are think about creating an app for your project or even startup, Flutter is a viable choice for your minimum viable product.

Cover photo credit goes tounsplash-logoAlfred Schrock