将不透明度添加到除一个小部件之外的整个页面

Question

如何将不透明度应用于整个页面，除了颤振中的appbarIconButton？类似flutter_showcaseview

@override
Widget build(BuildContext context) {
return Opacity(
opacity: 0.5,
child: Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: ...,
),
],
),
body: ...
),
);
}

任何帮助将不胜感激。

Answer 1

你会尝试制作自定义应用栏吗？
我做了一些样本。我希望它对你有所帮助。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Opacity Demo';
return MaterialApp(
title: appTitle,
debugShowCheckedModeBanner: false,
home: MyHomePage(title: appTitle),
);
}
}
// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
// Whether the green box should be visible
bool _visible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(
70,
),
child: SafeArea(
child: Container(
height: 70,
child: Stack(
children: <Widget> [
AnimatedOpacity(
opacity: _visible ? 1 : 0.2,
duration: Duration(milliseconds: 500),
child: AppBar(
title: Text('Title'),
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {}
),
),
]
),
),
),
),
body: AnimatedOpacity(
opacity: _visible ? 1 : 0.2,
duration: Duration(milliseconds: 500),
child: Center(
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Call setState. This tells Flutter to rebuild the
// UI with the changes.
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: Icon(Icons.flip),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Answer 2

以下是实现这一壮举的一种方法：

行、列和挠度可以有一个Expanded子项。它接收一个弯曲比率(根据文档，它决定了"如何将灵活的孩子刻入可用空间"(，以及自身的child。

假设我们的"真实"内容是垂直布局，例如Column。然后，我们可以用Stack(文档[此处]((https://api.flutter.dev/flutter/widgets/Stack 类.html(包装我们的内容，这使我们能够在应用的原始内容之上添加内容，并在其上添加新Column。

它将主要有两个Expanded子和一个占位符。占位符将确保一个小部件在其上方没有不透明度，并且Expanded子项可以为屏幕的其余部分绘制不透明的颜色。

这里有一个代码来说明这个想法：

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(
horizontal: 50.0,
),
child: Stack(
children: <Widget> [
Column(
children: <Widget>[
Container(
height: 240.0,
color: Colors.red,
),
Container(
height: 80.0,
width: double.infinity,
color: Colors.red,
child: Align(
alignment: Alignment.center,
child: Text("Your content here"),
),
),
Container(
height: 240.0,
color: Colors.red,
)
],
),
Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.black54,
),
),
Container(
height: 80.0
),
Expanded(
child: Container(
color: Colors.black54,
),
),
],
),
],
),
),
);
}
}