5 Simple Dart & Flutter Tricks

13th Feb, 2021

Hey! Welcome back to the Chai blog. In this post I’ll try my best to explain a few cool tricks which might make your life a little easier when using Dart & Flutter.

1. Snippets

Find yourself typing the same chunk of code over and over again?

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFF2DBD3A));
  }
}

Most of us already use the provided snippets for StatelessWidget etc., but you can configure your own snippets: in your IDE you can configure the shortcut you want to use (e.g. “stlss”) and the code it should product (e.g. the StatelessWidget above).

Here is a brilliant plugin for both Android Studio and VSCode

Configure your own in VSCode

Select User Snippets under File > Preferences (Code > Preferences on macOS)

{
  "Scaffold widget snippet": {
    "prefix": "fscaff",
    "body": [
      "Scaffold(",
      "  appBar: AppBar(",
      "    title: Text('${1:Title}'),",
      "  ),",
      "  body: ${2:Container()}${0},",
      ");"
    ],
    "description": "Scaffold widget snippet"
  },
}

Configure your own in Android Studio

Android Studio has a nice GUI which allows you to do this. See some IntelliJ docs here and a cool article here.

2. ColorFiltered

Again, this is probably something you’re already aware of but it’s super cool!! ColorFiltered class - widgets library - Dart API

In Flutter it’s easy to completely change the color of an image, which can be useful for things like icons.

Image.asset(
	'assets/my_image.png',
	color: Colors.pinkAccent,
)

For images which aren’t simply a block of color, it can be helpful to use the ColorFiltered widget!

ColorFiltered(
	colorFilter: ColorFilter.mode(Colors.pink, 	BlendMode.modulate),
	child: Image.asset(
		'assets/my_image.png',
	),
)

3. If Null operators: ?? and ??=

var notNullVar = 1;
print(notNullVar ?? "variable is null")
// Output: 1
var nullVar;
print(nullVar ??  "variable is null")
// Output: variable is null

var username;
username??="Christie" //assigns "Christie" to username if it's null

4. Method cascades

This official Dart language article explains method cascades very nicely, but I’ll briefly summarise it here too.

Instead of

myList.add(“item1”);
myList.add(“item2”);
// add again and again…
myList.add(“itemN”);

We can write

myList..add(“item1”)..add(“item2”)..add(“item3”);

5. Controlling build() performance cost

If you have a large Widget with a large build() function, try splitting it up taking into account how the components change.

When setState() is called on a State, all descendent widgets rebuild. Therefore, localize the setState() call to the part of the subtree whose UI actually needs to change.

Calling setState() high up in the tree is not efficient if the change is contained to a small part of the tree.

Conclusion

Thanks for reading! Hope this was helpful to you in some way. Naturally, these tips are very much targeted towards beginners, seeing as it was only about 3 weeks ago that I used Flutter for the first time myself.

See you next week!