Search code examples
flutterflutter-layoutrow

How can add a Row dynamically in flutter?


My problem is that, I have a List of Icons(CustomWidgets) what are provide by an API. I need put this icons in my App but when the are 7 or more its looks like these:

Icons so small

I want to put the icons in separate rows. I've tried out a method which split the list in 2 and add it dynamically but didn't print anything because I'm using a FutureBuilder to print the Icons.

Here is the code:

FutureBuilder(
            future: investCall, //API CALL
            initialData: [], //NULL SAFE
            builder: (context, snapshot) {
              if (snapshot.hasData){
                return investCodes();
              }else {
                return Divider();
              }
            }, //BARRA DE REDES SOCIALES
          ),

Method investCodes(); Where I added the icons

Widget investCodes(){
List<Widget> iconos= []; //EMPTY ICON LIST
for (var object in _investCodes){
  //print('Pintando: '+sn.accesto); DEBUG CONSOLE
  iconos.add(
          Flexible(
          flex: 1,
          child: Container(
            child: GestureDetector(
              onLongPress: (){
                /*...*/
              },
              //JAVA ANDROID ONCLICK LISTENER
              onTap: (){
                _launchURL(object.rfUrl);
              },
              child: Center(
                child: Container(
                  padding: EdgeInsets.only(left: 2.0.h, right: 2.0.h),
                  height: 3.0.h,
                  child: FadeInImage(
                    image: NetworkImage(object.rfIconUrl),
                    placeholder: AssetImage('assets/sn-placeholder.png'),
                  ),
                ),
              ),
            ),
          ),
      )
  );
}


  return Container(
      /*HERE I WANT TO ADD A COLUMN WITH MULTIPLE ROWS*/
      padding: EdgeInsets.all(18.0),
      width: 100.0.w,
      child: Row(
        children: iconos, //LIST OF ICONS
      )
  );
}

Solution

  • What I suggest is to use Wrap instead of Row in your case, widget will place in the 2nd row is not enough space

    THERE IS THE WAY TO DO IT:

          return Container(
          padding: EdgeInsets.all(16.0),
          width: 100.0.w,
            child: Center(
              child: Wrap(
                spacing: 10.0,
                runSpacing: 10.0,
                direction: Axis.horizontal,
                crossAxisAlignment: WrapCrossAlignment.center,
                children:iconos, //LIST OF ITEMS
              ),
            ),
      );
    

    Final Solution in App