FlexibleSpaceBar 背景图像在折叠时保持一定的不透明度答案

【问题标题】：FlexibleSpaceBar background image maintains some opacity when collapsedFlexibleSpaceBar 背景图像在折叠时保持一定的不透明度
【发布时间】：2021-01-19 10:05:27
【问题描述】：

我在我的项目中使用 SliverAppBar。我在“灵活空间”参数中设置了背景颜色和背景图像。然而，当 appbar 折叠时，图像并没有完全淡出成为我选择的“背景颜色”，但我在“灵活空间”中选择的背景图像即使失去了一定程度的不透明度，也会在背景中保持可见。

这是小部件中的代码。谢谢。

import 'package:flutter/material.dart';
import './last-announcements.dart';
import './your-announcements.dart';
import './search-bar.dart';

class HomeOverview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const immageUrl = 'assets/images/Logo.png';
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          backgroundColor: Theme.of(context).primaryColor,          
          flexibleSpace: FlexibleSpaceBar(
              background: Padding(
                padding: const EdgeInsets.only(top: 25.0),
                child: Image(
                  image: AssetImage(immageUrl),
                  alignment: Alignment.topCenter,
                ),
              ),      
              centerTitle: true,
              title: Container(
                width: double.infinity,
                height: 50,
                color: Theme.of(context).primaryColor,
                margin: EdgeInsets.only(left: 10, right: 10),
                child: SearchBar(),
              )),
          expandedHeight: 250,
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          YourAnnouncemets(),
          LastAnnouncements(),
        ]))
      ],
    );
  }
}

【问题讨论】：

标签： image flutter background opacity sliverappbar

【解决方案1】：

在脚手架内试一试，脚手架主体内的CustomScrollView居中，因此背景颜色保留在灵活空间后面。

 return Scaffold(
  backgroundColor: Theme.of(context).primaryColor,
    body: Center(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              backgroundColor: Theme
                  .of(context)
                  .primaryColor,
              flexibleSpace: FlexibleSpaceBar(
                title: Text("Fleet"),
                background: Container(
                  decoration: BoxDecoration(
                    // borderRadius: BorderRadius.circular(20),
                    image: DecorationImage(
                      image: AssetImage("assets/carfinance.jpeg"),
                      fit: BoxFit.fill,
                    ),
                    boxShadow: [
                      BoxShadow(
                          blurRadius: 40,
                          offset: Offset(2, 4),
                          color: colors.AppColor.gradientSecond
                      )
                    ],
                  ),
                ),
                //padding: EdgeInsets.only(bottom: 100),
              ),
              expandedHeight: 250,
            ),
            SliverList(
                delegate: SliverChildListDelegate([
                  // YourAnnouncemets(),
                  // LastAnnouncements(),
                ])
            ),
          ],
        )
    )
);

【讨论】：