flutter - 如何在图像圈内对齐图标
问题描述
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,
)
],
);
}
但我想像这样得到它。在我的代码中,注释行包括中间的图标,但是当我运行程序时,它不在中间居中,而是在图片的右侧对齐。这在我的注册表单中
我的代码有什么问题?
解决方案
如果您想在另一个小部件上绘制一个小部件,请使用 Stack 而不是 raw 或 column。堆栈文档。另外设置alignment: Alignment.center
推荐阅读
- mysql - Flutter 使用共享首选项更改密码
- laravel - 如何显示所选成绩及其主题?
- sql - SQL Pivot 在 26500 和 2650 之间需要显着的时间差异
- angular - 角模式验证预编译
- reactjs - React-Native:使用 FlatList ref 的 scrollToIndex 时出错
- json - 从openweathermap获取位置API时,类型'String'不是'index'类型'int'的子类型
- sql - LTRIM和LTRIM与RTRIM的区别
- android - 在 BottomSheetDialogFragment 中使用 VideoView 时,视频总是在顶部加载
- json - JQ Group 多个文件
- datastage - 作业完成后将作业信息插入统计表 DataStage