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

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 ?

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.

CodePudding user response：

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