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