如何使用按钮制作图像图标以更改图像,例如google:

用户名

我想在个人资料屏幕上创建用户的个人资料照片,并用按钮四舍五入,或者创建一些创意来更改此照片,例如google:

谷歌

但是我现在所拥有的是:

CircleAvatar(
  radius: 75,
  backgroundColor: Colors.grey.shade200,
  child: CircleAvatar(
    radius: 70,
    backgroundImage: AssetImage('assets/images/default.png'),
  )
),

如何添加类似Google示例中的按钮?

舒普德

使用,Stack您可以将图标放置在头像上方以及特定位置。

Stack(
      children: [
        CircleAvatar(
          radius: 75,
          backgroundColor: Colors.grey.shade200,
          child: CircleAvatar(
            radius: 70,
            backgroundImage: AssetImage('assets/images/default.png'),
          ),
        ),
        Positioned(
          bottom: 1,
          right: 1,
          child: Container(
            child: Padding(
              padding: const EdgeInsets.all(2.0),
              child: Icon(Icons.add_a_photo, color: Colors.black),
            ),
            decoration: BoxDecoration(
                border: Border.all(
                  width: 3,
                  color: Colors.white,
                ),
                borderRadius: BorderRadius.all(
                  Radius.circular(
                    50,
                  ),
                ),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    offset: Offset(2, 4),
                    color: Colors.black.withOpacity(
                      0.3,
                    ),
                    blurRadius: 3,
                  ),
                ]),
          ),
        ),
      ],
    )

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章