20 Essential Flutter Tips and Tricks for Better Development 🧑‍💻

When working with Flutter, developers often encounter challenges that can slow down the development process. However, there are numerous tips and tricks that can help streamline your workflow and enhance your app’s performance. Here are 20 actionable tips to improve your Flutter development experience.

1. Organize Your File Explorer

The file explorer can get cluttered quickly. To keep it clean, you can adjust the settings in setting.json. This allows you to nest files under pubspec.yaml, creating a tidier structure.

Press Ctrl+Shift+P to open Command Palette and type setting.json.
Paste below.

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
    "pubspec.yaml": ".packages, .metadata, pubspec.lock, analysis_options.yaml"
},

You can add many files as you want. Files will be nested under your pubspec.yaml file.

2. Add Dependencies Efficiently

Instead of searching online for package versions, use the command palette to add dependencies directly.

Press Ctrl+Shift+P to open Command Palette and type Add Dependancy.
Now enter any package name.
ex: - to add provider package:

This method is quicker and ensures the latest versions are used.

3. Speed Up Code Writing with Snippets

Using the Flutter Snippet extension, you can generate code for stateful/stateless widgets, initState, dispose, and more. This tool saves time by automating repetitive tasks.

Image of Awesome Flutter Snippets vscode plugin

4. Automatically Add const Keywords

Manually adding const keywords can be tedious. Modify setting.json to

"editor.codeActionsOnSave": {
    "source.fixAll": true
}

automatically add them whenever you save your code, improving consistency and performance.

5. Optimize with Small Widgets

Instead of creating functions, define small stateless widgets. This approach is better for performance since they won’t be rebuilt unnecessarily.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        widget1(),
        widget2(),
        widget3(),
        widget4(),
        widget5(),
      ],
    ), // Column
  ); // Scaffold
}

6. Customize the Floating Action Button

To create a notch for the floating action button, use FloatingActionButtonLocation.centerDocked and a custom shape.
To make the background go behind the floating action button you can use extendBody.

return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
extendBody: true,

return BottomAppBar(
shape: CircularNotchedRectangle(),

7. Handle Errors Gracefully

Prevent the dreaded red screen by adding a custom error widget using ErrorWidget.builder.

ErrorWidget.builder = (FlutterErrorDetails details) {
    return MaterialApp(
        home: Scaffold(
            body: Center(child: Text('Custom Error Page'))
        ),
    );
};

This lets you create a more user-friendly error page.

8. Log Messages Effectively

For longer messages, use log instead of print to ensure the entire message is displayed in the terminal.

import 'dart:developer';

log('This is a long message that should be fully logged.');

9. Enhance Visual Studio Code Integration

Change colors directly in Visual Studio Code by hovering over the color code and selecting a new one.

This feature simplifies color adjustments.

10. Automatically Dismiss Keyboard on Scroll

Use ScrollView.keyboardDismissBehavior to hide the keyboard when scrolling, improving user experience.

ListView.builder(
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
)

This can be applied inside a ListView or GridView widget.

11. Use the Cascade Operator

With cascade operator .., you can chain method calls on the same instance of the object. The cascade operator allows you to perform multiple operations on the same object without needing to repeat the object name.

// a class that has two functions
class SaySomething {
  void hi() {
    log('Hi');
  }

  void hello() {
    log('Hello');
  }
}

Instead of using like below 👎:

SaySomething().hi();
SaySomething().hello();

You can use the cascade operator as follows ✅:

SaySomething()..hi()..hello();

12. Refactor Code for Center Alignment

Wrap your text with a Center widget using the refactor option in Visual Studio Code for better alignment.

Right click on the component, and select Refactor option or press Ctrl+Shift+R.

Then you will get a list of items that you can wrap around the widget to refactor your code.

13. Use the Overflow Bar

An OverflowBar behaves like a Wrap but switches between row and column layout depending on the available space.

OverflowBar(
  children: [
    ...list
  ],
), // OVerflowBar

OverflowBar will act like a row until every widget can render inside a row.

Otherwise, it will act like a column making the UI more responsive.

14. Access Device Calendar

Use showDatePicker to easily integrate a date picker in your app, providing users with a familiar interface.

DateTime? _newDate = await showDatePicker(
  context: context,
  initialDate: _dateTime,
  firstDate: DateTime(1800),
  lastDate: DateTime(3000),
);

15. Manage Layout Responsively

With LayoutBuilder, you can obtain the height and width of the available space, making your UI more adaptive.

LayoutBuilder(
  builder: (context, box) {
    return Center(
      child: Text(
        '${box.maxHeight.round()} x ${box.maxWidth.round()}',
      ), // Text
    ); // Center
  },
), // LayoutBuilder

16. Protect the UI with Safe Area

Avoid overlapping content with the status bar by using the SafeArea widget.

return SafeArea(
  child: Scaffold(
...

17. Create Adaptive Widgets

Use SwitchListTile.adaptive and Icons.adaptive to ensure your UI looks native on both Android and iOS.

SwitchListTile.adaptive(
  value: _value,
  onChanged: (bool value) {
    setState(() {
      _value = value;
    });
  },
  title: Text('Adaptive Switch'),
)

18. Monitor Performance in Real-Time

Enable showPerformanceOverlay under MaterialApp to monitor your app’s performance and identify bottlenecks.

MaterialApp(
   showPerformanceOverlay: true,
)

19. Debug API Calls with DevTools

Instead of printing API responses, use the browser’s DevTools network tab to inspect API calls more thoroughly.

Press Ctrl+Shift+P to open Command Pallete and type Dev Tools.

In the right side, `Response` tab you can see the response in JSON format.

20. Utilize Marketing Tools for App Preview

Use services like Previewed.app to generate high-quality images for app store listings, enhancing your app’s visual appeal.

These tips will undoubtedly improve your efficiency as a Flutter developer, allowing you to write cleaner code, reduce errors, and build more responsive and performant apps.