Make AppBar transparent and show background image which is set to whole screen

This is supported by Scaffold now (in stable - v1.12.13+hotfix.5).

• Set Scaffold extendBodyBehindAppBar to true,
• Set AppBar elevation to 0 to get rid of shadow,
• Set AppBar backgroundColor transparency as needed.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.red,
      appBar: AppBar(
//        backgroundColor: Colors.transparent,
        backgroundColor: Color(0x44000000),
        elevation: 0,
        title: Text("Title"),
      ),
      body: Center(child: Text("Content")),
    );
  }

you can use Stack widget to do so. Follow below example.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: new AppBar(
              title: new Text(
                "Hello World",
                style: TextStyle(color: Colors.amber),
              ),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
            ),
            body: new Container(
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

You can use Scaffold's property "extendBodyBehindAppBar: true" Don't forget to wrap child with SafeArea

  @Override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/background/home.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
            child: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Center(child: Text('Test')),
          ),
        )),
      ),
    );
  }

None of these seem to work for me, mine went something like this:

return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    iconTheme: IconThemeData(color: Colors.white),
    elevation: 0.0,
  ),
  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: Padding(
          padding: const EdgeInsets.fromLTRB(0, 100, 0, 0),
          child:
          // Column of widgets here...
        ),
       ),
     ],
   ),
 );

Output:

A lot of answers but nobody explains why extendBodyBehindAppBar works? It works because when we assigned extendBodyBehindAppBar as true, then the body of the widget takes the height of AppBar, and we see an image covering the AppBar area.

Simple Example:

Size size = MediaQuery.of(context).size;
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Container(
        // height: size.height * 0.3,
        child: Image.asset(
          'shopping_assets/images/Fruits/pineapple.png',
          fit: BoxFit.cover,
          height: size.height * 0.4,
          width: size.width,
        ),
      ),
    );

There could be many cases, for example, do you want to keep the AppBar or not, whether or not you want to make the status bar visible, for that, you can wrap Scaffold.body in SafeArea and if you want AppBar to not have any shadow (unlike the red I provided in example 2), you can set its color to Colors.transparent:

• Full image (without AppBar)

  

  Scaffold(
    extendBodyBehindAppBar: true,
    body: SizedBox.expand(
      child: Image.network(
        'https://wallpaperaccess.com/full/3770388.jpg',
        fit: BoxFit.cover,
      ),
    ),
  )
  

• Full image (with AppBar)

  

  Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.red,
      title: Text('MyApp'),
    ),
    body: SizedBox.expand(
      child: Image.network(
        'https://wallpaperaccess.com/full/3770388.jpg',
        fit: BoxFit.cover,
      ),
    ),
  )
  

that's what I did and it's working

This is supported by Scaffold now (in stable - v1.12.13+hotfix.5).

Set Scaffold extendBodyBehindAppBar to true, Set AppBar elevation to 0 to get rid of shadow, Set AppBar backgroundColor transparency as needed.

Best regards

Scaffold(extendBodyBehindAppBar: true);

In my case I did it as follows:

Additional create an app bar with a custom back button (in this case with a FloatingActionButton). You can still add widgets inside the Stack.

class Home extends StatefulWidget {
  @override
  _EditProfilePageState createState() => _EditProfilePageState();
}

class _HomeState extends State< Home > {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          this._backgroundImage(), // --> Background Image
          Positioned( // --> App Bar
            child: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              leading: Padding( // --> Custom Back Button
                padding: const EdgeInsets.all(8.0),
                child: FloatingActionButton(
                  backgroundColor: Colors.white,
                  mini: true,
                  onPressed: this._onBackPressed,
                  child: Icon(Icons.arrow_back, color: Colors.black),
                ),
              ),
            ),
          ),
          // ------ Other Widgets ------
        ],
      ),
    );
  }

  Widget _backgroundImage() {
    return Container(
      height: 272.0,
      width: MediaQuery.of(context).size.width,
      child: FadeInImage(
        fit: BoxFit.cover,
        image: NetworkImage(
            'https://images.unsplash.com/photo-1527555197883-98e27ca0c1ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'),
        placeholder: AssetImage('assetName'),
      ),
    );
  }

  void _onBackPressed() {
    Navigator.of(context).pop();
  }
}

In the following link you can find more information Link

You can Try this This code work for me

@override
  Widget build(BuildContext context) {
    _buildContext = context;
    sw = MediaQuery.of(context).size.width;
    sh = MediaQuery.of(context).size.height;

    return new Container(
      child: new Stack(
        children: <Widget>[
          new Container(
            child: Stack(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(20.0),
                  decoration: BoxDecoration(image: backgroundImage),
                ),
              ],
            ),
          ),
          new Scaffold(
            backgroundColor: Colors.transparent,
            appBar: new AppBar(
              title: new Text(Strings.page_register),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              centerTitle: true,
            ),
            body: SingleChildScrollView(
              padding: EdgeInsets.all(20.0),
              physics: BouncingScrollPhysics(),
              scrollDirection: Axis.vertical,
              child: new Form(
                key: _formKey,
                autovalidate: _autoValidate,
                child: FormUI(),
              ),
            ),
          )
        ],
      ),
    );
  }

backgroundImage

DecorationImage backgroundImage = new DecorationImage(
  image: new ExactAssetImage('assets/images/welcome_background.png'),
  fit: BoxFit.cover,
);

use stack

• set background image
  • Another Scaffold()
    • set background color transperant
    • set custom appbar
    • use column with singleChildScrollView or ListView

@override   Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: <Widget>[
              backgroundBGContainer(),
              Scaffold(
                backgroundColor: Colors.transparent,
                appBar: appBarWidgetCustomTitle(context: context, titleParam: ""),
                body: SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      _spaceWdgt(),
                      Center(
                        child: Stack(
                          children: <Widget>[
                            new Image.asset(
                              "assets/images/user_icon.png",
                              width: 117,
                              height: 97,
                            ),
                          ],
                        ),
                      ),




  Widget backgroundBGContainer() {
      return Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("assets/images/ground_bg_image.png"),
              fit: BoxFit.cover,
            ),
            color: MyColor().groundBackColor),
      );
    }

don't forget to set foregroundColor attribite to the desired color in order to make the navigation icon and the title visible

Note that the foregroundColor default value is white.