How to make a positioned widget scroll along with the content in Flutter?

ThatGuy1234
July 17, 2023
164 views
0 votes
2 Answers

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?

Tags: flutter flutter-animation

Answers

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,
                            ),
                          ),
                        ),
                  ]);

You can achieve it by below code

Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Container(
    color: const Color(0xFFF7F7F7), // Set the color
    child: Stack(
      children: [
        Positioned(
          child: SingleChildScrollView(
            child: Column(
              children: [
         // YOUR   MAIN LONG UI CODE WILL BE HERE 
                Image.network(
                  "https://www.imgonline.com.ua/examples/random-pixels-big.png",
                  height: 200,
                  width: double.infinity,
                  fit: BoxFit.fill,
                ),
                Container(
                  height: 100000,
                  color: Colors.red,
                )

                // Back Button
              ],
            ),
          ),
        ),
        Positioned(
          top: 35,
          left: 10,
          child: GestureDetector(
            onTap: Navigator.of(context).pop,
            child: Icon(
              Icons.arrow_back_outlined,
              size: 30,
            ),
          ),
        ),
      ],
    ),
  ),
);

Please signup or login to give your own answer.

Click here to cancel reply.