Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter How can i pin object to topRight like a fixed?

I have a close button on right corner. But When i scroll down its scrolling too of course. But i want to it stick to top corner always even if i scroll down. How can i do it ?


enter image description here


enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel


My Codes:

Container(
                        height: MediaQuery.of(context).size.height * 0.95,
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(12),
                            topRight: Radius.circular(12),
                          ),
                        ),
                        child: SingleChildScrollView(
                          physics: const BouncingScrollPhysics(),
                          child: Column(
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              _buildCloseButton(context),
                              SizedBox(
                                width: MediaQuery.of(context).size.width,
                                child: Column(
                                  mainAxisSize: MainAxisSize.max,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    CircleAvatar(
                                      radius: 48,
                                      backgroundImage: NetworkImage(therapist.image ?? ""),
                                    )....,

_buildCloseButton

Padding _buildCloseButton(context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            style: ButtonStyle(
              shape: MaterialStateProperty.all<CircleBorder>(
                const CircleBorder(side: BorderSide(color: Colors.white)),
              ),
              backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
            ),
            child: const Icon(Icons.close, color: Color.fromARGB(255, 48, 58, 87)),
          ),
        ],
      ),
    );
  }

I tried make it more clear with images . But you can always feel free to ask questions. I tried with Positioned widget too but its same too.Its not sticking to top right corner.

>Solution :

Use Stack Widget and position your button with Positioned Widget like this:

Container(
  height: MediaQuery.of(context).size.height * 0.95,
  decoration: const BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(12),
      topRight: Radius.circular(12),
    ),
  ),
  child: SingleChildScrollView(
    physics: const BouncingScrollPhysics(),
    child: Stack(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 48,
                // backgroundImage: NetworkImage(therapist.image ?? ""),
              )
            ],
          ),
        ),
        // your close button
        Positioned(
          right: 10,
          top: 10,
          child: ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            style: ButtonStyle(
              shape: MaterialStateProperty.all<CircleBorder>(
                const CircleBorder(side: BorderSide(color: Colors.white)),
              ),
              backgroundColor:
                  MaterialStateProperty.all<Color>(Colors.white),
            ),
            child: const Icon(Icons.close,
                color: Color.fromARGB(255, 48, 58, 87)),
          ),
        )
      ],
    ),
  ),
)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading