英文:
How to add gradient to container and image in flutter
问题
我试图在我的Flutter应用程序中复制下面的设计
，但卡在添加背景颜色和带有透明背景的小菱形上。
迄今为止我的代码使用纯色背景和字体颜色不匹配。
我尝试给容器添加线性背景颜色，但不幸的是它看起来不像上面的设计。
另外，我尝试使用canvas.drawPath()绘制一些菱形，但无法弄清楚如何排列它以使其看起来像图像中的内容。
以下是我的代码（cc是Colors.blueGrey）：
Container(
decoration: BoxDecoration(
border: Border.all(
width: 0.1,
color: i % 2 == 0 ? Colors.transparent : Colors.black,
),
boxShadow: const [
BoxShadow(
spreadRadius: 0.1,
color: Colors.blueGrey,
blurRadius: 0.5,
offset: Offset(0, 0),
),
],
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
color: i % 2 == 0 ? Colors.white : Colors.blueGrey,
),
child: Padding(
padding: const EdgeInsets.all(14),
child: Column(
children: [
Row(
children: [
const Image(
image: AssetImage('./assets/svg/diamond.png'),
height: 30,
width: 30,
),
const SizedBox(width: 20),
Column(
children: [
Text(
'Diamond Premium',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: cc,
),
),
Container(
decoration: BoxDecoration(
color: Colors.green[800],
border: Border.all(
color: Colors.greenAccent.shade100.withAlpha(50),
width: 0.5,
),
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
),
margin: const EdgeInsets.only(top: 2),
padding: const EdgeInsets.fromLTRB(5, 2, 5, 2),
child: Text(
'Current',
style: TextStyle(
color: cc,
),
),
),
],
),
],
),
const SizedBox(
height: 30,
),
// 其他部分的代码...
],
),
),
),
请注意，这只是您代码的一部分，还有其他部分的代码没有提供。希望这可以帮助您开始实现您的设计。如果您有其他问题或需要进一步的帮助，请随时提问。
英文:
I am trying to replicate the design below in my flutter application but stuck at the point of adding the background color and the tiny diamonds with transparent backgrounds.
My code so far uses a plain background with a font color that does not match.
I have tried to give the container a linear background color but it does not unfortunately look like the design above.
Also I have tried to draw some diamonds with the canvas.drawPath() but can't figure out how to arrange it to make it look like what is in the image.
Here is my code below (cc is Colors.blueGrey):
Container(
decoration: BoxDecoration(
border: Border.all(
width: 0.1,
color: i % 2 == 0 ? Colors.transparent : Colors.black,
),
boxShadow: const [
BoxShadow(
spreadRadius: 0.1,
color: Colors.blueGrey,
blurRadius: 0.5,
offset: Offset(0, 0),
),
],
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
color: i % 2 == 0 ? Colors.white : Colors.blueGrey,
// color: i % 2 == 0 ? Colors.white : const Color.fromARGB(255, 2, 48, 71).lighten(3),
),
child: Padding(
padding: const EdgeInsets.all(14),
child: Column(
children: [
Row(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
const Image(
image: AssetImage('./assets/svg/diamond.png'),
height: 30,
width: 30,
),
const SizedBox(width: 20),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Diamond Premium',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: cc,
),
),
Container(
decoration: BoxDecoration(
color: Colors.green[800],
border: Border.all(
color: Colors.greenAccent.shade100.withAlpha(50),
width: 0.5,
),
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
),
margin: const EdgeInsets.only(top: 2),
padding: const EdgeInsets.fromLTRB(5, 2, 5, 2),
child: Text(
'Current',
style: TextStyle(
color: cc,
),
),
),
],
),
],
),
const SizedBox(
height: 30,
),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.money_rounded,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Cost',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$40,000.00',
style: TextStyle(color: cc, fontSize: 14, fontWeight: FontWeight.w900),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.lock_clock,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Duration',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'40 days',
style: TextStyle(color: cc, fontSize: 14, fontWeight: FontWeight.w900),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.forward,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Cash Out',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$40.00 - \$100.00',
style: TextStyle(color: cc, fontSize: 14, fontWeight: FontWeight.w900),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
child: DottedLine(
dashColor: cc,
lineThickness: 0.4,
),
),
const SizedBox(
height: 5,
),
Container(
padding: const EdgeInsets.all(10),
color: Colors.blue.withOpacity(0.1),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.select_all_sharp,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Watch',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$0.005',
style: TextStyle(
color: cc,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.select_all_sharp,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Share',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$0.1',
style: TextStyle(
color: cc,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
],
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.select_all_sharp,
color: cc,
size: 16,
),
const SizedBox(
width: 5,
),
Text(
'Click',
style: TextStyle(
color: cc,
fontSize: 14,
),
)
],
),
Text(
'\$0.0005',
style: TextStyle(
color: cc,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
],
),
],
),
),
const SizedBox(
height: 10,
),
// button goes here
// okay
SizedBox(
width: double.infinity,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: Colors.green,
),
onPressed: () => false,
child: const Text('Upgrade'),),
),
],
),
],
),
),
),
答案1
得分: 1
更容易的方法是使用现成的SVG作为背景，而不是重新设计。
例如，如果您直接使用像我下面留下的链接中的SVG作为背景，您将获得更快的结果。您还可以制作自己的SVG文件。您可以使用这些方法获得更快的结果。
英文:
The easier way is to use a ready-made svg for the background rather than redesign.
For example, if you directly use an svgye as a background, as in the link I left below, you will get a faster result. You can also produce your own svg files. You can get faster results with these methods.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论