5 Flutter Tips for Beginners

  • 2020-03-20 01:07 AM
  • 184

5 Tips To Know Before You Start Developing Your App with Flutter

1. Always cancel your stream subscription:

When I started learning Flutter, I did not always think about canceling my stream subscription because that was something I never heard about.

But what I learned is that even if your widget is no longer alive, well, your stream subscription still is! And that can become a major issue when the widget is re-created a certain number of times, leading to possible process overload!

To prevent that, you could just add a conditional block that checks if the widget is mounted, but that would still result in a useless loss of performance.

So to prevent that here is how you should manage your stream subscription in Flutter:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  StreamSubscription _streamSubscription;
  
  int _counter = 0;
  
  @override
  void initState() {
    super.initState();
    
    _streamSubscription = Stream<void>.periodic(Duration(milliseconds: 500)).listen((void _) {
      setState(() {
        _counter++;
      });
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Text(_counter.toString());
  }
  
  @override
  void dispose() {
    super.dispose();
    
    _streamSubscription.cancel();
  }
}

But the easiest way can sometimes be to just use a StreamBuilder. It is a very powerful widget that will manage the state of its child depending on the stream provided!

Read Also: Flutter: Adding Bluetooth Functionality

2. Do you want to access the current Navigator state from anywhere in your app? Here is how:

Let’s say that whenever the user receives a certain type of notification, you want to push a view corresponding to the notification.

The problem would be that you don’t have access to any BuildContext object which will result in no way to access the current instance of the Navigator.

The solution is to create an instance of GlobalKey and store it in a global variable anywhere you want. Then simply specify that the navigator key parameter of your MaterialApp instance should be this variable.

Now you can simply access the current Navigator state by using the GlobalKey!

Read Also: Flutter Todos Tutorial with “flutter_bloc”

3. Always Use Final Variables In Your Stateless widgets.

It can sometimes be tempting to instantiate non-final variables in stateless widgets but that’s something you should always avoid because stateless widgets are immutable which means that they are not supposed to change even a bit!

If you need a non-final variable, consider using a Stateful widget instead!

Read Also: Let’s Develop a Mobile App in Flutter

4. Flutter can be quite verbose, don’t be lazy, think of what’s ahead!

If you already work with Flutter in your daily life, you probably know how Flutter can be extremely verbose, making you re-write the same code over and over!

But, instead of being lazy and just copy-pasting your code, you should create reusable widgets! That will save you a ton of time and make your code more maintainable!

Read Also: Build a CRUD app using Firebase and Flutter (Provider)

5. Use const Constructors when you cant

Did you even know that Dart had a const constructor? A const constructor is pretty useful in terms of performance and the reason for it is simple!

Let’s say that you create a simple text widget that displays ‘Hello World’. You want to display this text in different places of your app but the thing is that you don’t want to instantiate it more than once.

The solution that may come to your mind if you never heard about const constructors would be to define a global variable containing the text widget. But this solution is not really… esthetic.

As you probably guessed it, the good solution here would be to use a const constructor! A const constructor will store the instance and returns it wherever you create the same instance of your class with a const constructor!

So basically, you will only have one instance of your text widget if you always use it with a const constructor, no matter how many times you ‘instantiate’ it in your code.

I hope you liked this article :)

Suggest