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

Question

Цель: Реализация идеального размера Круглая кнопка с видимым радиусом и изображением в детстве

---

Снимок экрана, чтобы продемонстрировать:

Как видно из рисунка выше, я попробовал множество решений, которые здесь упомянуты сообществом

В том числе:

1. CircleAvatar

    CircleAvatar(
     child: Image.asset('assets/images/gucci.jpg')
    )

---

ClipRRect

    ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.asset(
         'assets/images/gucci.jpg',
         height: 100.0,
         width: 100.0,
      )
    )

---

Материал виджет с Ink.image в качестве дочернего виджета

Material(
   elevation: 1.0,
   shape: CircleBorder(),
   clipBehavior: Clip.hardEdge,
   color: Colors.transparent,
   child: Ink.image(
      image: AssetImage('assets/images/gucci.jpg'),
      fit: BoxFit.cover,
      width: 120.0,
      height: 120.0,
      child: InkWell(
         onTap: () {},
      )
   )
)

---

Есть идеи о том, как реализовать этот дизайн?

Answer 1

Есть много вариантов для вас. Одним из них является 'FloatingActionButton'.

SizedBox(
  width: 60,
  height: 60,
  child: FittedBox(
    fit: BoxFit.contain,
    child: FloatingActionButton(
      onPressed: () {},
      shape: CircleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 1,
        ),
      ),
      backgroundColor: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(5),
        child: Image.asset('assets/images/gucci.jpg'),
      ),
    ),
  ),
)

Я бы предпочел его более Container, поскольку все атрибуты кнопки, такие как onPressed или анимация касания, уже реализованы в FloatingActionButton и вам не нужно использовать GestureDetector или InkWell.

Также вы можете использовать CircleBorder в любых других Button с или Widget с, которые принимают ShapeBorder.

Answer 2

Полагаю, вам нужны отступы и рамка вокруг кнопки.

SizedBox(
      width: 100,
      height: 100,
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
          shape: BoxShape.circle,
        ),
        child: Material(
          elevation: 1.0,
          shape: CircleBorder(),
          clipBehavior: Clip.hardEdge,
          color: Colors.transparent,
          child: InkWell(
            child: Ink.image(
              image: AssetImage('assets/images/gucci.jpg'),
            ),
          ),
        ),
      ),
    ),

Answer 3

Оберните Container Inkwell или GestureDetector.

Вот пример кода:

    InkWell(
           onTap: (){},
            child: Container(
              width: 65,
              height: 65,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/gucci.jpg'),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.all(Radius.circular(50.5)),
                border: new Border.all(
                 color: Colors.black,
                 width: 2.0,
               ),
              ),
            ),
          )

GestureDetector(
            onTap: (){},
            child: Container(
              width: 65,
              height: 65,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/gucci.jpg'),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.all(Radius.circular(50.5)),
                border: new Border.all(
                 color: Colors.black,
                 width: 2.0,
               ),
              ),
            ),
          ),

Answer 4

Вы можете попробовать использовать Container () и GestureDetector () для функции касания, я думаю, это подойдет

Код

GestureDetector(
   onTap: (){},
   child: Container(
     height: 120.0,
     width: 120.0,
     decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 1.5),
        borderRadius: BorderRadius.circular(80),
        image: DecorationImage(
            image: AssetImage('assets/images/gucci.jpg'),
            fit: BoxFit.cover
        )
     )
   )
)

Вы можете изменить толщину границы, играя с width в border: Border.all(color: Colors.black, width: 1.5) и для circular container, сделайте изменения в этой строке borderRadius: BorderRadius.circular(80),. Это поможет.