Аватар Flutter в ромбовидном стиле - PullRequest
Новая
       7

Аватар Flutter в ромбовидном стиле

0 голосов
/ 21 июня 2020

Есть ли у кого-нибудь идеи, как этого добиться:

Аватар с формой ромбовидной кривой. Таким образом, прямоугольник со скругленными углами поворачивается на 45%, а изображение растягивается до внутренней рамки.

введите описание изображения здесь

1 Ответ

0 голосов
/ 21 июня 2020

Немного поигравшись, я обнаружил, что могу использовать комбинацию Stack и реализацию CustomCliper. Я не уверен, что это лучший способ, но, по крайней мере, он работает!

". Rotate ()" взят из библиотеки styled_widget. Вы можете добиться того же, используя. Это то же самое, что и упаковка контейнера с помощью Transform.rotate ()

Для этого:

введите описание изображения здесь 

 Stack(
          alignment: Alignment.center,
          children: [
              ClipPath(
              clipBehavior: Clip.antiAlias,
              child: Container(
                height: 80*sqrt2,
                width: 80*sqrt2,
                child: Image.asset(
                  "images/Marianne-F.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              clipper:  DiamondRounded(),
            ),
            Container(
              clipBehavior: Clip.antiAlias,
              height: 80,
              width: 80,
              decoration: BoxDecoration(
                  border: Border.all(width: 3, color: Colors.deepOrange[800]),
                  borderRadius: BorderRadius.all(Radius.circular(6))),
            ).rotate(angle: 45 * pi / 180),
          ],
        ),
...