设置背景图还是挺简单的,直接container里加个decration然后加个图片就行了,就像这样
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Container( decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'https://img.zcool.cn/community/0372d195ac1cd55a8012062e3b16810.jpg'), fit: BoxFit.cover, ), ))); } }
可以看到,appbar的部位并没有背景图,我们要做的就是全屏透明,把appbar那部分也要透明带上背景,这个需求也很简单
代码如下
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'https://img.zcool.cn/community/0372d195ac1cd55a8012062e3b16810.jpg'), fit: BoxFit.cover, )), child: Scaffold( backgroundColor: Colors.transparent, //把scaffold的背景色改成透明 appBar: AppBar( backgroundColor: Colors.transparent, //把appbar的背景色改成透明 // elevation: 0,//appbar的阴影 title: Text(widget.title), ), body: Center( child: Text('Hello World'), ))); } }
效果长这样
这就达到了我们想要的效果了,可以看到appbar那里还有个阴影,要去掉的话只要把上面代码的
// elevation: 0,//appbar的阴影
注释掉就行了
那么状态栏的全透明沉浸呢
在main.dart 的runapp后面加上
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
就可以了
状态栏沉浸来自
好!顶!赞