blocks|key|1333882|text|您可以使用Stack小部件这样做。遵循下面的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333883|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,
++++++++++++),
++++++++++),
++++++++],
++++++),
++++);
++}
}|code-block|syntax|javascript|1333884|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>import 'package:flutter/material.dart';

void main() =&gt; 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() =&gt; _HomeState();
}

class _HomeState extends State&lt;Home&gt; {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Stack(
 children: &lt;Widget&gt;[
 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,
 ),
 ),
 ],
 ),
 );
 }
}
</code></pre>

blocks|key|1333921|text|就我而言，我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333922|另外，使用自定义回退按钮创建一个应用程序栏(在本例中使用FloatingActionButton)。您仍然可以在Stack中添加小部件。|offset|length|style|CODE|1333923|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();
++}
}|code-block|syntax|javascript|1333924|在下面的链接中，您可以找到更多信息链接|1333925|entityMap|0|LINK|mutability|MUTABLE|url|https://mrflutter.com/fullscreen-page-with-transparent-appbar-in-flutter/^0|0|S|K|1K|5|0|0|H|2|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

In my case I did it as follows:

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

<pre><code>class Home extends StatefulWidget {
 @override
 _EditProfilePageState createState() =&gt; _EditProfilePageState();
}

class _HomeState extends State&lt; Home &gt; {

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Stack(
 children: &lt;Widget&gt;[
 this._backgroundImage(), // --&gt; Background Image
 Positioned( // --&gt; App Bar
 child: AppBar(
 backgroundColor: Colors.transparent,
 elevation: 0.0,
 leading: Padding( // --&gt; 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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80'),
 placeholder: AssetImage('assetName'),
 ),
 );
 }

 void _onBackPressed() {
 Navigator.of(context).pop();
 }
}
</code></pre>

In the following link you can find more information <a href="https://mrflutter.com/fullscreen-page-with-transparent-appbar-in-flutter/" rel="nofollow noreferrer">Link</a>

blocks|key|2176944|text|你可以试试这段代码对我有用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2176945|@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(),
++++++++++++++),
++++++++++++),
++++++++++)
++++++++],
++++++),
++++);
++}|code-block|syntax|javascript|2176946|backgroundImage|2176947|DecorationImage+backgroundImage+=+new+DecorationImage(
++image:+new+ExactAssetImage('assets/images/welcome_background.png'),
++fit:+BoxFit.cover,
);|2176948|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can Try this This code work for me

<pre><code>@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: &lt;Widget&gt;[
 new Container(
 child: Stack(
 children: &lt;Widget&gt;[
 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(),
 ),
 ),
 )
 ],
 ),
 );
 }
</code></pre>

backgroundImage 

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

blocks|key|1333949|text|Scaffold+(在稳定-v1.12.13%2Bhotfix.5中)支持这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333950|将Scaffold+extendBodyBehindAppBar设为true，|unordered-list-item|offset|length|style|CODE|1333951|将AppBar+elevation设置为0以消除阴影，|1333952|根据需要设置AppBar+backgroundColor透明度。|1333953|++@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")),
++++);
++}|code-block|syntax|javascript|1333954|entityMap^0|0|A|M|0|8|9|0|D|F|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@$E|V|F|W|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@$E|Y|F|Z|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|10|8|@$E|11|F|12|G|H]]|9|@]|A|$]]|$1|M|3|N|5|O|7|13|8|@]|9|@]|A|$P|Q]]|$1|R|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|S|$]]

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

<ul>
<li>Set Scaffold <code>extendBodyBehindAppBar</code> to true,</li>
<li>Set AppBar <code>elevation</code> to 0 to get rid of shadow,</li>
<li>Set AppBar <code>backgroundColor</code> transparency as needed.</li>
</ul>

<pre class="lang-dart prettyprint-override"><code> @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")),
 );
 }
</code></pre>

blocks|key|2177006|text|您可以使用Scaffold的property+"extendBodyBehindAppBar：true“别忘了用SafeArea包装孩子|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2177007|++@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')),
++++++++++),
++++++++)),
++++++),
++++);
++}|code-block|syntax|javascript|2177008|​|2177009|📷|atomic|2177010|2177011|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/9ff9d048f2fb37841deed0286582d3aa.png|imageAlt^0|O|M|1B|4|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|P|3|L|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X|Y|-4]]]]

You can use Scaffold's property &quot;extendBodyBehindAppBar: true&quot;
Don't forget to wrap child with SafeArea
<pre><code> @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')),
 ),
 )),
 ),
 );
 }
</code></pre>
<a href="https://i.stack.imgur.com/Mg6X0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mg6X0.png" alt="enter image description here" /></a>

blocks|key|2177013|text|我就是这么做的，而且起作用了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2177014|Scaffold+(在稳定-v1.12.13%2Bhotfix.5中)支持这一点。|2177015|将Scaffold+extendBodyBehindAppBar设置为true，将AppBar提升设置为0以消除阴影，根据需要设置AppBar+backgroundColor透明度。|2177016|诚挚的问候|2177017|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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

blocks|key|2177083|text|使用堆栈|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2177084|设置背景图像|unordered-list-item|2177085|另一个Scaffold()+|2177086|设置背景色变送器|2177087|设置自定义应用程序栏|2177088|与singleChildScrollView或ListView一起使用列|2177089|2177090|2177091|​|2177092|📷|atomic|offset|length|2177093|2177094|@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),
++++++);
++++}|code-block|syntax|javascript|2177095|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/36e7c8c82b14cf772395ced7705687f3.png|imageAlt^0|0|1|2|2|2|2|1|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1B|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|1C|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|1D|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1E|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|1F|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1J|8|@]|9|@$T|1K|U|1L|1|1M]]|A|$]]|$1|V|3|P|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|1O|8|@]|9|@]|A|$Z|10]]|$1|11|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18|19|-4]]]]

use stack
<ul>
<li>set background image
<ul>
<li>Another Scaffold()
<ul>
<li>set background color transperant</li>
<li>set custom appbar</li>
<li>use column with singleChildScrollView or ListView</li>
</ul>
</li>
</ul>
</li>
</ul>
<a href="https://i.stack.imgur.com/74VMd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/74VMd.png" alt="enter image description here" /></a>
<pre><code>@override Widget build(BuildContext context) {
 return Scaffold(
 body: Stack(
 children: &lt;Widget&gt;[
 backgroundBGContainer(),
 Scaffold(
 backgroundColor: Colors.transparent,
 appBar: appBarWidgetCustomTitle(context: context, titleParam: &quot;&quot;),
 body: SingleChildScrollView(
 child: Column(
 children: &lt;Widget&gt;[
 _spaceWdgt(),
 Center(
 child: Stack(
 children: &lt;Widget&gt;[
 new Image.asset(
 &quot;assets/images/user_icon.png&quot;,
 width: 117,
 height: 97,
 ),
 ],
 ),
 ),




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

blocks|key|481165|text|这些似乎对我都没有用，我的似乎是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|481166|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...
++++++++),
+++++++),
+++++],
+++),
+);|code-block|syntax|javascript|481167|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

None of these seem to work for me, mine went something like this:
<pre><code>return Scaffold(
 extendBodyBehindAppBar: true,
 appBar: AppBar(
 backgroundColor: Colors.transparent,
 iconTheme: IconThemeData(color: Colors.white),
 elevation: 0.0,
 ),
 body: Stack(
 children: &lt;Widget&gt;[
 Container(
 decoration: BoxDecoration(
 image: DecorationImage(
 image: NetworkImage(
 'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1275&amp;q=80'),
 fit: BoxFit.cover,
 ),
 ),
 child: Padding(
 padding: const EdgeInsets.fromLTRB(0, 100, 0, 0),
 child:
 // Column of widgets here...
 ),
 ),
 ],
 ),
 );
</code></pre>

blocks|key|2177170|text|输出：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2177171|​|2177172|📷|atomic|2177173|2177174|答案很多，但没有人解释为什么extendBodyBehindAppBar工作？它之所以有效，是因为当我们将extendBodyBehindAppBar赋值为true时，小部件的主体将获得AppBar的高度，我们将看到一个覆盖AppBar区域的图像。|CODE|2177175|简单示例：|2177176|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,
++++++++),
++++++),
++++);|code-block|syntax|javascript|2177177|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/094e51dcb9fb00017add082175059474.png|imageAlt^0|0|3|0|0|0|1|0|0|0|E|M|1H|M|2L|6|34|6|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|K|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1D|8|@$9|1E|A|1F|B|N]|$9|1G|A|1H|B|N]|$9|1I|A|1J|B|N]|$9|1K|A|1L|B|N]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1P|8|@]|D|@]|E|$T|U]]|$1|V|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12|13|-4]]]]

Output:
<a href="https://i.stack.imgur.com/qlBWp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qlBWp.png" alt="enter image description here" /></a>
A lot of answers but nobody explains why <code>extendBodyBehindAppBar</code> works?
It works because when we assigned <code>extendBodyBehindAppBar</code> as true, then the body of the widget takes the height of <code>AppBar</code>, and we see an image covering the <code>AppBar</code> area.
Simple Example:
<pre><code>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,
 ),
 ),
 );
</code></pre>

blocks|key|479412|text|Scaffold(extendBodyBehindAppBar:+true);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|479413|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>Scaffold(extendBodyBehindAppBar: true);
</code></pre>

blocks|key|2177248|text|可能有许多情况，例如，您是否希望保持AppBar，无论您是否希望使状态栏可见，为此，您可以将Scaffold.body包装在SafeArea中，如果您希望AppBar没有任何阴影(与我在示例2中提供的红色不同)，您可以将其颜色设置为Colors.transparent。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2177249|完整图像(没有AppBar)|unordered-list-item|2177250|📷|atomic|2177251|支架(+extendBodyBehindAppBar:+true，body:+SizedBox.expand(儿童:+Image.network(+'https://wallpaperaccess.com/full/3770388.jpg'，fit:+BoxFit.cover，)，)|2177252|完整图像(使用AppBar)|2177253|2177254|支架(+extendBodyBehindAppBar:+true，appBar:+AppBar(+backgroundColor:+Colors.transparent，shadowColor:+Colors.red，标题:+Text('MyApp')，)，body:+SizedBox.expand(+child:+Image.network(+https://wallpaperaccess.com/full/3770388.jpg'，fit:+BoxFit.cover，)，)|2177255|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/0a77ce343923084ab1b2bf15f5054119.png|imageAlt|1|LINK|MUTABLE|url|https://wallpaperaccess.com/full/3770388.jpg'|2|https://developer.qcloudimg.com/http-save/yehe-900000/6ae046aa8be892b532bb80f9aebc4178.png|3^0|I|6|1A|D|1Q|8|25|6|38|I|0|7|6|0|0|1|0|0|23|19|1|0|7|6|0|0|1|2|0|4U|19|3|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|L|3|M|5|6|7|1R|8|@]|D|@$9|1S|A|1T|1|1U]]|E|$]]|$1|N|3|O|5|H|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|P|3|J|5|K|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|Q|3|R|5|6|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|S|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z|10|-4]]|11|$5|12|W|13|E|$14|15]]|16|$5|V|W|X|E|$Y|17|10|-4]]|18|$5|12|W|13|E|$14|15]]]]

There could be many cases, for example, do you want to keep the <code>AppBar</code> or not, whether or not you want to make the status bar visible, for that, you can wrap <code>Scaffold.body</code> in <code>SafeArea</code> and if you want <code>AppBar</code> to not have any shadow (unlike the red I provided in example 2), you can set its color to <code>Colors.transparent</code>:
<ul>
<li><h4>Full image (without <code>AppBar</code>)</h4>
<a href="https://i.stack.imgur.com/r5MYA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/r5MYA.png" alt="enter image description here" /></a>
<pre class="lang-dart prettyprint-override"><code>Scaffold(
 extendBodyBehindAppBar: true,
 body: SizedBox.expand(
 child: Image.network(
 'https://wallpaperaccess.com/full/3770388.jpg',
 fit: BoxFit.cover,
 ),
 ),
)
</code></pre>
</li>
<li><h4>Full image (with <code>AppBar</code>)</h4>
<a href="https://i.stack.imgur.com/aVPEO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aVPEO.png" alt="enter image description here" /></a>
<pre class="lang-dart prettyprint-override"><code>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,
 ),
 ),
)
</code></pre>
</li>
</ul>

blocks|key|1334186|text|不要忘记将foregroundColor设置为所需的颜色，以便使导航图标和标题可见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334187|注意，foregroundColor默认值是白色的。|1334188|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

I have added AppBar in my flutter application. My screen already have a background image, where i don't want to set appBar color or don't want set separate background image to appBar. 

I want show same screen background image to appBar also.

I already tried by setting appBar color as transparent but it shows color like gray. 

Example code:

<pre><code>appBar: new AppBar(
 centerTitle: true,
// backgroundColor: Color(0xFF0077ED),
 elevation: 0.0,
 title: new Text(
 "DASHBOARD",
 style: const TextStyle(
 color: const Color(0xffffffff),
 fontWeight: FontWeight.w500,
 fontFamily: "Roboto",
 fontStyle: FontStyle.normal,
 fontSize: 19.0
 )),
 )
</code></pre>

<a href="https://i.stack.imgur.com/Rt8uv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Rt8uv.png" alt="enter image description here"></a>

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我在我的颤振应用程序中添加了AppBar。我的屏幕已经有了一个背景图像，我不想设置appBar颜色，也不希望将单独的背景图像设置为appBar。我也想向appBar显示同样的屏幕背景图像。我已经尝试过将appBar颜色设置为透明，但它显示的颜色像灰色。示例代码：appBar: new AppBar(        ce...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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