From Creating Layout with XML to Declarative UI in Flutter

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.indigo,
      ),
      body: MyButton(),
      backgroundColor: Colors.blue,
    );
  }
}

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!"),
        ),
      ),
    );
  }
}

No layout preview.

Image resource and fonts.

Conclusion