Tips and Tricks for Coding with Flutter

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Naming Convention

Libraries, packages, directories, and source files should be in lowercase with underscores in between words like this:

library dart_dynamic_links;

import 'socket/socket_manager.art';

Classes, enums, extension names, and typedefs should start in uppercase like this :

class MainSection {...}

enum ItemSelectionTemp {...}

extension MyList<F> on List<F> {...}

typedef Definition<D> = bool function(D value);

Constants, variables, parameters, and named parameters should start with lowercase then the other words start with uppercase just like this example:

const magazinePrice = 4.20;

var itemsOfSchools;

final urlPlacement = RegExp(‘^([a-z]+):');

void magSum(int magazinePrice) {...}

Specify Types for Classes Members

It’s important that you always specify the type of member when the values are known. You should avoid using var when possible.

int days = 22;

final vehichle car = vehichle();

String name = 'Kevin';

const int timeUntilEnd = 120;

User Relative Imports

To avoid confusion and problems down the line it’s best practice to use the relative method of importing libraries in lib/ folder.

Don’t do this:

import 'package:demo/src/utilis/firebase_utilis.dart';

Instead, do this:

import '../../../utilis/firebase_utilis.dart';

Use ?? and, ? Operators

You should use ?? (if null) and ?. (null aware) operators instead of the null checks in conditional expressions.

Don’t do these:

v = x == null ? y : x;

v = x == null ? null :x.y;

Instead do these:

v = x ?? y;

v = x?.y;

Avoid Using the ‘as’ Operator

Generally, the ‘as’ operator throws an exception if the cast is not possible, to avoid that you can use the ‘is’ operator.

Don’t do this:

(item as Vehichle).name = 'BMW';

Instead, do this:

if (item is Vehichle)

item.name = 'BMW';

Use the ‘if’ Condition Instead of Conditional Expression

Several times we need to render a widget based on some conditions in Row and Column. If conditional expression return null in any case then we should use it if condition only.

Don’t do this:

Widget getText(BuildContext context) {

return Row(

children: [

Text(“Hi”),

Platform.isAndroid ? Text(“MediumAndroidReader”) : null,

Platform.isAndroid ? Text(“MediumAndroidReader”) : SizeBox(),

Platform.isAndroid ? Text(“MediumAndroidReader”) : Container(),

]

);

Instead, do this:

Widget getText(BuildContext context) {

return Row(

children:

[

Text(“Hi”), if (Platform.isAndroid) Text(“MediumAndroidReader”)

]

);

}

Use The Cascades Operator

If you don’t intend on performing a sequence of operations on the same object then you should use the Cascades(..) operator.

var street = Street()

..lineTo(0, size.height)

..lineTo(size.width, size.height)

..lineTo(size.width, 0)

..close();

Use Raw Strings

You should use raw strings to avoid escaping backlashes and the dollar signs.

Don’t do this:

var text = ‘This is a demo string \\ and \$ is not raw’;

Instead, do this:

var text = 'This is a demo string \\ and \$ is raw';

Use Spread Collections

Using spread collections will simplify the code for you when the existing items are already stored in another collection.

Don’t do this:

var a= [4,5,6];

var b= [1,2];

a.addAll(b);

Instead, do this:

var a= [4,5,6];

var b= [1,2,...y];

Don’t Initialize Variables as Null

Variables in Dart are automatically initialized to null when its values is not defined so you don’t need to do that.

Don’t do this:

int maxPage = null;

Instead, do this:

int maxPage;

Avoid ‘print()’ Calls

When you use the ‘print()’ and the log output is too long, sometimes Android discards some of the log lines. To avoid that always use the ‘debugPrint()’.

Use ‘ListView.builder’ for a Long List

If you are working with large or infinite lists, it’s usually advised that you use the ListView builder to improve performance. The default ListView constructor builds the whole list at once which could be intensive and take some time. That’s why we use the ListView.builder which creates a lazy list that loads when the user scrolls down, and Flutter builds the widget on-demand.

Closing Thoughts

I hope that some of these tips help you write cleaner code and improve your applications. If you have any suggestions or other things to add leave a comment down below.