使 AppBar 透明，并显示设置为全屏的背景图像

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,
),
),
],
),
);
}
}

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,
);

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 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')),
),
)),
),
);
}

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

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),
);
}

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,
),
),
);

Scaffold(extendBodyBehindAppBar: true);

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,
  ),
  ),
  )
  

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.