Tips & Tricks To Speed Up Flutter

The increasing number of people shopping on smartphones has prompted many web based ecommerce businesses and also for those who are planning to build a new one to shift their focus on mobile app. Over the years, internet users have gradually migrated from desktops to handheld gadgets which include phones and tablets for their online purchases.

On the flip side, building a shopping app for Android and iOS can be a pricey affair. Businesses need to understand that app development costs money, and therefore investing in both these platforms can really burn a huge hole in the pocket. Fortunately, there is a cost effective solution.  Flutter!

Launched in 2016 by Google, Flutter is a unique framework, a tool which allows developers to build mobile apps which are natively compiled and therefore a single source code or code base can be used for different operating systems such as Android & iOS. Flutter is the first choice of developers when it comes to cross platform apps.

Interestingly, Flutter exploits DART, a highly flexible and light weight programming language which is comparatively easy to interpret, compile and of course decode. In spite of being fast, robust there are a few tricks which Flutter developers frequently use to accelerate the development process further. Some of the popular ones are mentioned below.

Set List Datatypes –

Dart, the dominant language of Flutter supports various Datatypes. Common Datatypes include LIST & SET. Incidentally, LIST & SET are same but differ on two grounds. Whilst LIST is ORDERED, SET is UNORDERED. Moreover, every value in SET is UNIQUE. Here is an example. 

final citiesSet = {

  ‘Denmark’,

  ‘France’,

  ‘United States’,

  ‘Denmark’,

};

In the above example ‘Denmark’ is used twice. However, by using the SET DATATYPE, one can easily override the compilation error caused by duplicate variable.

Super Easy Widget Building –

Flutter uses DART language which in turn has a reservoir of Classes and Methods which can be exploited repeatedly to build widgets and other commonly used project functions. For example, by just typing streamBldr and singleChildSV Flutter creates StreamBuilder Widget or SingleChildScrollView Widget on the fly. These powerful code snippets enhance productivity and shorten app development timeline. Moreover, it can also be used in Android Studio or VSCode. Now, isn’t that an interesting trick?

Extensions –

Flutter allows developers to build extensions. These predefined functionalities help reduce redundancy. Repeating the code in Flutter is never appreciated or approved and therefore most developers create extensions and then use them at appropriate places. The lean and mean code translates into a highly reactive, fast and error free application. Interestingly, extension was introduced Dart 2.7 version and typically allows developers to add functionality to existing libraries and classes. So, use them often and trim your code base.

Double Dots – Reduce Code –

The Cascade Operator in DART allows developers to perform a sequence of operations on the same project. You can reduce code writing drastically using cascade operators. Interestingly, you can also perform function calls using double dots cascade operator. The same applies to (.) single dot.

void noCascade() {

  var sb = StringBuffer();

  sb.write(‘hello\n’);

  sb.write(‘world!\n’);

  sb.write(‘a\n’);

  sb.write(‘b\n’);

  sb.write(‘c\n’);

  sb.write(‘d\n’);

  sb.write(‘e\n’);

  print(sb.toString());

}

// sample code that makes use of cascade operator

void cascade() {

  print((StringBuffer()

        ..write(‘hello\n’)

        ..write(‘world!\n’)

        ..write(‘a\n’)

        ..write(‘b\n’)

        ..write(‘c\n’)

        ..write(‘d\n’)

        ..write(‘e\n’))

      .toString());

}

main(List args) {

  noCascade();

  cascade();

}

Get and Set –

These are special attributes that provide accessibility to an object’s properties. It could be read, write or both. In short, SET method is exploited to set up or initialize class field while GET method is used to extract the same. Here is an example.

class Team {

   String empName;

  }

   String get emp_name {

      return empName;

   }

   void set emp_name(String name) {

      this.empName = name;

   }

  } 

void main() {

   Team emp = new Team();

   emp.emp_name = ‘John’;

   print(“Dart Getters and Setters Example.”);

   print(“Team Employee’s Name Is : ${emp.emp_name}”);

  }

Flutter Files –

Flutter app development has basic template which need not be written every time. The boiler plate files can be easily accessed by right clicking on the directory within the Flutter development tool. A great way to reduce time spent on creating just an overall shell. Exploit it for your projects and speed up development process.

Log Files –

Log files are a great way to check on the history of accomplished tasks, changes made to the code over definite timeline / session. This is especially beneficial if you are working as a collaborative team. Simply click the ‘flutter logs’ command and then run the app. Once the team or you have accomplished certain tasks run ‘flutter logs’ again to see the changes made to the earlier code. It is a great feature to decode or narrow down errors occurring due to recent changes.

Spread Operator –

The spread operator is an intuitive and quick way ( Syntax ) for adding items to arrays and even combining it with arrays. Its other application areas include conditional UI Widgets with variable parameters in templates or in nested templates of conditional UI Widgets. Spread operator enhances coding speed as well as reduces the overall size of the app. One of the simplest examples is mentioned below.

arr1 = [1, 2, 3];

arr2 = […arr1, 4, 5, 6]

// arr -> [1, 2, 3, 4, 5, 6]

Bracket Pair Colorizer –

Functions, widgets and classes use innumerable number of brackets. Flutter developers are known to code rapidly because their brain has drawn up the syntax and the flow, and therefore it needs to be quickly transferred onto Flutter code window. In such a scenario missing out opening or closing parenthesis is a common mistake. Imagine, that after writing hundreds of lines of code the compilation fails, and the reason could be just a missing bracket. Bracket pair colorizer can come in handy in such situations. Finding out that solo special character is quick and therefore saves lots of time and efforts.

Summary –

Flutter allows even non-creative folks to build attractive UI’s quickly and efficiently. Text graphics, layouts and other aesthetic attributes can be designed with built-in App plugin. So, create magic around your app with some of the most intuitive widgets that Flutter provides, and at the same time exploit open / hidden features to enhance productivity.