FLUTTER GRID LAYOUT: Как сделать этот тип макета, используя сетку в флаттере

Question

Я хочу сделать такой макет сетки, я очень устал от этого, я смотрю 3 плейлиста на каком-то сайте и следую некоторым кодам на некоторыхвеб-сайт, но я не получил никаких идей, пожалуйста, помогите мне

Answer 1

Вот краткий пример того, чего вы хотите:

List<String> exampleList = ["A", "B", "C", "D", "E", "F", "G", "H"];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('GridView')),
    body: GridView.builder(
      itemCount: exampleList.length,
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder: (context, index) {
        return Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image.network(
              "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXRnL6cGSfn4coPWBk2JVca6hW95Oab_pzCcrWIl3Y7dHcyQ4I",
              fit: BoxFit.cover,
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                padding: EdgeInsets.all(16.0),
                color: Colors.black38,
                child: Row(
                  children: <Widget>[
                    Flexible(
                      fit: FlexFit.tight,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('Title $index',
                              style: TextStyle(color: Colors.white)),
                          Text('Description ${exampleList[index]}',
                              style: TextStyle(color: Colors.white)),
                        ],
                      ),
                    ),
                    Icon(Icons.star_border, color: Colors.white),
                  ],
                ),
              ),
            )
          ],
        );
      },
    ),
  );
}

Answer 2

Используйте для этого код приложения галереи флаттера https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/grid_list_demo.dart