Сетевое изображение подходит к карте без потери формы карты с видом сетки в флаттере

Question

В требуемом представлении есть список сетки с двумя столбцами, и для его элементов дизайна необходимо задать изображение на фоне карты, а карты имеют некоторый радиус. Изображение - это изображение сети, но размер карты колеблется в зависимости от образа сети.Я пытался это тоже, но не работает.

Вот код

Container(
  child: Column(
  children: <Widget>[
       Expanded(
                    child: Card(
                        clipBehavior: Clip.antiAlias,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: Image.network(
                            event_response.imageLogoUrl +
                                event_response.eventList[position].event_logo,
                            fit: BoxFit.cover,
                          ),
                        )),
                  ),
                          Container(
                           padding: const EdgeInsets.all(5.0),
                           child  :Text('${event_response.eventList[position].eventName}'),
                        )
                      ],

                );},),),],),);

Здесь я хочу, но в 2 столбцах.

здесь яполучаю

Answer 1

Чтобы скруглить углы изображений, вам нужно обернуть их в виджет ClipRRect и задать для них радиус границы, такой же, как у вашей карты.

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
  Expanded(
    child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
                      child: Image.network(
            event_response.imageLogoUrl +
                event_response.eventList[position].event_logo,
            fit: BoxFit.cover,
          ),
        )),
  ),
  Container(
    padding: const EdgeInsets.all(5.0),
    child: Text('${event_response.eventList[position].eventName}'),
  )
]);

Answer 2

Оберните ваш Card в Expanded и используйте BoxFit.cover для вашего Image.

                Column(children: <Widget>[
                     Expanded(
                        child: Card(
                             clipBehavior: Clip.antiAlias,
                             shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),),
                             child: Image.network(event_response.imageLogoUrl+event_response.eventList[position].event_logo, fit: BoxFit.cover,
                             )
                             ),
                         ),
                      Container(
                       padding: const EdgeInsets.all(5.0),
                       child  :Text('${event_response.eventList[position].eventName}'),
                    )