Since the day I started developing Android applications, I have always been using XML language to create the application layout. In fact, using XML has been the only way to create the layout until the Jetpack Compose library was introduced. The library uses Kotlin language to build the layout on Android reactively. Coming to Flutter, I have to re-learn how to build the layout again since there are differences between building layout with XML on native Android and doing it reactively in Flutter. Fortunately, Android studio can also be used as an editor to develop Flutter so I can learn to do a new thing with the tool that I am already familiar with.

Widget tree instead of the XML file

In Android, View is the foundation of everything the users see on the application screen. In Flutter, everything is made up of Widget. Therefore, when constructing the screen, we have the widget tree instead of the XML file. To give a clear example, here is the code of the screen with one button in Flutter. You might notice that I run the app on the iOS simulator. It's a whole new experience for Android developers! 😂

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MainPage()));

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Just one button'),
        backgroundColor: Colors.<em>indigo</em>,
      ),
      body: MyButton(),
      backgroundColor: Colors.<em>blue</em>,
    );
  }
}

class MyButton extends StatefulWidget {
  @override
  _ButtonState createState() => _ButtonState();
}

class _ButtonState extends State<MyButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Center(
        child: FlatButton(
          onPressed: () {
            setState(() {});
          },
          child: Text("Click me!"),
        ),
      ),
    );
  }
}

As you can see, the screen is constructed by wrapping a widget inside another widget. To create the screen with one button aligned at the center of the screen, we have these widgets; Scaffold -> Container -> Center -> FlatButton -> Text. The Scaffold widget provides a framework that implements the basic material design layout. It provides a way to show Drawers, Snackbar, AppBar, and other material design components. In this example, the Container widget takes up all of the space below the toolbar and defines the padding. The Center widget makes the widget inside itself align center. The FlatButton is a clickable widget. Finally, the Text widget fills the text inside the button. The Android Studio IDE provides a shortcut to wrap a widget inside another easily.

No layout preview.

Normally when working with XML layout we would have a preview along with the XML code so that we know how this XML code looks like in the application screen. You can even drag and drop the View component to create a UI in the preview window. There is no such thing in Flutter. Before starting Flutter, having no preview is one of my concerns about writing the layout in a declarative way. However, who needs layout preview when you can see the change on a real device instantly after the code has changed as there is a hot reload feature. In Flutter, there is a hot-reload feature which propagates the change to the real device right after you save the code. The hot-reload will work only when the changes are in the widget tree. If there is a change in a resource like images or fonts, you still need to run the app again.

Image resource and fonts.

The images and fonts folder need to be linked to the pubspec.yaml file so that the Flutter framework knows which place to pick assets from. The pubspec.yaml file is a metadata file. The closest thing on Android would be the application-level Gradle file. This pubspec.yaml file declares the package name, version, author, and so on.

Conclusion

These are the main differences I have found when working with Flutter in a short amount of time. I have to admit that I like the hot-reload concept. However, I am not used to structuring the screen with the widget tree yet. Overall, I’m having a lot of fun learning Flutter.