[英]Flutter: add a floating action button to an image
I'm trying to add a floating action button to an image. 我正在尝试向图像添加浮动操作按钮。 The button will be used to change the selected image.
该按钮将用于更改所选图像。 I want the button to float over the bottom right of the image.
我希望按钮浮在图像的右下角。 So far all I can do is add the floating action button directly below the image.
到目前为止,我所能做的就是在图像下方直接添加浮动操作按钮。 Thanks for any help!
谢谢你的帮助!
@override
Widget build(BuildContext context) {
// Create the view scaffold. Use a list view so things scroll.
return new Scaffold(
appBar: new AppBar(
title: new Text("My Title"),
),
body: new ListView(
children: [
new Container(
padding: EdgeInsets.zero,
child: new Image.asset(
"assets/images/background_image.png",
fit: BoxFit.fitWidth,
),
),
new FloatingActionButton(
child: const Icon(Icons.camera_alt),
backgroundColor: Colors.green.shade800,
onPressed: () {},
),
new Divider(),
new ListTile(
title: new Text('Email'),
leading: const Icon(Icons.email),
onTap: () {},
),
new Divider(),
],
),
);
}
You may use a Stack
and Positioned
widget, you can read about those widgets here: 您可以使用“
Stack
和Positioned
小部件,您可以在此处阅读有关这些小部件的信息:
Stack: https://docs.flutter.io/flutter/widgets/Stack-class.html 堆栈: https : //docs.flutter.io/flutter/widgets/Stack-class.html
Positioned: https://docs.flutter.io/flutter/widgets/Positioned-class.html 位置: https : //docs.flutter.io/flutter/widgets/Positioned-class.html
return new Scaffold(
appBar: new AppBar(
title: new Text("My Title"),
),
body: new ListView(
children: [
Stack(
children: <Widget>[
new Container(
padding: EdgeInsets.zero,
child: new Image.asset(
"assets/images/background_image.png",
fit: BoxFit.fitWidth,
)),
Positioned(
right: 0.0,
bottom: 0.0,
child: new FloatingActionButton(
child: const Icon(Icons.camera_alt),
backgroundColor: Colors.green.shade800,
onPressed: () {},
),
),
],
),
new Divider(),
new ListTile(
title: new Text('Email'),
leading: const Icon(Icons.email),
onTap: () {},
),
new Divider(),
],
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.