Блог

Мне нужно создать Container как показано в центре, ниже.

Вот мой код для этого:

 Container(
   width: 48,
   height: 48,
   decoration: SideBarStyles.recentItem,
   child: Image.network(
     'https://placeimg.com/640/480/any',
     fit: BoxFit.cover,
   ),
),
  

Значение SideBarStyles.recentItem

   static BoxDecoration recentItem = BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    color: Color.fromRGBO(42, 37, 82, 0.15),
    border: Border.all(width: 5, color: Variables.sideBarColorDark)
  );
  

Проблема в том, что изображение всплывает из коробки как:

Как мне скрыть переполнение изображения?

Вот и пример

  Container(
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(width: 5, color: Variables.sideBarColorDark),
                        image: new DecorationImage(
                          image: new NetworkImage(
                            'https://placeimg.com/640/480/any',
                          ),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
  

Один из способов, которым вы можете это сделать, выглядит следующим образом.

 Container(
   width: 48,
   height: 48,
   decoration: SideBarStyles.recentItem,
),
  

И decoration вот так.

   static BoxDecoration recentItem = BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    color: Color.fromRGBO(42, 37, 82, 0.15),
    border: Border.all(width: 5, color: Variables.sideBarColorDark)
    image: DecorationImage(
      image: NetworkImage('https://placeimg.com/640/480/any'),
    ),
  );
  

Результат:

Если вы хотите, чтобы ваши container углы были обрезаны / закруглены, либо установите borderRadius свойство в container на BorderRadius.all(Radius.circular(value)) . Или оберните container в ClipRRect виджет и установите для borderRadius свойства значение BorderRadius.all(Radius.circular(value)) .