How To Deal With Unwanted Widget Build In Flutter?

The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.

In this blog, we will explore How To Deal With Unwanted Widget Build In Flutter. We will also implement a demo of the unwanted widget build-in flutter and how to use them in your flutter applications. So let’s get started.

Table Of Contents :

Unwanted Widget Build In Flutter

Code Implement

Code File

Conclusion

Unwanted Widget Build-In Flutter :

The flutter build method in flutter describes the user interface represented by this widget when it is inserted in the build context provided in the widget tree and the dependency of the widget is changed. The build method is designed in such a way that it is without side effects It should be because many new widgets can be triggered such as root pop/push, screen size, etc. There are some ways to stop this unwanted widget build calling. Let’s talk about it below.

Now we will use some method to prevent the unwanted build calling which is as follows

• Create a child Stateful class to create a UI using any widget.
• Using the provider library, We can stop unwanted build method calling.

In these below situation build method call

• After calling initState()
• After calling didUpdateWidget()
• When setState() is called.
• When the keyboard is open
• and When screen orientation changed
• Parent Widget is built then child widget is rebuild

Code Implement :

You need to implement it in your code respectively:

First of all, we will see how this causes the effect of unwanted widget build. We should understand the design of the widget without any side effects instead of stopping any build call. Let’s understand this with the help of a reference

Future<int> intValue;

@override
void initState() {
intValue = Future.intValue(20);
super.initState();
}

@override
Widget build(BuildContext context) {
return FutureBuilder(
future: intValue,
builder: (context, snapshot) {
return Column(
children: [
Text(
'$intValue',style: TextStyle(fontSize: 15),),Container(
margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
onPressed: () {
intValue.value += 1;
},
child: Text('Click Me'),
textColor: Colors.white,
color: Colors.green,
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
)), ],
),
},
);
}

This reference uses FutureBuilder in which if you re-invoke the build method, it will trigger the request by requesting an unwanted widget build method.

Now in this screen, we will see how to deal with the build of the unwanted build as we have used the ValueListenableBuilder class inside the column widget in this screen which allows us to rebuild some of the widgets we need and discard the expensive widgets.

Let us understand this with the help of a reference.

We will add ValueListenableBuilder() method. In this method, we will add a builder means a valueListenable-independent widget that is passed back to the builder. This argument is optional and can be null if the entire widget subtree the builder builds depends on the value of the valueListenable. We will pass parameter context, integer value, and widget child.

ValueListenableBuilder(
builder: (BuildContext context, int value, Widget child) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: [
Text(
'Pushed the button this many times',
style: TextStyle(fontSize: 15),
),
Text(
'$value',
style: TextStyle(fontSize: 15),
),
],
),
SizedBox(
height: 30,
),
AnimatedBuilder(
animation: animationController,
child: child,
builder: (context, child) {
return Transform.rotate(
angle: animationController.value * 6.3,
child: child,
);
},
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
onPressed: () {
startRotation();
_countClick.value -= 1;
},
child: Text(' Start Rotation'),
textColor: Colors.white,
color: Colors.pink.shade300,
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
)),
Container(
margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
onPressed: () {
stopRotation();
_countClick.value += 1;
},
child: Text('Stop Rotation'),
textColor: Colors.white,
color: Colors.green,
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
)),
],
),
],
);
},
valueListenable: _countClick,
child: FlutterLogo(
size: 150,
),
),

In this builder, we will return a column widget. Inside the widget, we will add a title and ‘$value’. We will add AnimatedBuilder() function, Inside the function, we will add animation, child, and builder. In builder, we will return a Transform. rotate(). Inside, we will add angle and child. We will create two RaisedButtons are ‘ Start Rotation’ and ‘Stop Rotation’. In Start Rotation, we will add onPressed() function. In this function, we will add startRotation() and _countClick.value is equal -1. When the user presses the button then the counter will decrease and rotation start. In Stop Rotation, we will add onPressed() function. In this function, we will add stopRotation() and _countClick.value is equal +1. When the user presses the button then the counter will increase and rotation will be stopped. We will add valueListenable means which builds a widget depending on the valueListenable’s value. Can incorporate a valueListenable value-independent widget subtree from the child parameter into the returned widget tree. We will add _countClick. In the child widget, we will add a flutter logo image.

Code File :

import 'dart:ui';

import 'package:flutter/material.dart';
import 'dart:math' as math;

class UnwantedWidgetDemo extends StatefulWidget {
@override
_UnwantedWidgetDemoState createState() => _UnwantedWidgetDemoState();
}

class _UnwantedWidgetDemoState extends State<UnwantedWidgetDemo>
with SingleTickerProviderStateMixin {
ValueNotifier<int> _countClick = ValueNotifier<int>(0);

AnimationController animationController;

@override
void initState() {
super.initState();

animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 5),
);

animationController.repeat();
}

stopRotation() {
animationController.stop();
}

startRotation() {
animationController.repeat();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Unwanted Widget Demo'),
),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
ValueListenableBuilder(
builder: (BuildContext context, int value, Widget child) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: [
Text(
'Pushed the button this many times',
style: TextStyle(fontSize: 15),
),
Text(
'$value',
style: TextStyle(fontSize: 15),
),
],
),
SizedBox(
height: 30,
),
AnimatedBuilder(
animation: animationController,
child: child,
builder: (context, child) {
return Transform.rotate(
angle: animationController.value * 6.3,
child: child,
);
},
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
onPressed: () {
startRotation();
_countClick.value -= 1;
},
child: Text(' Start Rotation'),
textColor: Colors.white,
color: Colors.pink.shade300,
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
)),
Container(
margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
onPressed: () {
stopRotation();
_countClick.value += 1;
},
child: Text('Stop Rotation'),
textColor: Colors.white,
color: Colors.green,
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
)),
],
),
],
);
},
valueListenable: _countClick,
// The child parameter is most helpful if the child is
// expensive to build and does not depend on the value from
// the notifier.
child: FlutterLogo(
size: 150,
),
),
],
),
),
);
}
}

Conclusion:

In this article, I have explained How To Deal With Unwanted Widget Build In Flutter?, which you can modify and experiment with according to your own, this little introduction was from the How To Deal With Unwanted Widget Build In Flutter?.

I hope this blog will provide you with sufficient information in Trying up the How To Deal With Unwanted Widget Build In Flutter? in your flutter project. We showed you How To Deal With Unwanted Widget Build In Flutter? is and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.