Question

如何用颤动制作半透明的应用栏？

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

例如：

Answer 1

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

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上无法具有透明或半透明的导航栏。

Answer 2

仅添加extendBodyBehindAppBar：true，

喜欢：

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

如何使半透明的Appbar颤动

2 个答案: