Need to accomodate gridView in my flutter - flutter

Question

Im building an app that shows diets and also have a search bar to look for the diets.
I cant manage accomodate the search bar correctly like outside the gridviewer. heres the code of my view and how it actually looks. I dont want to be like another card
body: Container(
child: GridView.builder(
padding: EdgeInsets.all(15),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: dietsForDisplay.length + 1,
itemBuilder: (BuildContext context, int index) {
if (diets.length == 0) {
return Container(
child: Padding(
padding: const EdgeInsets.all(60.0),
child: Text(
"No existen Dietas registradas por la nutrióloga.",
style: TextStyle(
color: Color(0xFF002D53),
fontFamily: 'Montserrat',
fontSize: 25,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
);
} else {
return index == 0
? _searchBar()
: _listItem(
context,
index - 1,
);
}
}),
));
}
and the code for the searchBar and listItem are Cards

Answer 1

Wrap your material app inside a Safe Area Widget
https://api.flutter.dev/flutter/widgets/SafeArea-class.html

Answer 2

I would suggest you to wrap your Scaffold widget with SafeArea so that your appbar won't get obstructed due to the notch. If you would want to add a search bar in your Scaffold's body, I would suggest using a Column to place your search bar on the top and your GridView.builder() on the bottom. Here is how it looks like after my suggestions:
SafeArea(
child:Scaffold(
body: Column(
children: <Widget>[
//Search Bar here
Expanded(
child: //GridView.builder() here
);
],
),
),
);
*If you want that page to be scrollable then replace Column with ListView