Make appbar transparent this below case - flutter

Question

Guys!
I am trying to make this AppBar transparent. Because behind it will have a background but so far I have not had success. I thank you all thank you!
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: show(index),
appBar: AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){},
)
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}
enter image description here

Answer 1

Appbar has shadow by default and if u want transparent appbar, also you need to add elevation: 0 to AppBar for remove shadow.

Answer 2

Get hint from following code (source https://mrflutter.com/fullscreen-page-with-transparent-appbar-in-flutter/)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
'mrflutter.com',
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
),
Positioned(
child: AppBar(
title: Text("Transparent AppBar"),
backgroundColor: Colors.transparent,
elevation: 0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.share),
onPressed: () {},
tooltip: 'Share',
),
],
),
)
],
),
);
}

Answer 3

try to wrap both AppBar and your Body part in stack and make AppBar Trasparent so you will get your desired Output
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
show(index),
Wrap(
children: <Widget>[
AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
],
),
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}