using background picture, not able to make my screen scrollable

Question

my screen is not getting scrollable. I am using background picture and i want it to be scrollable as well because when i used single child scrollable widget as a parent of container after background picture, it worked by back ground image didn't scrolled.

Stack(children: [
      const BackgroundPicture(),
      Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 30,
          vertical: 50,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.asset(
              'assets/Frame.png',
            ),
            const SizedBox(
              height: 60,
            ),
            const SizedBox(
              width: 400,
              child: Text(
                'Where would you like to start',
                style: TextStyle(
                    decoration: TextDecoration.none,
                    fontSize: 40,
                    color: Colors.black,
                    fontWeight: FontWeight.w100),
              ),
            ),
            const SizedBox(
              height: 50,
            ),
            Center(
              child: Container(
                height: MediaQuery.of(context).size.height * 0.6,
                width: MediaQuery.of(context).size.width * 0.8,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: const Color(0xffF3F2F2),
                  boxShadow: const [
                    BoxShadow(
                      color: Color.fromRGBO(0, 0, 0, 0.08),
                      blurRadius: 20,
                      spreadRadius: 5,
                      offset: Offset(0, 3), // changes position of shadow
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      )
    ]);

can you please check this answer https://stackoverflow.com/a/69339774/15586963 — Mohamed Gawdat, Oct 26 '22 at 15:45
can you please check this answer https://stackoverflow.com/a/52680688/15586963 — Mohamed Gawdat, Oct 26 '22 at 15:47

score 0 · Answer 1 · answered Oct 26 '22 at 16:00

You can just wrap your Stack in a SingleChindScrollView Widget, this widgets allows the scroll.

SingleChildScrollView(
      child: Stack(
        children: [
       const BackgroundPicture(),
          Container(
            padding: const EdgeInsets.symmetric(
              horizontal: 30,
              vertical: 200,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.asset(
                  'assets/Frame.png',
                ),
                const SizedBox(
                  height: 60,
                ),
                const SizedBox(
                  width: 400,
                  child: Text(
                    'Where would you like to start',
                    style: TextStyle(
                        decoration: TextDecoration.none,
                        fontSize: 40,
                        color: Colors.black,
                        fontWeight: FontWeight.w100),
                  ),
                ),
                const SizedBox(
                  height: 50,
                ),
                Center(
                  child: Container(
                    height: MediaQuery.of(context).size.height * 0.6,
                    width: MediaQuery.of(context).size.width * 0.8,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: const Color(0xffF3F2F2),
                      boxShadow: const [
                        BoxShadow(
                          color: Color.fromRGBO(0, 0, 0, 0.08),
                          blurRadius: 20,
                          spreadRadius: 5,
                          offset: Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );

i tried it already but it didn't work. the problem is with child backgroundPicture as it is a background image with linear gradient colors and infinite height and width and stacks demands this child to have specific length and if i wrap this in container and give it some height then it starts scrolling but color gradient also starts scrolling or you can say a type of new page starts coming up with white space. — Mudassir Jabbar, Oct 26 '22 at 16:57
@MudassirJabbar can you post the complete code of the screen? — Fer Buero Trebino, Oct 27 '22 at 15:46
actually i did manage to solve as i was scrolling the background image with it and scrollview requires a finite height or width in order to work.. so i just made my background image static and applied the scrollview on stack above it.. — Mudassir Jabbar, Nov 03 '22 at 20:49

using background picture, not able to make my screen scrollable

1 Answers1