我们需要在圆卡中放几张图片。
每次我们随机选择:我们随机选择每张图片的几张图片,它的大小和角度。
我们尝试使用“Stack widget”和“positined”来做到这一点,但图像超出了卡片范围。
我们想知道是否有另一种方法来创建它(使用其他小部件)?
或者如果我们的方法很好如何改进它
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Double(),
);
}
}
class Double extends StatefulWidget {
const Double({super.key});
@override
State<Double> createState() => _Double();
}
class _Double extends State<Double> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 220, 180, 126),
),
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/back.png"), fit: BoxFit.cover),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
"Click on the only symbol on the right card that matches the symbol on the left card:",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.bold),
),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
width: 15,
),
Container(
height: 400,
width: 400,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(500)),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 200,
top: 10,
child: SizedBox(
height: 70,
child: RotatedBox(
quarterTurns: 18,
child: Image.asset(
"assets/images/demostar.png",
),
),
),
),
Positioned(
right: 200,
bottom: 50,
child: SizedBox(
height: 160,
child: RotatedBox(
quarterTurns: 0,
child: Image.asset(
"assets/images/demostar.png",
),
),
),
),
Positioned(
right: 250,
bottom: 200,
child: SizedBox(
height: 130,
child: RotatedBox(
quarterTurns: 23,
child: Image.asset(
"assets/images/demostar.png",
),
),
),
),
],
),
),
Container(
height: 400,
width: 400,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(500)),
),
const SizedBox(
width: 15,
),
]),
),
],
),
));
}
}