CODEWITHSUNDEEP
flutterflutter-layoutrow
Antonio Llobregat
Antonio Llobregat

Reputation: 17

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
      )
  );
}

Upvotes: 1

Views: 1326

Answers (1)

Jim
Jim

Reputation: 7601

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

Upvotes: 1

Related Questions