WTF - What the Flutter is actually like? And how it dominates over native apps
Tags: android, ios, beginners
Published: 2020-07-23 21:33:20

## Flutter - Introduction 
[Flutter](https://flutter.dev) is an app SDK for building high-performance, natively compiled UI apps for iOS && Android from a single Dart codebase. 

![wtf](https://media.giphy.com/media/s2QW0837hEUec/giphy.gif)

I highly recommend checking out the [technical overview](https://flutter.dev/docs/resources/technical-overview) and [_Write your first Flutter app_ codelab](https://flutter.dev/docs/get-started/codelab) to better understand the basic underlying concepts behind Flutter.

If you're coming from another frontend platform check out those guides:
- [Flutter for Android developers](https://flutter.dev/docs/get-started/flutter-for/android-devs)
- [Flutter for iOS developers](https://flutter.dev/docs/get-started/flutter-for/ios-devs)
- [Flutter for web developers](https://flutter.dev/docs/get-started/flutter-for/web-devs)

To learn more about Flutter's inner workings be sure to check out [_Inside Flutter_](https://flutter.dev/docs/resources/inside-flutter) documentation page.

For more general information and learning resources head to [the official Flutter YouTube channel](https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw). [_Widget of the week_](https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG) and [_The Boring Flutter Development Show (deep dive, live coding)_](https://www.youtube.com/playlist?list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl) 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! 

![Jumping boy.](https://media.giphy.com/media/iMBEgyXkFBtdCFS93i/giphy.gif)

### Widgets
Widgets are basic building blocks in Flutter. If you're coming from React you can think of Flutter widgets being like React components.
- [Full index of Flutter built-in widgets](https://flutter.dev/docs/reference/widgets)
- [Widget list grouped by category](https://flutter.dev/docs/development/ui/widgets)
- [_Widget of the week_ - excellent videos about purpose and usage of Flutter widgets](https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)

![Building blocks.](https://media.giphy.com/media/Zxo0sziR6WDDOSd0Wy/giphy.gif)

#### 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.

```dart
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.

```dart
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](https://flutter.dev/docs/development/ui/widgets-intro) 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_](https://flutter.dev/docs/get-started/flutter-for/declarative).

### UI layouts
To learn about UI layouts in Flutter check out [_Layouts in Flutter_](https://flutter.dev/docs/development/ui/layout) documentation page and [_Layout basics_](https://flutter.dev/docs/codelabs/layout-basics) codelab.

#### Flexbox
Flutter supports building layouts in Flexbox model.

Widgets inside a `Flex` widget (eg. [`Column`](https://api.flutter.dev/flutter/widgets/Column-class.html), [`Row`](https://api.flutter.dev/flutter/widgets/Row-class.html)) can be wrapped in the `Flexible` widget. The `Flexible` widget has flex property. Flutter has 3 flexible widgets: [`Flexible`](https://api.flutter.dev/flutter/widgets/Flexible-class.html), [`Expanded`](https://api.flutter.dev/flutter/widgets/Expanded-class.html) and [`Spacer`](https://api.flutter.dev/flutter/widgets/Spacer-class.html).

_Example - row of images:_
```dart
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](https://flutter.dev/docs/testing) in Flutter documentation.

## Common patterns
- Render widget conditionally in a list
```dart
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](https://flutter.dev/docs/development/tools/android-studio) and [Visual Studio Code integration](https://flutter.dev/docs/development/tools/vs-code).

### Useful VSCode settings
- `"dart.previewFlutterUiGuides"`
Setting this value to `true` will render guides showing you how widgets are nested:
<img src="https://dartcode.org/images/release_notes/v3.1/ui_guides.png" width="600">

- `"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 🔥