Flutter: Creating dynamic Widgets in screen based on data source

It is very common we have to develop APP widgets which the elements have to be dynamically created based on a certain data set. And when programming with Flutter, it is not different.

Basically a Widget is composed of a list of another Widgets, which normally are pre-defined, as we can see in the example below:

body: Center(
  child: Column(

    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        '$name',
        style: Theme.of(context).textTheme.headline4,
      ),
      Text(
        '$email',
        style: Theme.of(context).textTheme.headline6,
      ),
      Text(
        '\n',
        style: Theme.of(context).textTheme.headline6,
      ),

       ),

),

 

However, we can do that in a different manner. It is possible to dynamically produce a List<Widget> and then assign it to the children attribute.

Here we have a function which produces the widget list based on an array:

List<Widget> createElementsList(){

    var contacts=["Chris Redfied","Albert Wesker", "Leon S. Kennedy","Jill Valentine","Rebecca Chambers"];

    var widgets = new List.filled(contacts.length, Text(""), growable: false);

    int i=0;

    for (var contact in contacts) {

      widgets[i]= Text(

        contact+"\n",

        style: Theme.of(context).textTheme.headline4,

      );

      i++;

    }

    return widgets;

  }

 

Then, we can call this function for children attribute assignment:

@override

Widget build(BuildContext context) {

  return Scaffold(

    appBar: AppBar(

      title: Text(widget.title),

    ),

    body: Center(

      child: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        children: createElementsList(),

      ),

    ),

  );

}

 

You may find the complete source code here:

https://github.com/rafaelqg/code/blob/main/presenting_lists_dynamic_elements.dart

Take a look a hands-on presentation for this example:



Comments

Post a Comment

Popular posts from this blog

Dart/Flutter: exception handling

Image
The exceptions are triggered every time an error happens during the software execution. In case exceptions are not handled, the software will abort, and the program execution will ends. To make the software with capability to handle its errors and give to the users a proper feedback and possibility to correct some input or try again, the exceptions can be handled. To perform exception handling using Dart, which is the programming language adopted by Flutter technology, you may use the try / on statement was we have in the example below: int x = 12 ; int y = 0 ; int res ; print( "1) try / on statement" ); try {   res = x ~/ y ; // ~/ => truncating division operator, always returns a int value. } on IntegerDivisionByZeroException {   print( 'Exception:: Cannot divide by zero' ); } Another possibility is to have the same structure but with the addition of the catch keyword. It makes possible to have access to the exception object and to read data from t...
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

Android – SearchView: Adding a Search component direct on your APP menu.

Image
  A SearchView is View (GUI Component) to be displayed in the toolbar, which user can enter a text for searching anything within your APP. Of course, programmatically we can Interact with SeachView to identify the its interaction with the user and the inputted values. However the whole search behavior has to be implemented by each application.     In this tutorial we are going to see how to include a SearchView in your APP toolbar, and how to handle its events.     The SearchView is defined in any layout for menus, and its is like a normal menu item. However it has different behavior because of the attributes   app :actionViewClass and app :showAsAction as we can see in the code below:   <? xml version ="1.0" encoding ="utf-8" ?> < menu xmlns: app ="http://schemas.android.com/apk/res-auto"     xmlns: android ="http://schemas.android.com/apk/res/android" >     < item    ...
Read more