Search code examples
flutterflutter-layoutflutter-web

Width of container is not working inside SliverToBoxAdapter in CustomScrollView


I have a CustomScrollView contains a SliverToBoxAdapter.I gave width as MediaQuery.of(context).size.width / 1.75.But it takes full width of screen . enter image description here. Width of container is working if it is placed outside of Customscrollview.

class ProfileView extends GetView<ProfileController> {
  const ProfileView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return Scaffold(
            backgroundColor: Colors.white,
            body: Row(children: [
             Expanded(
                    child: CustomScrollView(
                      shrinkWrap: true,

                      slivers: [
                        SliverToBoxAdapter(
                          child: Padding(
                            padding:
                            const EdgeInsets.only(top: 40.0, left: 45),
                            child: Container(
                              padding: EdgeInsets.only(top: 30),
                              width: MediaQuery.of(context).size.width / 1.75,
                              decoration: BoxDecoration(
                                border:
                                Border.all(color: Colors.red, width: 0.7),
                                color: Color(0xfffbfbfa),
                              ),
                              child: Stack(
                                children: [
                                  Positioned(
                                    right: 0,
                                    top: 0,
                                    child: Align(
                                      alignment: Alignment.topRight,
                                      child: MouseRegion(
                                        cursor: SystemMouseCursors.click,
                                        child: Padding(
                                          padding: const EdgeInsets.only(
                                              right: 18.0),
                                          child: Text(
                                            "Edit",
                                            textAlign: TextAlign.left,
                                            style: GoogleFonts.inter(
                                                color: AppColors.primaryColor,
                                                fontSize: 13,
                                                letterSpacing:
                                                0

,
                                                fontWeight: FontWeight.w400,
                                                height: 1.5769230769230769),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  Text("Text"),

                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  )
            ])
          
            );
  }

Solution

  • you have to wrap your container with Align widget like this:

      SliverToBoxAdapter(
                        child: Padding(
                          padding: const EdgeInsets.only(top: 40.0, left: 45),
                          child: Align(
                            alignment: Alignment.center,
                            child: Container(
                              padding: const EdgeInsets.only(top: 30),
                             width: MediaQuery.of(context).size.width / 1.75,
                              decoration: BoxDecoration(
                                border: Border.all(color: Colors.red, width: 0.7),
                                color: Colors.amber,
                              ),
    ....