как наложить круглое изображение на верх карточки (наполовину на карточке и наполовину вне карточки)?

Question

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

Вот код, который не дает желаемого результата, как на картинке ниже:

class ContainerWithCircle extends StatelessWidget {
final double circleRadius = 100.0;
final double circleBorderWidth = 8.0;
@override
Widget build(BuildContext context) {
   return Stack(
  alignment: Alignment.topCenter,
  children: <Widget>[

    Container(
      width: circleRadius,
      height: circleRadius,
      decoration:
          ShapeDecoration(shape: CircleBorder(), color: Colors.white),
      child: Padding(
        padding: EdgeInsets.all(circleBorderWidth),
        child: DecoratedBox(
          decoration: ShapeDecoration(
              shape: CircleBorder(),
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
                  ))),
        ),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(top: circleRadius / 2.0),
      child: Container(
        // Some content
      ),
    ),
  ],
);

}}

Answer 1

Чтобы создать макет, подобный тому, который вы указали, вы можете просто использовать стопку и поместить карту с отступом вверх.Ресурсы для поиска: Стек , DecoratedBox & CircleBOrder. В следующем коде показан пример реализации:

class ContainerWithCircle extends StatelessWidget {
  final double circleRadius = 100.0;
  final double circleBorderWidth = 8.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: circleRadius / 2.0),
          child: Container(
            //replace this Container with your Card
            color: Colors.white,
            height: 200.0,
          ),
        ),
        Container(
          width: circleRadius,
          height: circleRadius,
          decoration:
              ShapeDecoration(shape: CircleBorder(), color: Colors.white),
          child: Padding(
            padding: EdgeInsets.all(circleBorderWidth),
            child: DecoratedBox(
              decoration: ShapeDecoration(
                  shape: CircleBorder(),
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                        'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
                      ))),
            ),
          ),
        )
      ],
    );
  }
}