how do I make a similar gridview.builder

Question

enter image description here

I want to create a news widget in the form of a grid with a maximum of 3 elements vertically. You need to make it so that if there are two elements, they stretch equally (something like expanded), and if there is one element, then it fills the remaining space completely (only in width). I will be very happy if you help)

I tried to use a regular gridview.builder, but realized that it was hopeless. I also tried to come up with something with a wrap with a list.builder, but also unsuccessfully

Answer 1

You can try to use the awesome package flutter_staggered_grid_view

Or normally, Use the Wrap widget along with a combination of Expanded and Align widgets

Wrap(
  spacing: 8.0, // Adjust the spacing between items
  runSpacing: 8.0, // Adjust the run spacing between rows
  children: [
    // Assuming you have a list of news items called 'newsList'
    for (var newsItem in newsList)
      NewsItemWidget(newsItem), // Replace this with your NewsItemWidget
  ],
)

Example of NewsItemWidget

class NewsItemWidget extends StatelessWidget {
  final NewsItem newsItem; // Replace NewsItem with your actual data model

  NewsItemWidget(this.newsItem);

  @override
  Widget build(BuildContext context) {
    int itemCount = 1; // You need to determine the number of items in each row
    if (itemCount == 1) {
      return Container(
        width: double.infinity,
        child: YourSingleItemWidget(
            newsItem), // Replace with your single item widget
      );
    } else {
      return Expanded(
        child: Container(
          child: Column(
            children: [
              for (int i = 0; i < itemCount; i++)
                YourMultiItemWidget(
                    newsItem), // Replace with your multi item widget
            ],
          ),
        ),
      );
    }
  }
}

YourSingleItemWidget and YourMultiItemWidget represent the widgets for a single news item and multiple news items, respectively.