Блог

Итак, я пытаюсь отобразить что-то вроде этого :

изображение, которое я пытаюсь отобразить

До сих пор используя этот код :

 Stack(
            fit: StackFit.loose,
            children: <Widget>[
              Row(
                crossAxisAlignment:
                CrossAxisAlignment.center,
                mainAxisAlignment:
                MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                      width: 110,
                      height: 110,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          image: AssetImage('assets/profile.png'),
                          fit: BoxFit.cover,
                        ),
                      )),
                ],
              ),
              Padding(
                  padding: EdgeInsets.only(
                      top: 70.0, ),
                  child: Row(
                    mainAxisAlignment:
                    MainAxisAlignment.center,
                    children: <Widget>[
                      ClipRect(

                        child: Container(
                          color:Color.fromRGBO(0, 0, 0, 0.5),
                          width: 110,
                          height: 60,
                          child: Icon(
                            Icons.camera_alt,
                            color: Colors.grey[800],
                          ),
                        ),
                      ),
                    ],
                  )),
            ])
 

У меня есть это изображение :
Изображение, которое я получил

Теперь мой поиск в Google привел меня к мысли, что clipRect может быть решением здесь, но я не могу найти точное решение, поэтому я думаю, что все, что мне нужно сделать, это вырезать часть прямоугольного контейнера, которая выходит за пределы круглого аватара, но я не уверен, как это сделать.

Попробуйте этот макет:

 ClipOval
  Stack: alignment: AlignmentDirectional.bottomCenter,
    Container: width: 110, height: 110
    Positioned: bottom: 0, child: Container(width: 110, height: 40)
    Icon
 

[ОБНОВЛЕНО]

используйте ClipRRect с radius вместо ClipOval

или

используйте flutter_custom_clippers, OvalBottomBorderClipper() для нижней части контейнера.