在 flutter 的应用栏顶部添加阴影

Question

I'm struggling to add a shadow to the top of the AppBar, I have added one to the bottom but not the top. Here's the design I'm trying to match:

I've explicitly defined the system status bar details in AppBarTheme as white:

    systemOverlayStyle: SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness: Brightness.dark,
      statusBarColor: Colors.white.withOpacity(0.0)),

and I've pushed the entire scaffold into the SafeArea:

  Widget build(BuildContext context) => GestureDetector(
    onTap: () => FocusScope.of(context).unfocus(),
    child: SafeArea(
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(256),
          child: Container( // extra container for custom bottom shadows
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.5),
                  spreadRadius: 6,
                  blurRadius: 6,
                  offset: Offset(0, -4),
                ),
              ],
            ),
            child: AppBar(...),
          ),
        ),
        ...
      ),
    ),
  );
  }

plus, by the way I added a rounded edge on top so I could see what was going on:

Notice, a shadow is present, but is underneath the status bar. So I guess what I'm struggling to achieve is putting the statusbar behind the appbar... or at least making it look that way (with like a mirrored shadow on top of the status bar or something?)

How would you go about solving this? is there like a StatusBarTheme or something for this purpose?

Answer 1

Please Refer below code.
Add elevation and Check. 

 Scaffold(
                            backgroundColor: Colors.white,
                            
                            appBar: AppBar(
                              elevation: 5.0,
                             backgroundColor: Colors.white,
                              actions: [

                            ],)
                          ),

Answer 2

I had to use stack:

    SafeArea(
      child: Stack(children: [
        Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(8.0),
                    bottomLeft: Radius.circular(8.0)),
                color: const Color(0xffffffff),
                boxShadow: [
              BoxShadow(
                  color: const Color(0x33000000),
                  offset: Offset(0, 2),
                  blurRadius: 4),
            ])),
        AppBar(...
        ...

without any systemOverlayStyle specifications in the Theme.