I'm doing like a treasure map on my app. I had success to make the points(boards) on the map scrollable, but not the background. Because I'm also creating the art for the map itself, so before that I have to make everything works. In short I will demonstrate(I also marked a reference to help you). I got this print and when I scroll up I have this. See? The background image didn't follow the boards, didn't move. I already tried to put this background image with SingleChildScrollView but got worse, even the boards didn't move properly, the last one just cropped. I tried to put the image with a single child scroll view at the begin of the stack but didn't work too. Here is my code(I think you don't have to focus on these containers(they just show the boards and their positions), I'm almost sure that the problem is at the very start of the body):
body: LayoutBuilder(builder: (context, constraints) {
return Container(
width: constraints.maxWidth,
height: constraints.maxHeight,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://i.imgur.com/z1GHi45.png'),
fit: BoxFit.fitWidth)),
child: SingleChildScrollView(
child: Stack(children: [
Wrap(
children: [
Container(
margin:
EdgeInsets.symmetric(horizontal: 30, vertical: 20),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 115, top: 220),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 25, vertical: 55),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 60, vertical: 120),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin:
EdgeInsets.symmetric(horizontal: 20, vertical: 15),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 140, top: 120),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 80, top: 100),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 20, top: 300),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
Container(
margin: EdgeInsets.only(left: 150, top: 200),
height: 100,
width: 100,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TelaConhecMangue_(),
),
);
},
child: Image(
image: NetworkImage(
'https://i.imgur.com/f8lp7Fg.png')),
),
),
],
),
]),
),
);
}),
);
Thanks in advance
