我从下面的图像复制设计:
reference design
代码:
import 'package:flutter/material.dart';
class PlanetBox extends StatelessWidget {
const PlanetBox({super.key});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(10),
width: 200,
height: 300,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Column(children: [
Image.asset('assets/images/planets/1_sun.png',
alignment: Alignment.topCenter),
const SizedBox(height: 20),
const Text(
"Sun",
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
const SizedBox(height: 5),
const Text(
"The Sun is the star at the center of the Solar System. It is a nearly perfect ball of hot plasma, heated to incandescence by nuclear fusion reactions in its core.",
textAlign: TextAlign.left,
style: TextStyle(fontSize: 15),
)
]));
}
}
字符串
目前,我的星球图像是在盒子装饰
current design的
如何在容器中更改行星图像(assets/images/planets/1_sun.png)的位置并添加背景文本(参考设计中右侧的浅灰色3)?
2条答案
按热度按时间kq4fsx7k1#
您可以通过使用堆栈小部件添加一些背景文本,将容器的子级放置在彼此的顶部,如下所示:
字符串
在本例中,“3”的渲染方式与您的参考图片相似。
当然,您还可以为图像添加另一个
Positioned
小部件,以将其定位到角落的距离。wfsdck302#
你主要关心的是你定位你的星球形象?所以,你可以简单地通过将你的卡片小部件 Package 在Stack小部件中,然后添加带有Positioned小部件的图像,你可以给予它一个负属性,这样就可以了。
字符串
使用上面Niko的代码,我做了一些修改并实现了页面浏览量构建器。你可以检查整个代码here