How to prevent AppBar from covering the background?

Instead of setting your PreferredSize appbar directly to the appBar property of the Scaffold, rather Stack it within the body. This code should work for your desired outcome.

Scaffold(  body: Stack(    children: [      Container(), // this is where your main body goes      Positioned(        top: 30,        left: 10,        right: 10,        child: PreferredSize(          preferredSize: Size.fromHeight(25.0),          child: Container(            color: Colors.white.withOpacity(0.0),            height: 50.0,            child: Card(              elevation: 10.0,              color: Colors.white.withOpacity(1),              clipBehavior: Clip.antiAlias,              child: Stack(                children: <Widget>[                  GestureDetector(                    onTap: () {                      _key.currentState.openDrawer();                    },                    child: Padding(                      padding: const EdgeInsets.only(top: 9.0, left: 10.0),                      child: Icon(Icons.menu, color: Colors.grey[800]),                    ),                  ),                  Padding(                    padding: const EdgeInsets.only(top: 13.0, left: 50.0),                    child: TextField(                      decoration: InputDecoration.collapsed(                        hintText: 'Search... ',                        hintStyle: TextStyle(fontFamily: 'Monospace')                      ),                    ),                  ),                  GestureDetector(                    onTap: () {                                                  _key.currentState.openEndDrawer();                    },                    child: Padding(                      padding: const EdgeInsets.only(top: 9.0, left: 305.0),                      child: Icon(Icons.star, color: Colors.grey[800]),                    ),                  )                ],              ),            ),          )        ),      ),    ]  ),);

Sample out come: