英文:
How to cut through an Opacity Widget in flutter?
问题
我想要从容器中心去掉不透明度，以使其下面的图片可见。
我想要的效果：
我尝试过的方法：
我尝试的代码：
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class AppFour extends StatefulWidget {
@override
_AppFourState createState() => _AppFourState();
}
class _AppFourState extends State<AppFour> {
String img =
'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.cover,
),
),
),
Opacity(
opacity: 0.5,
child: Container(
color: Colors.white,
),
),
Center(
child: Container(
height: MediaQuery.of(context).size.height / 1.5,
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.fitHeight),
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.white,
width: 2.0,
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 10.0)
],
),
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey[800],
child: Transform.rotate(
angle: 45,
child: Icon(FontAwesomeIcons.syncAlt),
),
onPressed: () {},
),
);
}
}
英文:
I want to remove opacity from the center of a container to make the picture below it to be visible.
What I want:
What I tried:
Code I Tried:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class AppFour extends StatefulWidget {
@override
_AppFourState createState() => _AppFourState();
}
class _AppFourState extends State<AppFour> {
String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.cover,
),
),
),
Opacity(
opacity: 0.5,
child: Container(
color: Colors.white,
),
),
Center(
child: Container(
height: MediaQuery.of(context).size.height / 1.5,
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.fitHeight),
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.white,
width: 2.0,
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 10.0)
],
),
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey[800],
child: Transform.rotate(
angle: 45,
child: Icon(FontAwesomeIcons.syncAlt),
),
onPressed: () {},
),
);
}
}
答案1
得分: 2
我已经修改了您的代码，以实现您提供的示例图像效果：
截图
代码
String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.cover,
),
),
),
Opacity(
opacity: 0.5,
child: Container(
color: Colors.white,
),
),
Center(
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.white,
width: 5.0,
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 10.0,
)
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: Align(
alignment: Alignment.center,
widthFactor: 0.75,
heightFactor: 0.75,
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.fitHeight,
),
),
),
),
),
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey[800],
child: Transform.rotate(
angle: 45,
child: Icon(FontAwesomeIcons.syncAlt),
),
onPressed: () {},
),
);
}
<details>
<summary>英文:</summary>
I've modified your code to have the effect of the image that you gave as an example:
**Screenshot**
[![enter image description here][1]][1]
**Code**
String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.cover,
),
),
),
Opacity(
opacity: 0.5,
child: Container(
color: Colors.white,
),
),
Center(
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.white,
width: 5.0,
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 10.0
)
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: Align(
alignment: Alignment.center,
widthFactor: 0.75,
heightFactor: 0.75,
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.fitHeight
),
),
),
),
),
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey[800],
child: Transform.rotate(
angle: 45,
child: Icon(FontAwesomeIcons.syncAlt),
),
onPressed: () {},
),
);
}
[1]: https://i.stack.imgur.com/wFehU.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论