CODEWITHSUNDEEP
flutter
Zolicious
Zolicious

Reputation: 967

Flutter - List of Containers side by side

I'm trying to display a list of Containers with text side by side in Flutter.

I tried doing a ListView but it didn't achieve my goal it instead span the list horizontally. Yes I know when you set scrollDirection to Horizontal` it allows users to scroll horizontally if the list of items overflow.

                       Container(
                          height: ScreenUtil.getInstance().setHeight(100),
                          child: ListView(
                            scrollDirection: Axis.horizontal,
                            children: col.map((colName) {
                              return GestureDetector(
                                child: Container(
                                  margin: const EdgeInsets.all(15),
                                  child: buildSkillText(
                                      Colors.blue[300], colName),
                                ),
                                onTap: () => {},
                              );
                            }).toList(),
                          ),
                        )

This is what I want to achieve enter image description here

Upvotes: 0

Views: 2274

Answers (1)

Hemanth Raj
Hemanth Raj

Reputation: 34769

I think you are looking for Wrap widget.

Example code:

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: col.map((colName) {
    return GestureDetector(
      child: Container(
        margin: const EdgeInsets.all(15),
        child: buildSkillText(
            Colors.blue[300], colName),
      ),
      onTap: () => {},
    );
  }).toList(),
)

Hope that helps!

Upvotes: 1

Related Questions