I have a page in Flutter that consists of an image and a back arrow image. I'm using a Stack and Positioned widget to display the back arrow image on the top left corner of the page. However, when the page has a large amount of text and I scroll down, the back arrow image remains fixed in its position and doesn't scroll along with the content.
I would like to make the back arrow image scroll along with the content when the user scrolls down the page. How can I achieve this effect in Flutter? Are there any specific widgets or techniques I can use to make the positioned widget scrollable?
by change the Stack widget like below you can achieve that
return Scaffold(
body: Stack(
children: [
Container(
color: const Color(0xFFF7F7F7), // Set the color
child: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Stack(
children: [
// Existing Image Block
Image.network(
Uri.parse(apiBaseUrl).resolve(house.image).toString(),
height: 200,
width: double.infinity,
fit: BoxFit.fill,
),
// Details Block with Rounded Corners
Container(
margin: const EdgeInsets.only(top: 180),
padding: const EdgeInsets.all(15),
decoration: const BoxDecoration(
color: Color(0xFFF7F7F7), // Set the color
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('\$${house.formattedPrice}',
style: const TextStyle(
fontFamily: 'GothamSSm',
fontWeight: FontWeight.w400,
// Set the font weight to medium
fontSize: 18,
color: Color(0xCC000000))),
const SizedBox(
height: 8,
width: 60,
),
SvgPicture.asset(
'assets/icons/ic_bed.svg',
width: 18,
height: 18,
color: const Color(0x66000000),
),
Text(house.bedrooms.toString(),
style: const TextStyle(
fontFamily: 'GothamSSm',
fontSize: 10,
color: Color(0x66000000))),
const SizedBox(width: 5),
//width for space betweens icons
SvgPicture.asset(
'assets/icons/ic_bath.svg',
width: 18,
height: 18,
color: const Color(0x66000000),
),
Text(house.bathrooms.toString(),
style: const TextStyle(
fontFamily: 'GothamSSm',
fontSize: 10,
color: Color(0x66000000))),
const SizedBox(width: 5),
SvgPicture.asset(
'assets/icons/ic_layers.svg',
width: 18,
height: 18,
color: const Color(0x66000000),
),
Text(house.size.toString(),
style: const TextStyle(
fontFamily: 'GothamSSm',
fontSize: 10,
color: Color(0x66000000))),
const SizedBox(width: 5),
// This widget displays the distance from the user to the house if the distance is available.
Visibility(
visible: house.distanceFromUser != null,
child: Row(
children: [
SvgPicture.asset(
'assets/icons/ic_location.svg',
width: 18,
height: 18,
color: const Color(0x66000000),
),
const SizedBox(width: 5),
Text(
'${house.distanceFromUser?.toStringAsFixed(0)} km',
style: const TextStyle(
fontFamily: 'GothamSSm',
fontSize: 12,
color: Color(0x66000000),
),
),
],
),
),
],
),
const SizedBox(height: 20),
const Text(
'Description',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
fontFamily: 'GothamSSm',
),
),
const SizedBox(height: 15),
Text(house.description,
style: const TextStyle(
fontFamily: 'GothamSSm',
fontWeight: FontWeight.w400,
fontSize: 12,
color: Color(0x66000000))),
const SizedBox(height: 8),
const Text(
'Location',
style: TextStyle(
fontSize: 18,
fontFamily: 'GothamSSm',
fontWeight: FontWeight.w400,
),
),
Container(
height: 200,
margin: const EdgeInsets.only(top: 10),
// Adjust the height as needed
child: GoogleMap(
initialCameraPosition: initialCameraPosition,
markers: {
Marker(
markerId: const MarkerId('houseLocation'),
position:
LatLng(house.latitude, house.longitude),
onTap: onMarkerTap
),
},
scrollGesturesEnabled: false,
zoomGesturesEnabled: false,
),
),
],
),
),
],
),
),
),
],
),
),
),
Positioned(
top: 35,
left: 10,
child: GestureDetector(
onTap: Navigator.of(context).pop,
child: SvgPicture.asset(
'assets/icons/ic_back.svg',
color: Colors.white,
width: 30,
height: 30,
),
),
),
]);