英文:
ImageFilter.blur() rounded corner in flutter
问题
我尝试为时钟创建模糊效果并使边角变圆，但borderRadius()不能改变模糊效果的边框。
我尝试在各处使用clipRRect()，但没有效果。我甚至进行了搜索，但没有人遇到类似的问题。
这是我尝试的内容：
Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/$bgImage'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
child: Column(
children: <Widget>[
Center(
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 300.0,
height: 120.0,
padding: EdgeInsets.all(10),
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.2),
borderRadius: BorderRadius.circular(30),
),
child: Column(
children: [
Text(
data['time'],
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
data['location'],
style: TextStyle(
fontSize: 20,
),
),
],
),
],
),
),
),
),
),
SizedBox(height: 30),
TextButton.icon(
onPressed: () {
Navigator.pushNamed(context, '/location');
},
icon: Icon(Icons.edit_location),
label: Text('Edit Location'),
),
],
),
),
),
);
如您在输出中所见，Container() 具有边框半径，但模糊效果没有。
英文:
I was trying to make a blurry effect for the clock and rounding the corners, but the borderRadius() can't change the border of the blur effect.
I tried clipRRect() everywhere, but it didn't work. I even searched but no one had my issue.
this is what I tried:
Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/$bgImage'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
child: Column(
children: <Widget>[
Center(
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 300.0,
height: 120.0,
padding: EdgeInsets.all(10),
// margin: EdgeInsets.symmetric(horizontal: 20),
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.2),
borderRadius: BorderRadius.circular(30),
),
child: Column(
children: [
Text(
data!['time'],
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
data!['location'],
style: TextStyle(
fontSize: 20,
// letterSpacing: 2,
),
),
],
),
],
),
),
),
),
),
SizedBox(height: 30 ,),
TextButton.icon(
onPressed: () {
Navigator.pushNamed(context, '/location');
},
icon: Icon(Icons.edit_location),
label: Text('Edit Location'),
),
],
),
),
),
);
As you can see in the output, the Contaner() has a border-radius but the blurry effect does not have it.
答案1
得分: 2
你需要将borderRadius移到ClipRRect小部件中，如下所示：
ClipRRect(
borderRadius: BorderRadius.circular(30),
child: BackdropFilter(
// ...
),
),
这是一个我基于你的示例制作的示例，你可以在zapp.run上尝试它：https://zapp.run/edit/flutter-zb3o06yqb3p0?entry=lib%2Fmain.dart&file=lib%2Fmain.dart
截图
完整的代码示例
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: DecoratedBox(
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1530634082454-f57b7d567b25?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
child: Column(
children: <Widget>[
Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 300.0,
height: 120.0,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.2),
),
child: Column(
children: [
const Text(
'5:19 PM',
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Berlin',
style: TextStyle(fontSize: 20),
),
],
),
],
),
),
),
),
),
const SizedBox(height: 30),
TextButton.icon(
onPressed: () {
Navigator.pushNamed(context, '/location');
},
icon: const Icon(Icons.edit_location),
label: const Text('Edit Location'),
),
],
),
),
),
);
}
}
<details>
<summary>英文:</summary>
You need to move your `borderRadius` inside your `Container` to your `ClipRRect` widget.
```dart
ClipRRect(
borderRadius: BorderRadius.circular(30),
child: BackdropFilter(
// ...
),
),
Here's an example I've made based on your example which you can try on zapp.run: https://zapp.run/edit/flutter-zb3o06yqb3p0?entry=lib%2Fmain.dart&file=lib%2Fmain.dart
Screenshot
Full code sample
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: DecoratedBox(
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1530634082454-f57b7d567b25?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
child: Column(
children: <Widget>[
Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 300.0,
height: 120.0,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.2),
),
child: Column(
children: [
const Text(
'5:19 PM',
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Berlin',
style: TextStyle(fontSize: 20),
),
],
),
],
),
),
),
),
),
const SizedBox(height: 30),
TextButton.icon(
onPressed: () {
Navigator.pushNamed(context, '/location');
},
icon: const Icon(Icons.edit_location),
label: const Text('Edit Location'),
),
],
),
),
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论