Understanding the difference between declarative and imperative UI design in FLUTTER 💙

Did you know the difference between imperative and declarative UI design in Flutter?. If you don’t know, are you here newly? Give me 2 minutes, and I will tell you what it is in a simple manner with a real-time example.

Imagine you want a coffee.

So, you ask a friend to make it, and here you tell him step by step to prepare coffee. This is totally imperative. Because here you tell him what to do and how to do it step by step.

Similarly, you ask a friend, like, “Hey, Abie, I want coffee…“ Next, you don’t worry about the coffee. This is his work to do. He will prepare the world’s best coffee for you. This is totally declarative. Because here you simply say what to do. That’s all.

Similarly, instead of coffee, we are applying in apps. Let’s see what the declarative and imperative UI in Flutter are, what the exact designs are, and where we will use these designs.

Imperative vs. Declarative UI in Flutter:

Imperative UI?

We are writing the code to change the UI manually when something happens, like updating the text widget’s value (label) every time a button is pressed.

Widget build(BuildContext context) {
  var textWidget = Text('Initial Text');
  if (userInteracts) {
    textWidget = Text('Updated Text');
  }
  return Container(child: textWidget);
}

In the above example, we update the text value manually based on the condition. So this is imperative.

Declarative UI?

Similarly, we are describing how the UI should be based on the respective state, and Flutter rebuilds the state automatically based on the respective state.

class MyWidget extends StatelessWidget {
  final String text;

  MyWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(text),
    );
  }
}

Here, we're just passing the text as a parameter of the MyWidget. Based on the state changes, Flutter takes care of the UI changes.

When to Use Each Approach?

Declarative UI:

• Flutter’s recommendation: easy and maintainable.
• When you want to update the UI based on the state.

Imperative UI:

• When you want the full control of the UI and lifecycle updates.
• For complex and low-level animations.

In summary:

• Declarative UI, we tell what you are going to do. But, in ImperativUI, we tell how to do and what to do.
• Flutter for declarative UI. But, it supports imperative UI as well to get more control of the UI.