flutter全屏背景图(包括appbar和状态栏)以及沉浸状态栏的设置

深碍√TFBOYSˉ_ 2023-01-16 02:55 435阅读 0赞

设置背景图还是挺简单的，直接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(
                    '/images/20221022/b499e74705684070a1c7c1a95b436ea9.png'),
                fit: BoxFit.cover,
              ),
            )));
      }
    }

![7e24283496dc297947c65201d0d4798e.png][]

可以看到，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(
                  '/images/20221022/b499e74705684070a1c7c1a95b436ea9.png'),
              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'),
                )));
      }
    }

![db94f5088321ac96101bc6eca10402e7.png][]

这就达到了我们想要的效果了，可以看到appbar那里还有个阴影，要去掉的话只要把上面代码的

// elevation: 0,//appbar的阴影

注释掉就行了

那么状态栏的全透明沉浸呢

在**main.dart** 的runapp后面加上

SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

就可以了

状态栏沉浸来自

[https://www.jianshu.com/p/97e93c82ccef][https_www.jianshu.com_p_97e93c82ccef]

![0372d195ac1cd55a8012062e3b16810.jpg][]

[7e24283496dc297947c65201d0d4798e.png]: /images/20221022/666c1a7b8f90415c92f3a1621d952909.png
[db94f5088321ac96101bc6eca10402e7.png]: /images/20221022/9bb3eda0af3648628fea67b1ac43a739.png
[https_www.jianshu.com_p_97e93c82ccef]: https://www.jianshu.com/p/97e93c82ccef
[0372d195ac1cd55a8012062e3b16810.jpg]: /images/20221022/b499e74705684070a1c7c1a95b436ea9.png