Высота сетки в зависимости от размера экрана

Question

Привет, друзья! У меня возникла проблема при установке высоты карты для просмотра на основе экрана, который я пробовал, динамически настраивая экран с помощью приведенного ниже кода. Пожалуйста, найдите экран. Мне нужны точные 10 полей нижетекст, не так уж много, я пытался использовать динамический MediaQuery, если я не использую медиа-запрос, он выдает ошибку, например, дополнительное пространство под экраном, и я не могу использовать поле размера, пожалуйста, помогите друзьям, когда я используюв виде сетки с разметкой внизу есть место

@override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2.3;
    final double itemWidth = size.width / 2;
    return livevideolist != null
        ? new GridView.builder(
            itemCount: livevideolist == null ? 0 : livevideolist.length,
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: (itemWidth / itemHeight),
                crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index) {
              return new GestureDetector(
                onTap: () {
                  String youtubeid = livevideolist[index]['url'];
                  playYoutubeVideo(youtubeid);
                },
                child: new Card(
                  elevation: 4.0,
                  margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                  child: new Column(
                    children: <Widget>[
                      new Container(
                        height: 150.0,
                        width: double.infinity,
                        decoration: new BoxDecoration(
                          image: new DecorationImage(
                            image:
                                new NetworkImage(livevideolist[index]['image']),
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      Expanded(
                        child: new Container(
                          child: new Text(livevideolist[index]['title']),
                          margin: EdgeInsets.only(left: 10.0, top: 10.0),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        : new Center(
            child: new CircularProgressIndicator(),
          );
  }

Answer 1

Вы можете использовать пакет для этого, проверьте этот удивительный пакет: https://pub.dartlang.org/packages/flutter_staggered_grid_view

И вот как вы можете использовать:

          Widget build(BuildContext context) {
            return livevideolist != null
                ? new StaggeredGridView.countBuilder(
                    crossAxisCount: 2,
                    itemCount: livevideolist == null ? 0 : livevideolist.length,
                    staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
                    itemBuilder: (BuildContext context, int index) {
                      return new GestureDetector(
                        onTap: () {},
                        child: new Card(
                          elevation: 4.0,
                          margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                          child: new Column(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              new Container(
                                height: 150.0,
                                width: double.infinity,
                                decoration: new BoxDecoration(
                                  image: new DecorationImage(
                                    image: new NetworkImage(
                                        "https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/ImageFight_arcadeflyer.png/256px-ImageFight_arcadeflyer.png"),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              new Padding(
                                child: new Text(
                                    "Use a very long text here to see how it expands"),
                                padding: EdgeInsets.only(left: 10.0, top: 10.0),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  )
                : new Center(child: new CircularProgressIndicator());
          }

Просто замените атрибутами, которые выиспользуя.

Добавьте maxLines к вашему тексту на основе того, что вы хотите:

Text("Your long text....",
        maxLines: 2 )

Используйте fit: BoxFit.cover, а не fit: BoxFit.fill, для вашего изображения

Похоже, ваш текст имеет разные размеры, вы можете принудительно установить высоту родительского контейнера:

new Container(
   height: 80.0, //you can change this value
                            child: new Text(
                                "Use a very long text here to see how it expands"),
                            padding: EdgeInsets.only(left: 10.0, top: 10.0),
                          ),