0

I created a frosted AppBar has a SafeArea wrapping. I want a scrollview that scrolls under it, but i'm unable to code a variable padding that adds the SafeArea of the AppBar to the top padding of the SingleChildScrollView. Does anyone have any tips? My appbar is at appbar:. The code for the body Scaffold follows bellow:

home: Scaffold(
          backgroundColor: const Color(0xFFF6FFF1),
          extendBody: true,
          extendBodyBehindAppBar: true,
          // Body
         body: SingleChildScrollView(
                padding:
                    EdgeInsets.only(top: 90, left: 10, right: 10, bottom: 8),
                child: Text(
                  lorem(paragraphs: 4, words: 480),
                ), 
              ),

appBar: FrostedAppBar(
            actions: [
              IconButton(
                icon: Icon(
                  Icons.help_outline_rounded,
                  color: lightColorScheme.tertiary,
                  shadows: const [
                    Shadow(
                        color: Colors.black,
                        blurRadius: 2,
                        offset: Offset(1, 2))
                  ],
                ),
                onPressed: null,
                iconSize: 40,
              )
            ],
            title: Text(
              'Title',
              style: GoogleFonts.racingSansOne(
                  fontSize: 40, color: lightColorScheme.primary),
              textAlign: TextAlign.center,
            ),
            leading: IconButton(
              icon: Icon(
                Icons.menu_rounded,
                color: lightColorScheme.tertiary,
                shadows: const [
                  Shadow(
                      color: Colors.black, blurRadius: 2, offset: Offset(1, 2))
                ],
              ),
              iconSize: 40,
              onPressed: null,
            ),
          ),

Example of why I need variable padding

Scaffold body content going under the appbar and being blurred by it

Thank you very much for your time!!!

tomasgazzi
  • 1
  • 2
  • I thought about using Size.copy but didn't know how to implement it. It's the first app i'm developing. – tomasgazzi Oct 22 '22 at 01:14
  • 1
    wrap your scaffold with safeArea not the appBar. – john Oct 22 '22 at 01:41
  • use kToolbarHeight – rasityilmaz Oct 22 '22 at 09:56
  • Can you give us a little bit more code? Where is your AppBar? Why are you using Stack? Why do you even need SafeArea? Can you explain in more details how exactly you want your UI to look? Thanks! – Lasslos05 Oct 22 '22 at 10:41
  • @Lasslos05, updated the post. Removed the stack, it was a leftover from when the appbar was in the scaffold, had forgot about it. Added images of the UI. – tomasgazzi Oct 22 '22 at 11:57

2 Answers2

0

Wrap your Scaffold with SafeArea widget.

SafeArea(
   child: Scaffold(
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
0

Solved by wrapping the Text (SingleChildScrollView child) in a SafeArea.

body: 
            top: true,
            child: SingleChildScrollView(
              padding: const EdgeInsets.only(
                  top: 10, left: 10, right: 10, bottom: 8),
              child: SafeArea(
            Text(
                lorem(paragraphs: 4, words: 480),
              ),
            ),
          ),
tomasgazzi
  • 1
  • 2