FLUTTER: Как я могу сделать индивидуальный контейнер для флаттера?

Question

Я хочу создать собственный контейнер / карту, которая выглядит так:

ht tps://i.sta ck.imgur.com/5Fba3.png

Как я могу добиться перекрытия / наложения макета во флаттере?

Answer 1

Код:

Container(
  width: 135.0,
  height: 80.0,
  margin: EdgeInsets.only(right: 5.0),
  child: Stack(
    children: [
      Align(
        alignment: Alignment.centerLeft,
        child: Container(
          width: 110.0,
          height: 150.0,
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
          ),
          child: Align(
            alignment: Alignment.bottomLeft,
            child: Padding(
              padding: EdgeInsets.only(left: 15.0, bottom: 20.0),
              child: Text(
                text,
                style: TextStyle(
                  fontSize: 15.0,
                  fontFamily: 'PlayfairDisplay',
                  color: kInactiveSearchPageTextColor,
                ),
              ),
            ),
          ),
        ),
      ),
      Align(
        alignment: Alignment.topLeft,
        child: Image.asset(
          image,
          width: 110,
          height: 110,
        ),
      ),
      Positioned(
        top: 162,
        left: 90,
        child: Container(
          width: 41.0,
          height: 41.0,
          child: RawMaterialButton(
            fillColor: Colors.white,
            shape: CircleBorder(),
            elevation: 12.0,
            child: Icon(
              Icons.add,
              color: kActiveSearchPageButtonColor,
            ),
            onPressed: onPressed,
          ),
        ),
      ),
    ],
  ),
);

Answer 2

Используйте виджет Stack и виджет Positioned, который помогает размещать виджеты в любом месте стека.