How to fit image as the background of status bar in flutter?

Question

I am trying to apply image in the background of the status bar in an flutter project. So which widget can help me to apply the following expected result.

detailpage.dart

import 'package:flutter/material.dart';

class MyDetailPage extends StatefulWidget {
  @override
  _MyDetailPageState createState() => _MyDetailPageState();
}

class _MyDetailPageState extends State<MyDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            height: 300,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/image2.png"),
                fit: BoxFit.fitHeight,
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

Use Scaffold property extendBodyBehindAppBar: true, and set statusBarColor: Colors.transparent

This code is for status bar colour.

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

Here is an example of code in my current project.

  @override
  Widget build(BuildContext context) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent
    ));
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Column(
        children: [
          Container(
            height: 250,
            child: Container(
              child: Stack(
                alignment: Alignment.topLeft,
                children: [
                  Container(
                    width: screenWidthPercentage(context,percentage: 1),
                    child: Image.network(
                      contentImage,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 48.0,left: 12),
                    child: Icon(Icons.arrow_back,color: Colors.white,),
                  ),
                ],
              ),
            ),
          ),
     
        ],
      ),
    );
  }
}

Answer 2

you can do it by not keeping SafeArea widget and set statusbar color as transparent.

I have created an example as below.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class FullScreen extends StatefulWidget {
  const FullScreen({Key? key}) : super(key: key);

  @override
  _FullScreenState createState() => _FullScreenState();
}

class _FullScreenState extends State<FullScreen> {
  @override
  void initState() {
    super.initState();
    SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.light
          //color set to transperent or set your own color
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: buildBody(),
    );
  }

  Widget buildBody() {
    return SizedBox(
      height: 400,
      width: double.infinity,
      child: Card(
        clipBehavior: Clip.antiAlias,
        margin: EdgeInsets.all(0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(40),
              bottomRight: Radius.circular(40)),
        ),
        child: Image.network(
          'https://source.unsplash.com/random',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

I have added card as it gives nice elevation effect to the image 😎 . FYI keep margin as 0 in card if you are using card.