flutterdartbuilderflutter-expanded

how do I make a similar gridview.builder


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


Solution

  • 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.