我正在尝试在 Flutter 中重新创建此特定卡，但找不到合适的解决方案

Question

如何在flutter中重新创建相同的布局，完全按照图片中给出的方式?我想要关于相同的工作流程。颤振布局

Answer 1

你可以这样做，做一些样式更改

Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
clubBadge(),
Column(
children: [
const Text("Premium Public Lobby"),
const Text("Prediction Deadline - Tue, 10 Sep"),
const SizedBox(height: 12),
Column(children: [
OutlinedButton(
onPressed: () {},
child: const Text("Go back"),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
)),
)
]),
],
),
clubBadge(),
],
),
),
// club widget badge
Widget clubBadge() {
return Flexible(
child: Container(
height: 60,
width: 60,
decoration:
const BoxDecoration(color: Colors.black, shape: BoxShape.circle),
child: Image.asset("myImage.png"),
),
);
}