如何将 LinearGradient 颜色添加到 "cupertino_rounded_corners" 小部件?
How to add LinearGradient colour to "cupertino_rounded_corners" widget?
我使用“cupertino_rounded_corners”的文档创建了一个 Squircle 小部件 link:https://pub.dev/packages/cupertino_rounded_corners 使用以下代码。
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
),
margin: EdgeInsets.all(20.0),
child: Material(
color: Colors.pink,
shape: SquircleBorder(
radius: BorderRadius.all(
Radius.elliptical(40.0, 40.0),
),
),
elevation: 8.0,
child: Padding(
padding: EdgeInsets.all(30.0), child: Text("This is an example.")),
),
);
}
小部件如下所示:
但是,我无法为这个小部件添加 LinearGradient。
我更改了 Material
的 child
以包含 LinearGradient
,但它改变了整个矩形的颜色(不再有圆角了!)。
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue],
),
),
child: Padding(
padding: EdgeInsets.all(30.0),
child: Text("This is an example."),
),
),
结果如下:
问题:如何为这个小部件添加线性渐变?
我重新安排了一些代码并让它与以下代码一起工作:
Material(
color: Colors.transparent,
shape: const SquircleBorder(
radius: BorderRadius.all(
Radius.elliptical(40.0, 40.0),
),
),
clipBehavior: Clip.antiAlias,
elevation: 8.0,
child: Container(
padding: const EdgeInsets.all(30.0),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue],
),
),
child: const Text("This is an example."),
),
),
重要的是您的 Material 小工具有 clipBehavior: Clip.antiAlias
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Gradient Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Gradient Demo'),
),
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue])))),
));
}
}
我使用“cupertino_rounded_corners”的文档创建了一个 Squircle 小部件 link:https://pub.dev/packages/cupertino_rounded_corners 使用以下代码。
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
),
margin: EdgeInsets.all(20.0),
child: Material(
color: Colors.pink,
shape: SquircleBorder(
radius: BorderRadius.all(
Radius.elliptical(40.0, 40.0),
),
),
elevation: 8.0,
child: Padding(
padding: EdgeInsets.all(30.0), child: Text("This is an example.")),
),
);
}
小部件如下所示:
但是,我无法为这个小部件添加 LinearGradient。
我更改了 Material
的 child
以包含 LinearGradient
,但它改变了整个矩形的颜色(不再有圆角了!)。
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue],
),
),
child: Padding(
padding: EdgeInsets.all(30.0),
child: Text("This is an example."),
),
),
结果如下:
问题:如何为这个小部件添加线性渐变?
我重新安排了一些代码并让它与以下代码一起工作:
Material(
color: Colors.transparent,
shape: const SquircleBorder(
radius: BorderRadius.all(
Radius.elliptical(40.0, 40.0),
),
),
clipBehavior: Clip.antiAlias,
elevation: 8.0,
child: Container(
padding: const EdgeInsets.all(30.0),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue],
),
),
child: const Text("This is an example."),
),
),
重要的是您的 Material 小工具有 clipBehavior: Clip.antiAlias
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Gradient Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Gradient Demo'),
),
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue])))),
));
}
}