Developed by Google Flutter is an open-source UI software development kit. There are many Flutter Tips, Tricks, and Techniques for 2021 which will make your development process easy and fun. It is being used to build software from a single codebase for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web. If you need to build any mobile application using Flutter you can give us a knock or if you are developing yourself here are 10 Quick Flutter Tips, Tricks, and Techniques. 

1. Dismiss Keyboard Using Flutter 

To dismiss Keyboard, we have to set focus on a different node as shown in the example below using the Gesture Detector.

GestureDetector(                                                                                                     	
          onTap: () {
                        FocusScope.of(context).requestFocus(FocusNode());
              },
              child: Container(
                   color: Colors.white,
     	          child:  new Column(
                       mainAxisAlignment:  MainAxisAlignment.center,
                       crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                       TextField( ),
                       Text("Test"),                            	
                 ],
            )
       )
   );

2. Add Timer using Flutter

If you need to execute a piece of code after some time in Flutter you have to use Timer class. Timer class will allow specifying the time which you need to delay the execution and after that time period code will be executed inside the Timer.

void periodic() {
Timer.periodic(
    Duration(seconds: 1),
       (Timer time) {
	print("time: ${time.tick}");
       if (time.tick == 5) {
    	time.cancel();
    	print('Timer Cancelled');
         }
      },

   );

}

3. Show Item Separately From ListView Using Flutter

ListView makes its children scroll. Most of the time, we require a separator to distinguish between every child of ListView. This separator is basically a divider, which can be a line. 

ListView.separated(
  itemCount: data.length,
  separatorBuilder: (BuildContext context, int index) => Divider( height: 3, color: Colors.white),
  itemBuilder: (BuildContext context, int index) {
	return Container(
  	height: 150,
  	color: Colors.red,
  	child: Center(
   child: Text('${data[index]}'),
),
      );
   }
)

4. Create a circle shape image using Flutter

ClipOval widget clips the child widget in oval or circle shape. We can reshape the child
widget by changing width and height. If width and height are equal the shape will be circular. If the width and height are given differently then the shape will be oval. Let’s understand this with the help of an example:

ClipOval(
   child: Image.network(
       imgUrl,
       fit: BoxFit.fill,
       width: 190.0,
       height: 190.0,
   ),
);

5. Refactor code using Flutter

When you start your layout and know for sure some UI components will be custom, but you have no time to implement them yet: create dummy Containers:

ButtonContainer(child: child).

It serves as a proxy. Later it will be super easy to refactor the code

6. If Null Operator (??)

Checks If something is null. If it’s not null it returns its own value but if it’s null it returns the value after ?? return abc ?? 10; // returns 10 if abc is null else returns its own value.

It also has a shorthand assignment when it’s null.

abc ?? = 5  // assigns 5 to abc if it’s null

7. 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!

8. Set the background image to your Container using Flutter

Want to set the background image to your Container? And you are using a Stack to do so? There is a better way to achieve this result. You can use decoration to set the image in the container.

Container(
  width: double.maxFinite,
  height: double.maxFinite,
  decoration: BoxDecoration(   
    image: DecorationImage(
      image: NetworkImage('https://bit.ly/2oqNqj9'),
    ),
  ),
  child: Center(
    child: Text(
      'Flutter.dev',
      style: TextStyle(color: Colors.red),
    ),
  ),
),

You can provide Images according to your need, also you can use the box decoration properties to provide shape and border.

9. Knock Out the iPhone Notch with Safe Area Using Flutter

It’s a horrible feeling when some of your content is getting cut by the iPhone X notch. The same could happen in Android. Consider using the SafeArea widget can keep the pesky notification bars and phone notches from encroaching on your app’s UI. It uses a MediaQuery to check the dimensions of the screen and pads its child Widget to match, making sure your app is safe on both iOS and Android!

10. Write Cleaner Code Using the Spread Operator with Flutter

The Dart 2.3 introduced a few useful features and one of them I like is the Spread operator. This is very useful when you need conditional UI widgets. Especially when you have nested conditional UI Widget.

Stack(
   alignment: Alignment.center,
      children: <Widget>[

 	if (_visible) ...[

      	   spaceAnim(),
      	  //Nested if-else

      	if (_visible) ...[
          	   spaceAnim(),
      	] else ...[
          	   galaxyAnim(),
       	],

 	] else ...[
     	  galaxyAnim(),
     ],
  ],
),

Flutter is an absolute lifesaver when it comes to developing eye-catching applications on IOS and android. Here at Augnitive, we have some top tire Flutter developers who have developed a passion for Flutter. If you have any questions or if you are looking for a bit of help don’t hesitate to get in touch.