WTF - What the Flutter is actually like? And how it dominates over native apps

Flutter - Introduction

Flutter is an app SDK for building high-performance, natively compiled UI apps for iOS && Android from a single Dart codebase.

I highly recommend checking out the technical overview and Write your first Flutter app codelab to better understand the basic underlying concepts behind Flutter.

If you're coming from another frontend platform check out those guides:

To learn more about Flutter's inner workings be sure to check out Inside Flutter documentation page.

For more general information and learning resources head to the official Flutter YouTube channel. Widget of the week and The Boring Flutter Development Show (deep dive, live coding) series are especially worth keeping an eye on.

Now that you can see some of the Flutter concepts better let's just jump right into it!

Widgets

Widgets are basic building blocks in Flutter. If you're coming from React you can think of Flutter widgets being like React components.

Stateless vs. stateful

In Flutter there are two types of widgets - stateless and stateful widgets.

Stateless widgets are simple and contain no internal state. They take parameters and return the widget tree from build method.

class NameLabel extends StatelessWidget {
  final String name;

  NameLabel({Key key, this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Hello $name"),
    );
  }
}

Differently, stateful widgets do contain internal state.

They are defined by two classes - one representing widget and the other one representing the state. The reason for this is that widgets are immutable. Since StatefulWidget extends Widget it, therefore, must be immutable too. Splitting the declaration into two classes allows both StatefulWidget to be immutable and State to be mutable.\
Moreover, widgets are instantiated using the new MyWidget() syntax. If we merged both classes into one, new MyWidget() would reset all the properties of the state every time its parent update.

class Counter extends StatefulWidget {
  Counter({Key key, this.name}) : super(key: key);

  final String name;

  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('${this.widget.name} have pushed the button this many times: $_counter'),
        RaisedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

You can also see that

the state can be modified only inside setState callback
build method exists only in the state class - you can think of UI as a function of the state
you can access widget parameters using this.widget reference

For a complete look at widgets in Flutter follow widgets intro page in the documentation.

Declarative UI

If you have never worked with a declarative UI framework like React or SwiftUI you may want to check out Introduction to declarative UI.

UI layouts

To learn about UI layouts in Flutter check out Layouts in Flutter documentation page and Layout basics codelab.

Flexbox

Flutter supports building layouts in Flexbox model.

Widgets inside a Flex widget (eg. Column, Row) can be wrapped in the Flexible widget. The Flexible widget has flex property. Flutter has 3 flexible widgets: Flexible, Expanded and Spacer.

Example - row of images:

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      flex: 2,
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

Testing

Automated testing falls into a few categories:

A unit test tests a single function, method, or class.
A widget test (in other UI frameworks referred to as component test) tests a single widget.\ The goal of a widget test is to verify that the widget’s UI looks and interacts as expected.
An integration test tests a complete app or a large part of an app.\ Generally, an integration test runs on a real device or an OS emulator.

For more information check out page about testing in Flutter documentation.

Common patterns

Render widget conditionally in a list

return Column(
  children: [
    Text('foo'),
    if (isBar) Text('bar'),
    Text('baz'),
  ],
);

Flutter developer experience

IDE integrations

Flutter team officially supports two coding environments for Flutter - IntelliJ/Android Studio and Visual Studio Code. Read the Flutter documentation on how to setup IntelliJ integration and Visual Studio Code integration.

Useful VSCode settings

"dart.previewFlutterUiGuides"
Setting this value to true will render guides showing you how widgets are nested:
"dart.debugExternalLibraries", "dart.debugSdkLibraries"

Setting these values to false will disable stepping into external libraries and SDK while debugging.

Of course, as I mentioned Flutter is based on Dart programming language and it's better for you to at least become familiar with coding in Dart. I'll share another article specifically about some of the basics of this programming language in the future section. For know I'd like to thank you all for spending time reading this post.

What're your thoughts about Flutter? I encourage you to let me know what you're thinking wheater Flutter is new to you or you have already some experience with it. Share your opinion in the comments section below 🔥