создание кругового аватара в верхней части экрана

#flutter #dart #user-interface

Вопрос:

смотрите изображение здесь

Как я могу сделать так, чтобы circleavatar был размещен в верхней части контейнера

Ответ №1:

вы можете использовать Stack для этого. Нравится:

 ...
return Stack(
  children: [
    Positioned.filled( child:
    Scaffold(
      appBar: ...
      body: Column([
        DecoratedBox(
          ...
        )
      ]),
    )),
    Positioned(
      top: 24,
      child:
        CircleAvatar( child:
          CachedNetworkImage(
            ...
          ),
        ),
    ),
  ],
);
 

что-то вроде того.

Комментарии:

1. Спасибо! это работает!

Ответ №2:

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

  Stack(
        alignment: Alignment.topCenter,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 21),
            child: Container(
              height: 200,
              width: double.infinity,
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                color: Colors.white,
                margin: EdgeInsets.all(
                  16,
                ),
              ),
            ),
          ),
          Container(
            width: 100,
            height: 90,
            decoration: ShapeDecoration(
              shape: CircleBorder(),
              color: Colors.transparent,
            ),
            child: CircleAvatar(),
          )
        ],
      ),
 

Ваш экран результатов-> изображение