CODEWITHSUNDEEP
flutterdart
Bnd10706
Bnd10706

Reputation: 2383

Flutter Display List in a Container instead of ListView

I have a list of Containers that I want to display when an option is selected.

There is a container at the top of my screen and selection options at the bottom, when the button is pushed the item is added to the list that i want to display in the container up top.

I am able to do this with Text, but my List is going to contain Containers so they can be selectable and other UI features.

But right now the only way that I can display this is in a List view, I basically want a list view that works like items in a row.

Like this.

[Container][Container][Container]

Then when they reach the end of the screen they go to a new row

[Container][Container][Container]
[Container]

The only way i know how to display a list is in a ListView.Buider

Here is my current code.

This is where I want to place it.

Expanded(
            flex: 3,
            child: Container(
                width: MediaQuery.of(context).size.width*0.8,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: ListView.builder(
                          itemCount: hashList.length,
                          itemBuilder: (context, index){
                            return Container(
                              child: hashList[index],
                            );
                          }),
                    )
                  ],

                ),
                ),
          ),

And here is the container build in the function.

isSelected ? widget.list.add(
          Container(
            padding: EdgeInsets.all(10),
            height: 45,
            child: Text(widget.tag, style: TextStyle(color: Color(0xffff9900), fontSize: 20, fontFamily: 'Dokyo'),),
              decoration: BoxDecoration(
            border: Border.all(color: Color(0xffff9900),),
            borderRadius: BorderRadius.circular(10))
          )): widget.list.removeAt(widget.id);

So as you can see the list is dynamic.

Upvotes: 0

Views: 9902

Answers (1)

Ganapat
Ganapat

Reputation: 7498

Take a look at the Wrap widget here https://api.flutter.dev/flutter/widgets/Wrap-class.html It takes care of automatically wrapping the content when horizontal space is over.

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
      label: Text('Laurens'),
    ),
  ],
)

Upvotes: 1

Related Questions