title: How to add picture behind my appbar and have it show slightly but very blurred. To give the appbar a different look
body: <p>I am trying to follow a design for practice on flutter, but having some trouble with it. I added the same colors for the gradient as the design I have found, but I am not sure how to add those purpleish part. Somehow it is also transparent and displays an image behind the nav bar.</p>
  <p>So my question is, how do I add an image behind my app bar and have it show just a little like in the first picture, so it makes this cool effect.
  Or is there any other way to do it?
  The designer also used a transparent gradient for one of the containers that shows part of the background picture but blurred out.</p>
  <p>I have already set the routes and icons and all. Just want this effect</p>
  <pre><code>Widget build(BuildContext context) {
     return BottomAppBar(
       color: Color(0xFF1F1F1F),
  
       child: Container(
         decoration: BoxDecoration(
             gradient: LinearGradient(
                 begin: Alignment.topLeft,
                 end: Alignment.bottomRight,
                 colors: [
               Color(0xFF838383).withOpacity(0.7),
               Color(0xFF838383).withOpacity(0.4),
             ],
                 stops: [
               0.0,
               1.0
             ])),
         height: 70,
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: [
             IconButton(
               onPressed: () {
                 Navigator.pushNamed(context, '/');
               },
               icon: Icon(
                 Icons.home,
                 color: Colors.white,
               ),
             ),
  </code></pre>
  <p><strong>App Bar, I am trying to create</strong></p>
  <p><a href="https://i.stack.imgur.com/ROYOR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ROYOR.png" alt="App Bar I am trying to create" /></a></p>
  <p><strong>My appbar</strong></p>
  <p><a href="https://i.stack.imgur.com/VFJHK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VFJHK.png" alt="My appbar" /></a></p>
  <p><strong>Container with same effect</strong></p>
  <p><a href="https://i.stack.imgur.com/e6YSX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e6YSX.png" alt="Container with same effect" /></a></p>