Flutter: setState() - A simple manner to update your widget values

 



When displaying data in a Flutter widget, it is common the need for displaying variables values, which maybe have to be a updated based on users actions. For meeting this purpose there are two ways:

a)      a) Update the text value of each GUI element manually, setting the new value element by element.

b)     b) Using a resource as the setState() method, which just after updating the variable value, all references to that on user GUI will be automatically updated.

 Then, how to use setState() method?

First, we need to create the widget state by defining attributes to that:

 class _MyHomePageState extends State<MyHomePage> {

  String name="";
  String email="";

In this example the name and email attributes are part of the state of the widget.

Then, when we have to define as the text of our GUI elements the variable (widget state attribute) that it will be binded to. It may be done using the $ char in front of variable name, as in the example below:

 Text(

  '$name',
  style: Theme.of(context).textTheme.headline4,
),
Text(
  '$email',
  style: Theme.of(context).textTheme.headline6,
),

Then, when we update the value of these variables, we have to do that inside inside the setState() method:

void updateState(){
  setState(() {
    this.name=this.contact.name;
    this.email=this.contact.email;
  });
You may access the complete source code for this example here:
https://github.com/rafaelqg/code/blob/main/setState.dart

Take a look in a hands-on demonstration about how to use the setState() method:



Comments

Post a Comment

Popular posts from this blog

HASHLIB: Using HASH functions MD5 and SHA256

Image
  The usage of hash functions in python is quite simple. Basically we can use the native library hashlib, which give us the possibly to create message digest based on several algorithms, such as MD5 or SHA256. Using this library we may create a hash of some content and then retrieve its binary output or transform that in hexadecimal strings to easy the data transfer in different medias. The library can be imported with the following instruction: import hashlib   If you want to encode strings, it is necessary to encode that with UTF-8, and it can be done using the encode method of a string object: myPassword= "python3.x" myPasswordEncoded=myPassword.encode( 'utf-8' )       The n, the hashlib module has a md5 function which receives as parameter the the we would like to generate the hash. And then return the hash object. hashObject=hashlib.md5(myPasswordEncoded)   The hashObject already contains the ...
Read more

Spread Operator

Image
  The spread operator can be utilized both on arrays and objects. For arrays it will transform the array in a plain list of objects/variables, which can be utilized as input to functions that accept a list of arguments (example: array.push(el1, el2, el3). In This example if we have one array named array01 with options [1,2,3] and we want to add these values to another array, named array02, then we can do array02.push(…array01). Performing that, using the spread operator (…) actually the array02 will have a copy of all elements that are inside array01. Without using the spread operator , for example, array02.push(array01), the array02 will contains one single object that is the array01 itself, and only inside array01 that the values will be found. Another applicability for spread operator is for objects itself. When we want to have a new object with contains a copy of all attributes an existing object already have, in addition to new attributes, we can use the spread operator. L...
Read more

Dart: implementing Object Oriented Programming (OOP)

Image
The object oriented programming provides several benefits for system design. It makes the code easier to maintain, easier to extends, and also implements several well-know design patterns. Using the Dart programing language classes can be simple defined utilizing the class keyword, followed by the class name, and then delimitated the class body with the key brackets {}, like in the example below, presenting one class with two methods. class ProgrammingLanguage {   void compile (){     print( "Compiling..." );   }   void execute (){     print ( "Executing..." );   } } When we need to add new features to this class, it is possible to use the inherence concept, defining a new class that will receive all implementation this ProgrammingLanguage class already has done. And this inherence is done using the extends keywork, like in the example below, which the Dart class has the compile() and the execute() methos from its superclass...
Read more