10 Ways to Avoid Mistakes When Developing Flutter Apps

Flutter is a great resource for developing mobile apps. Similar to any programming project, one small mistake can cause big issues. Make sure to follow these ten guidelines to avoid mistakes in your Flutter app.

Put capital letters where they belong

The Dart language is case-sensitive. Don't type Class when you mean to type class. Don't type Runapp when you mean to type runApp.

Use parentheses when (and only when) they're appropriate

Remember the difference between _incrementCounter with parentheses:

void <strong>_incrementCounter()</strong> {
floatingActionButton: FloatingActionButton(
 onPressed: _incrementCounter,
 tooltip: 'Increment',
 child: Icon(Icons.add),
)

and _incrementCounter without parentheses:

floatingActionButton: FloatingActionButton(
 onPressed: _incrementCounter,
 tooltip: 'Increment',
 child: Icon(Icons.add),
)

Limit access to Dart variables

Wherever you can, avoid declaring top-level variables. To keep other files from changing your file's variables, start variable names with an underscore.

Call setState

If you press a widget and nothing happens, look for a method with a missing setState call.

Make adjustments for indices starting at zero

To make values start with 1, you have to add 1:

return ListView.builder(
 itemCount: 25,
 itemBuilder: (context, index) => ListTile(
  title: Text('Rocky ${index + 1}'),
  onTap: () => goToDetailPage(index + 1),
 ),
);

Use the Expanded widget

When your test device displays black-and-yellow stripes or an empty screen, the layout you've coded is causing trouble. Consider wrapping one or more widgets inside Expanded widgets. Sometimes, it works wonders for your Flutter app.

Add itemCount to your ListView.builder

Without an itemCount parameter, the list of items never ends.

Add imports when they're required

For example, if you want to use Dart's math library, start your file with

import 'dart:math';

If your Flutter app pulls data from the Internet, add this line to the top of your file:

import 'package:http/http.dart';

Declare assets and dependencies in pubspec.yaml

To display brokenheart.jpg and heart.jpg on the screen, add some lines to your Flutterproject's pubspec.yaml file:

assets:
 - brokenheart.jpeg
 - heart.jpeg

To get data from the Internet, add http to the file's list of dependencies:

dependencies:
 flutter:
  sdk: flutter
 http: ^0.12.0+4

And remember, in a pubspec.yaml file, indentation matters.

Indent your code according to Dart language guidelines

Code that's not properly indented is difficult to read and difficult to maintain. Format your code by selecting Code→Reformat Code from Android Studio's main menu.

Want to learn more? Check out our Flutter Cheat Sheet.