如何使半透明的应用栏颤动答案

【问题标题】：How to make a translucent appbar flutter如何使半透明的应用栏颤动
【发布时间】：2019-07-16 21:40:12
【问题描述】：

如何用flutter制作一个半透明的appbar？

我需要创建一个应用栏，但我不知道从哪里开始。

示例：

Image

【问题讨论】：

标签： flutter

【解决方案1】：

只添加extendBodyBehindAppBar: true,

喜欢：

return Scaffold(
  appBar: AppBar(
    title: Text("Photo"),
    backgroundColor: Colors.black12,
  ),
  extendBodyBehindAppBar: true,
  body: Container(),
);

【讨论】：

【解决方案2】：

以下是使用半透明应用栏制作脚手架布局的方法：

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

class TranslucentExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        // Overrides the standard translucent status bar.
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black12,
          // Remove any elevation to avoid seeing a shadow underneath the translucent material of the app bar.
          elevation: 0.0,
          title: Text('Photo frame'),
          action: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              tooltip: 'Settings',
              onPressed: () => print('something'),
            ),
          ],
        ),
        // You might have to change the fit of the image to make it 'full screen'.
        body: Image.network('url.to/image'),
      ),
    );
  }
}

很遗憾，无法完全重新创建您提供的屏幕截图，因为目前在带有 Flutter 应用的 Android 上无法拥有透明或半透明的导航栏。

【讨论】：