CODEWITHSUNDEEP
flutterdart
Ragul Sarma
Ragul Sarma

Reputation: 45

Flutter list items in mixed layout for each two items

I want to show the list items in mixed layout, where the first two items will be in full-width Card layout and the next two items will be in Grid layout.

so far I have tried to divide the items by separating even, add numbers, but am stuck at the next condition, am not sure whether it's a good approach to achieve this.

any suggestion would be appreciated.

this is what i need to achieve

ListView.builder(
            key: PageStorageKey("topNewsListKey"),
            itemCount: _newsList.length + (_hasMore ? 1 : 0),
            itemBuilder: (context, index) {
              if(index % 2 == 0) {
                print('even numbers $index');
                if( ) {  // condition to divide index 0,4,8...
                   return fullWidthCardLayout();
                } else {
                  return gridLayout();
                }
              } else {
                print('odd numbers $index');
                if() {  // condition to divide index 1,5,9...
                  return fullWidthCardLayout();
                } else {
                  return gridLayout();
                }
              }
            });

Upvotes: 2

Views: 1580

Answers (4)

Sohel Mahmud
Sohel Mahmud

Reputation: 185

you can also achieve this using ListView.builder follow this Create lists with different types of items provided by flutter team.

Upvotes: 0

Priyanka
Priyanka

Reputation: 3699

@Sreejit N S's answer is correct. I made some modifications on it, see my below code and it's working what you need

class _GridListViewState extends State<GridListView> {
  List<String> _list = [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5",
    "item 6",
    "item 7",
    "item 8",
    "item 9",
    "item 10",
    "item 11",
    "item 12",
    "item 13",
    "item 14",
    "item 15",
    "item 16",
    "item 17",
    "item 18",
    "item 19",
    "item 20",
  ];
  int counter = 0;//counter will handle unique index in both list & grid

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
        title: Text('My List'),
      ),
      body: ListView.separated(
        itemCount: _list.length,
        separatorBuilder: (BuildContext context, int index) {
          if (index.isOdd && counter + 1 < _list.length) {
            return getGrid();
          } else
            return Container();//return blank widget
        },
        itemBuilder: (BuildContext context, int index) {
          if (counter < _list.length) {
            return listRow(counter++);
          } else
            return Container();//return blank widget
        },
      ),
    );
  }

  Widget getGrid() {
    return Container(
      height: 200,
      child: GridView.count(
        crossAxisCount: 1,
        scrollDirection: Axis.horizontal,
        children: List.generate(2, (index) {
          return listRow(counter++);
        }),
      ),
    );
  }

  Widget listRow(int index) {
    return GestureDetector(
      onTap: () {
        print(_list[index]);
      },
      child: Card(
        margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Text(_list[index]),
        ),
        elevation: 2,
      ),
    );
  }
}

enter image description here

Upvotes: 2

Sreejith N S
Sreejith N S

Reputation: 470

use ListView.separated and build the grid in separator builder with check the index if you want only to repeat after 2 or three widgets.

  ListView.separated(
      itemCount: 25,
      separatorBuilder: (BuildContext context, int index){
        if (index.isEven) {
          return YourGridWidget();
        } },                   
        itemBuilder: (BuildContext context, int index) { 
        return YourListTileWidget(); },
   )

Upvotes: 3

Jay Dangar
Jay Dangar

Reputation: 3469

You can create a List<Widget> mixedLayoutList = <Widget>[] and put any layouts you want in this and then in order to add all items of the list In ListView use it like following:

ListView(
  children:[]..addAll(mixedLayoutList),
)

Upvotes: 1

Related Questions