Сделать контейнер чуть больше, чем ребенок?

Question

Есть ли способ сделать контейнер немного больше, чем его дочерний элемент без жесткого кодирования ширины и высоты? У меня есть ряд из 3 изображений, которые должны показывать другой цветной фон при нажатии, но я не хочу, чтобы фон был слишком плотным на изображении.

Вот как выглядит код в данный момент:

  Widget chooseImage(){
    return Container(
      padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * .175),
      child: Row(
        children: <Widget>[
          InkWell(
            onTap: () => setState(() => _imageChoice == 1 ? _imageChoice = 0 : _imageChoice = 1),
            child: Container(
              color: _imageChoice == 1 ? blue : Colors.white,
              child: Image.asset("assets/creamG.png"),
            ),
          ),
          Spacer(),
          InkWell(
            onTap: () => setState(() => _imageChoice == 2 ? _imageChoice = 0 : _imageChoice = 2),
            child: Container(
              color: _imageChoice == 2 ? blue : Colors.white,
              child: Image.asset("assets/moisturizerG.png"),
            ),
          ),
          Spacer(),
          InkWell(
            onTap: () => setState(() => _imageChoice == 3 ? _imageChoice = 0 : _imageChoice = 3),
            child: Container(
              color: _imageChoice == 3 ? blue : Colors.white,
              child: Image.asset("assets/pillG.png"),
            ),
          ),
        ]),
    );
  }

А вот как выглядит пользовательский интерфейс: https://imgur.com/a/IMZQaFV Я хочу, чтобы на синем фоне были некоторые отступы между краями и фактическим изображением.

Answer 1

Вы можете вставить FractionallySizedBox виджет между вашим родительским и дочерним виджетами.

FractionallySizedBox(
  widthFactor: 0.98,
  heightFactor: 0.98,
  child: YourChild(),
),

В этом примере дочерний виджет займет 98% ширины и высоты вашего родительского виджета.