Dart and Flutter, Imperative, or Declarative

Dart is the programming language used to code Flutter apps. Therefore, We need to learn Dart either before learning Flutter or alongside. However, there are lot of questions that come to our mind.

Can I learn Flutter without Dart? Is learning Dart is important for learning Flutter? Dart and Flutter, are they Imperative or Declarative?

These questions keep haunting Flutter learners. Certainly, we want to create either Web App, or Mobile App. And that is the first reason why we learn Flutter.

As a result, when we start learning Flutter, these questions pop up.To be precise, during learning Flutter, we find that there are specific programming concepts that we need to understand firstly.

Secondly, we find, data structure plays a key role in building any small or big Flutter App. Without learning Dart List and Map we cannot accomplish that.

Finally, we get convinced that without learning Dart we cannot proceed to learn Flutter.

Why Flutter uses Dart

The first and foremost reason is Dart allows Flutter to use a separate declarative layout language like JSX and XML. Another reason is quite obvious, the Flutter SDK is written in Dart.

However, while we start learning Dart a few basic questions come up.

Flutter uses Declarative style. However, Dart programming language is multi-paradigm. That means, it supports imperative and declarative style both.

In fact, in many cases, code uses both. Therefore we cannot draw a black and white separation between them.

In this section, we will clarify this confusion first. Because we must know what does the term imperative mean. Besides, we will also learn what does declarative programming mean.

Imperative vs Declarative

.For instance, we can start with a simple list of numbers. From this list of numbers we will have to choose only odd numbers.

With imperative programming, we will step through some instructions. In natural language, our algorithmic expression will be like the following.

  • Create a List of numbers.
  • Create a blank list.
  • Step through each number in the list that has some numbers.
  • Check through each number, if it is odd, add that number to the blank list.

In imperative style the we can write this code .

main() {
  
  List<int> myCollection = [1, 2, 3, 4, 5] ;
  
  List<int> results = [];
  
  for(var num in myCollection){
    if (num % 2 != 0) {
      results.add(num);
    }
  }
  
  print(results); // [1, 3, 5] 
  
}

If we go through the logic-flow, what do we see?

We are giving some instructions.

In natural language, such as in English, we have encountered imperative mood where a verb is used to form a command or request.

Consider this example: “do it”, or “Leave” and many more.

Mostly it is directed towards a second person. But in some certain contexts, it can involve first or third persons, such as, “Let’s do it”.

The same way, an imperative programming also comprises of certain commands. A set of instructions that focus on how a program should operate.

Exactly that happens above.

In declarative programming, on the other hand, we describe what we want. Actually, to be precise, we express our desire to get an output. And we write code that describes it clearly.

We do not declare a step by step instructions.

Let us see the same program in declarative style.

main() {
  
  List<int> myAnotherCollection = [1, 2, 3, 4, 5] ;
  
  var checkResults = myAnotherCollection.where( (int num) => num % 2 != 0);
  
  print(checkResults); // (1, 3, 5) 
  
  
}

What is the key difference?

We’re only saying, ‘find everything where it is odd.’ We’re not providing any instructions how to do that.

Because, Dart knows how to do that. We’ve earlier said that Dart is a mixture of imperative and declarative style.

In some cases, we need to use them both.

The advantage of declarative style is, it wraps the imperative programming instructions under a higher abstraction. Therefore, we do not have to worry about the inside-logic anymore.

As a consequence, the declarative style looks more like a natural language.

Flutter is Declarative

Flutter tool or framework is fully declarative. The Widgets and ts properties always describe what they want.

Consider a Flutter App first.


Flutter theme changes entire app design
Flutter theme changes entire app design

Now, let’s take a look at the code snippet.

return Scaffold(
      appBar: AppBar(
        title: Text(
          'Playxis - Play + Lexis',
          style: QuizTheme.appbarStyle,
        ),
        backgroundColor: QuizTheme.shrinePink300,
      ),
...

Every Widget has some properties that expect or describe what they want.

The “appBar” property of Scaffold Widget describes that it wants an AppBar Widget.

Things go on like this and each time build() method rebuilds the state if a button is pressed and old instance is destroyed.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter

Comments

Leave a Reply