Flutter's Best Practices for High-Performing and User-Friendly Apps for 2023

We tend to learn once we decide to pursue a specific niche. This is our instinct. The same is applied as we grow with the App Development process. We ensure that we deliver the optimal solutions running in the market or our self-learning. So, In this blog, we shall shed some light on Flutter’s Best Practices for High-Performing and User-Friendly Apps for 2023. Let’s begin…

Here’s a list of the best and optimal approaches that we’re going to cover in this blog.

1- Use of State Management techniques
Wrapping Up

1- Use of State Management techniques

Always make sure to structure your code by following a design pattern like MVVM and MVC. Divide your code into ViewModels, Views, Repositories, Network Layer, API Endpoints, etc. In addition, we use smart State Management techniques like Bloc pattern, Provider, and GetX for stunning application performance and excellent code hierarchy.

2- Using Access Modifier _ for variables

When working with a class, whether it be stateless or stateful, the variables initialized in it must be private, denoted with _ (underscore) as it can help reduce memory load.

Some examples include:

/// Correct way
TextEditingController _emailController = TextEditingController();
String _defaultCurrency = 'Rs.';


/// Wrong way
TextEditingController emailController = TextEditingController();
String defaultCurrency = 'Rs.';

3- Upgrade packages under pubspec.yaml

If you’re making changes to an existing Flutter project or starting with a new one, always check for any outdated packages as they can cause a lot of issues in future updates.

This command will help you out.

flutter pub upgrade --major-versions

The above command checks for any outdated packages and replaces them with a suitable version without affecting the other ones.

However, if your project is enterprise-level and contains a lot of packages, you need to make sure of any breakpoints that could occur if any package version gets changed. In addition, it can break your application and can severely affect its smoothness.

4- Reducing the load of packages for optimal performance

Let’s keep up this heading too, regarding packages.

Sometimes, it happens that a developer involves some packages that are not necessary, and the task can be done without requiring such that might consume x amount of space inside the project. However, in such cases, try to reduce the load of packages and make your app perform smoothly.

5- Always create separate classes for strings, theme colors

This approach could save a lot of time for most developers (if utilized perfectly).

An application having a separate class for strings, theme colors, API-key constants, and so on can give an excellent message to other developers who could work on your project in the future. Secondly, it would look professional too.

Here’s what we need to do

strings.dart

class Strings {
  static const kAppTitle = 'Demo App';
  static const kLoginMessage = 'Please login to continue';
}

Note: It’s not mandatory to start const with the prefix K. It’s up to you.

app_colors.dart

import 'package:flutter/material.dart';

class AppColors {
  static const appPrimary = Colors.blueAccent;
  static const appSecondary = Colors.blueGrey;
}

api_const.dart

class ApiConst {
  static const String apiToken = "dummy-token";
}

No need to change it again and again. Isn’t it good?

6- Customized Widgets

Another heading represents a similar meaning to the above.

Always divide your application code into customized widgets. i.e. do not create a method inside the same class and return a Widget, instead create a new file and treat it as a Widget and initialize the variable that is being required as arguments.

By doing this, not only will your code look appealing, but it will be reduced to a few lines.

The bad approach

 Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [

          customWidget(),
          customWidget(),
          customWidget(),
        ],
      ),
    );
  }

  Widget customWidget() {
    return Center(
      child: CustomText(text: "Just a Test..."),
    );
  }

The good approach

/// custom_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_useful_tasks/widgets/custom_text.dart';

class CustomWidget extends StatelessWidget {
  const CustomWidget({Key? key, required this.text}) : super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomText(text: text),
    );
  }
}

/// previous screen
@override
Widget build(BuildContext context) {
  String text = "Now using a Custom Widget";
  
  return Scaffold(
    body: Column(
      children: [
        
        CustomWidget(text: text);
        CustomWidget(text: text);
      ],
    ),
  );
}

The response will be the same, but the code is now much cleaner.

7- Reformatting Dart Code

Always reformat your code once you’re done with it.

Write the code, and reformat it. That should be the motto.

Below are the key shortcuts you could use as per the IDE you prefer:

Android Studio

Ctrl + alt + F

Visual Studio Code

Under terminal jot down this command

flutter format .

8- Protection from taking a screenshot

This might look weird, but sometimes we need to disallow view-on-demand (minimizing application for a while) to protect our application which might contain sensitive information.

Examples of such are Banking, Payment apps, etc.

Well, using the secure_application plugin, we can do that easily.

https://pub.dev/packages/secure_application

9- Following Dart Analysis

Flutter is constantly making life easier for future developers, and for the existing ones by focusing on key areas, and clearly understanding the needs of the present times.

Under the IDE, we get to see on the console,

Flutter's Best Practices for High-Performing and User-Friendly Apps for 2023 - Dart Analysis

Any sort of unnecessary imports, duplicates, missing const keywords, uninitialized variables, print statements, async responses, etc. will show up here, and we can easily make changes to the respective files provided with its path.

10- Use of const keyword as per Dart Analysis

While the development is going on, be sure to check out dart analysis for missing const keyword placements. This can help reduce the workload of garbage collectors and will eventually lead to performance improvements.

Here’s the code snippet

ListView(
  shrinkWrap: true,
  children: [
    const SizedBox(height: 58),
    const Text(
      "Enter email address",
      style: textstyle.copyWith(fontSize: 15),
      textAlign: TextAlign.left,
    ),
    const SizedBox(height: 15),
    Text(
      "Forgot password?",
      style: textStyle.copyWith(fontSize: 15),
      textAlign: TextAlign.center,
    ),
  ],
),

Let’s proceed to the next one.

11- Using SizedBox instead of Containers

There are ideal use cases where we tend to use a placeholder (like a Container), such as in FutureBuilder, SteamBuilder, etc.

FutureBuilder(
future: _demoFuture,
builder: (context, snapshot) => snapshot.hasData ? CustomWidget(text: "Success") : Container(),
),

Since the Container is surrounded by the constraints set by its parent, it expands to fit in those constraints. However, the SizedBox doesn’t require any constraints and does not even occupy any space beyond its set height and width.

Furthermore, a SizedBox is served as a const, but a Container can’t be. Apart from that, the compiler creates efficient code when the first one is given high priority.

Wrapping Up

That’s all! Hope you enjoyed every bit of it.

So, in this blog, we got to know about Flutter’s Best Practices for High-Performing and User-Friendly Apps for 2023. In addition to that, we learned from code snippets, busted some myths, and mind-mapped ourselves to develop upcoming apps more productively.

If you think I missed out on something or want to add your point of view, please jot it down in the comments section below. I would love to know that as well.

Link to GitHub Repositories, and YouTube Channel

Read out previous blogs – Click here

Also, read Flutter’s Stateful Widget LifeCycle

Thanks for your precious time.

Flutter’s Best Practices for High-Performing and User-Friendly Apps for 2023

Table of Contents