首页 > 解决方案 > 如何在图像圈内对齐图标

问题描述

 File _image;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      _image = image;
      print('Image Path $_image');
    });
  }



Widget _buildProfileImage() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        SizedBox(
          height: 10.0,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: CircleAvatar(
                radius: 80,
                backgroundColor: Colors.blue,
//                backgroundColor: Color(0xff476cfb),
                child: ClipOval(
                  child: new SizedBox(
                    width: 140.0,
                    height: 140.0,
                    child: (_image != null)
                        ? Image.file(
                            _image,
                            fit: BoxFit.fill,
                          )
                        : Image.network(
                            "https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
                            fit: BoxFit.fill,
                          ),
                  ),
                ),
              ),
            ),
//            Padding(
//              padding: EdgeInsets.only(bottom: 40),
//              child: IconButton(
//                icon: Icon(
//                Icons.photo_camera,
//                size: 40,
//                color: Colors.grey[200],
//                ),
//                onPressed: () {
////                  getImage();
//                },
//              ),
//            ),
          ],
        ),
      ],
    );


  }




















@override
Widget build(BuildContext context) {
    final avatarButton = Container(
      height: 25,
      width: 25,
      child: FloatingActionButton(
        backgroundColor: Colors.amber,
        elevation: 0,
        onPressed: () {
          getImage();
        },
        tooltip: 'Pick Image',
        child: Icon(
          Icons.create,
          size: 12,
          color: Colors.grey[900],
        ),
      ),
    );

    final avatar = Stack(
      children: <Widget>[
        _buildProfileImage(),
        Positioned(
          bottom: 20,
          right: 35,
          child: avatarButton,
        )
      ],
    );
 }

这是我用来获得以下输出的代码。 在此处输入图像描述

但我想像这样得到它。在我的代码中,注释行包括中间的图标,但是当我运行程序时,它不在中间居中,而是在图片的右侧对齐。这在我的注册表单中

我的代码有什么问题?

在此处输入图像描述

标签: flutterdart

解决方案


如果您想在另一个小部件上绘制一个小部件,请使用 Stack 而不是 raw 或 column。堆栈文档。另外设置alignment: Alignment.center


推荐阅读