如何使图像适合作为颤振状态栏的背景？

Question

我正在尝试在颤振项目中的状态栏背景中应用图像。那么哪个小部件可以帮助我应用以下预期结果。

详情页.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

使用 Scaffold 属性 extendBodyBehindAppBar: true,并设置statusBarColor: Colors.transparent

此代码用于状态栏颜色。

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

这是我当前项目中的代码示例。

  @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

您可以使用 来实现它FlexibleSpaceBar，这里是示例代码。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 300,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.asset("assets/images/chocolate.jpg", fit: BoxFit.cover),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(title: Text("Item ${index}")),
            childCount: 100,
          ),
        ),
      ],
    ),
  );
}