Flutter: Make your dart method cleaner

This is going to be a series of article where I will talk how we should write code. These are just my opinion based on some facts and experience.

In this series of article you will learn various things which will improve your code quality and standard. I will focus on making code readable and composable.

Flutter

I will be mainly focusing on Dart as well as Flutter. So if you are from other programming background then everything talked here might not be useful to you.

But most of the things are related to dart which can be applied to any other programming language also to make it better.

Method and Functions

You can apply this on any function as well as on any methods. I’ll write all the possible pattern of defining Method/Function in any Programming language.

Let me give a you a question then and let me solve this in all possible ways(which i knows). Our main focus will be on declaration part, we’ll not be talking about the body of it.

I’ll also tell best approach in my opinion. In this way you will know my way of writing code as well as the other possible approach which are being used by developers around the world.

Question

Write a method calculateBMI which will calculate BMI. The method will take two parameter weight and height in double data types. It also return the BMI in double data type.

Approach 1

This approach is very common and most of you might prefer this. There are several reason to choose this.

  • We have learnt this way in early days
  • This looks simple and straight forward
  • This is being taught in most of the books

There is some problem with this pattern.

bmi-1.dart 
/*
    @params heigh is in Meter
    @params weight is in Kilogram
*/
double calculateBMI(double height, double weight){
    double heightSquare = height * height;
    double result = weight / heightSquare;
    return result;
}

Let’s see the next approach which is popular in dart.

Approach 2

So, In dart we have named parameter. We need to wrap the parameter into curly bracket { } and it’s become named parameter. Before passing the actual value to the method/function, we need to tell the name of parameter.

bmi-2.dart 
/*
    @params heigh is in Meter
    @params weight is in Kilogram
*/
double calculateBMI({double height, double weight}){
    double heightSquare = height * height;
    double result = weight / heightSquare;
    return result;
}

This is good and make the argument independent of order. Now we can pass height and weight in any order.

// first height then weight
calculateBMI(height:1.70, weight:60)

// First weight then height
calculateBMI(weight:60, height:1.70)

This also make the parameter optional but we will not talk about that here.

Approach 3

After knowing this approach, I start loving this approach it. This approach breaks the parameter in multiline and that’s the beauty of this approach.

Suppose we have 8 or 12 parameter then we’ll find that last parameter at the right corner of screen. If you have a big screen then it’s good and if not then you need to scroll left and right to the parameters.

If We prefer this then we just need to look slightly up and slight down to find the parameters.

bmi-3.dart 
/*
    @params heigh is in Meter
    @params weight is in Kilogram
*/
double calculateBMI(
        double height,
        double weight,
    ){
    double heightSquare = height * height;
    double result = weight / heightSquare;
    return result;
}

Approach 4

This is similar to the Approach #3, there is only one difference which is named parameter. I added curly bracket { }about the parameter to make it named.

I like this more because this allow us to put n number of parameter, one above the other. It also make possible for us to provide the argument in any order.

I prefer this whenever I have more than 2 parameter in any function of method.

bmi-4.dart 
/*
    @params heigh is in Meter
    @params weight is in Kilogram
*/
double calculateBMI({
        double height,
        double weight,
    }){
    double heightSquare = height * height;
    double result = weight / heightSquare;
    return result;
}

Do you know?

Q. Do you ever noticed that in your IDE there is vertical line? I am sure you have notices that but do you know why that is there.

A. That’s there because it’s the limit of 80 character which is you should not exceed. If you want to write more code then you should break the line before that.

If you all like this then I will write more article on similar topic.

Dart Standard

In dart you can get documentation from the comment and for that you need to follow the dart recommended way of writing comment.

I have not followed the dart doc comment, If you follow the doc comment then it will generate the documentation from the comment. All this happens because of dartdoc.

Using doc comment instead of a regular comment enables dartdoc to find it and generate documentation for it.

This doesn’t mean we have to strictly follow this but if you do then it’s your benefit. You get documentation for free which will help you in long run.

Read More

Conclusion

I like the 4th approach very much but I still use the first and second approach. I write blog and make videos and using 3rd and 4th approach might confuse the beginners.

But wherever I make any project for my client or for myself I prefer 4th approach. So, Now you know when you should use the not use the 3rd and 4th approach.

I don’t know how many of agree with on the 4th approach but I like it a lot. You can share you opinion in the comment.