Динамическая c шахматная сетка с одинаковой высотой ячейки в флаттере

Question

GridView List

Я пытаюсь создать Staggered Grid List с такой же высотой ячейки изображения. Я нашел плагин https://pub.dev/packages/flutter_staggered_grid_view, но он не работал для меня мне нужен 2-й столбец, чтобы получить немного места, и высота столбца должна быть одинаковой, что мне делать?

Answer 1

flutter_staggered_grid_view Плагин.

Попробуйте:

  class MyHomeScreen extends StatefulWidget {
   @override
   _MyHomeScreenState createState() => _MyHomeScreenState();
  }

class _MyHomeScreenState extends State<MyHomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Staggered Grid View with image demo"),),
      body: Center(
        child: sliverGridWidget(context),
      ),
    );
  }

  Widget sliverGridWidget(BuildContext context){
    return StaggeredGridView.countBuilder(
        padding: const EdgeInsets.all(8.0),
        crossAxisCount: 4,
        itemCount: 10, //staticData.length,
        itemBuilder: (context, index){
          return Card(
            elevation: 8.0,
            child:InkWell(
             child: Hero(
               tag: index,// staticData[index].images,
               child: new FadeInImage(
                 width: MediaQuery.of(context).size.width,
                 image: NetworkImage("https://images.unsplash.com/photo-1468327768560-75b778cbb551?ixlib=rb-1.2.1&w=1000&q=80"), // NetworkImage(staticData[index].images),
                 fit: BoxFit.cover,
                 placeholder: AssetImage("assets/images/app_logo.png"),
               ),
             ),
             onTap: (){
               //
              }
            )
          );
        },
         staggeredTileBuilder: (index) => StaggeredTile.count(2,index.isEven ? 2: 3),
         mainAxisSpacing: 8.0,
         crossAxisSpacing: 8.0,
      );
  }
}

Вывод: