Top 5 Flutter Tips You wish you knew earlier!

In this article we will discuss about the top 5 flutter tips and tricks that will help us build better apps.

🎥 Video Tutorial

🔭 Implementation

In order to view all the changes or if you happen to face issues with any of the tip which we are about to discuss, then make sure you have the latest flutter SDK installed in your device or try upgrading your flutter sdk to the latest one.

→ Tip #1

Rendering multiple widgets under single conditional statement.

In dart we won’t be able to wrap two or more widgets under single conditional statement inside the build method. Moreover we won’t be able to group them using curly bracket as well.

if(condition)
  widget1(), //condition applies for only widget1
widget2(),

Therefore in order to achieve this we go for wrapping them using square bracket [] and make use of the spread operator (…) to group two or more widgets under single conditional statement.

 if (condition) ...[
 const widget1(),
 const widget2()
],

→ Tip #2

Fractionally SizedBox

This widget may not be popular for most of us but it greatly helps us to build more responsive apps using Flutter.

Using this Fractionally Sized box we can easily resize any widget based on the available space. Though we can use MediaQuery to do the same but the difference is that while using MediaQuery it determines the entire device space and not the space which is empty.

Therefore as an example, if we want to set our container widget height and width as 50% of available space then the code is as follows.,👇

FractionallySizedBox(
          widthFactor: 0.5,
          heightFactor: 0.5,
          child: Container(
            color: Colors.red,
          ),
        ),

→ Tip #3

Dart Fix

If you are tired of fixing all the issues shown in the problems tab 👇 of your VS Code and wish for a quick and easier way to do it, We got a solution!

Open the terminal and run the below command👇.

dart fix --apply

This will fix all the know problems that are listed down in the problems tab. Thereby helping us to focus more on development rather than fixing bugs.😉

→ Tip #4

Returning multiple values from Function call.

We might be able to return a single value from any function call but have you wondered how to return two or more values simultaneously from the same function using the return statement?

In order to return multiple values from a function, we need to group them using curved bracket and also update the return type of the function as follows., 👇

  (int, int, {int no3, int no4}) multipleReturns() {
    int no1 = 2;
    int no2 = 4;
    int no3 = 6;
    int no4 = 8;

    return (no1, no2, no3: no3, no4: no4);
  }

Here we try to return 4 integer values (2 positional arguments and 2 named arguments). Now in order to access these values from the fun call, we make use of the ‘$’ symbol for positional and “name” in case of named arguments as shown below 👇

 var temp = multipleReturns();
 print(temp.$1);
 print(temp.$2);
 print(temp.no3);
 print(temp.no4);

→ Tip #5

Grouping multiple functions together.

Now consider the below code where inside the onpress event of the elevated button we try to call two different methods.

ElevatedButton(
          onPressed: () async {
              await method1();
              await method2();
            },
          child: const Text('Click'),
        ),

Here in order to group these two individual methods in a single line we can wrap them using the square bracket [] as shown below 👇 to convert them as a single list of method. This will help increase the code quality without affecting the logic.

ElevatedButton(
          onPressed: () async => [await method1(), await method2()],
          child: const Text('Click'),
        ),

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://www.youtube.com/watch?v=nTqYJ6nLO_c

Get the complete source code here:👉 https://github.com/vijayinyoutube/flutter_tips

Check out all my Flutter related blogs here.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

Pay Vijay R using PayPal.Me

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,