Randomly place animated gifs inside of container in Flutter - flutter

Question

I want to randomly place animated gifs inside of a sized container. My problem is that the gifs are always placed outside of the container
This is the widget which gives me the functionality to generate a gridview and place gifs at specific positions inside of it.
class MultiGifPage extends StatefulWidget {
final Map<int, GifImage> gifs;
final Map<int, Matrix4> positions;
MultiGifPage({required this.gifs, required this.positions});
_MultiGifPageState createState() => _MultiGifPageState(this.gifs, this.positions);
}
class _MultiGifPageState extends State<MultiGifPage> with TickerProviderStateMixin {
Map<int, GifImage> gifs;
Map<int, Matrix4> positions;
_MultiGifPageState(this.gifs, this.positions);
Random random = new Random();
#override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
crossAxisCount: (MediaQuery.of(context).size.width / 100).round(),
children: List.generate(gifs.length, (index) {
return Container(child: gifs[index], transform: positions[index]);
}),
),
);
}
}
Here you can see where I am trying to use the other functionality:
class _EqualsWidget extends State<EqualsWidget> with TickerProviderStateMixin {
late GifImage _gif = GifImage(
image: AssetImage("assets/images/growing_plant_transparent.gif"),
controller: gif_Controller_tree);
int gif_index = 0;
Map<int, GifImage> _list = new Map();
Map<int, Matrix4> positions = new Map();
Random random = new Random();
late Size size = new Size(0, 0);
late double xAxis = 0;
late double yAxis = 0;
late GlobalKey equal_key = new GlobalKey();
#override
void initState() {
super.initState();
//print('INSTANCE: WidgetsBinding.instance.addPostFrameCallback(_afterLayout)}');
equal_key = new GlobalKey();
size = new Size(0, 0);
xAxis = 0;
yAxis = 0;
WidgetsBinding.instance?.addPostFrameCallback(_afterLayout);
}
_afterLayout(_) {
_getWidgetInfo();
Timer.periodic(Duration(milliseconds: 1000), (timer) {
FlutterGifController controller = new FlutterGifController(vsync: this);
controller.animateTo(89, duration: Duration(milliseconds: 1000));
_list.addAll({
gif_index: GifImage(
image: AssetImage("assets/images/growing_plant_transparent.gif"),
controller: controller)
});
double x = random.nextDouble() * (xAxis + size.width);
double y = random.nextDouble() * (yAxis + size.height);
positions.addAll({gif_index: Matrix4.translationValues(x, y, 0)});
++gif_index;
setState(() {});
});
}
void _getWidgetInfo() {
final RenderBox renderBox =
equal_key.currentContext?.findRenderObject() as RenderBox;
size = renderBox.size;
print('Size: ${size.width}, ${size.height}');
final Offset offset = renderBox.localToGlobal(Offset.zero);
print('Offset: ${offset.dx}, ${offset.dy}');
print(
'Position: ${(offset.dx + size.width) / 2}, ${(offset.dy + size.height) / 2}');
xAxis = offset.dx;
print(xAxis);
yAxis = offset.dy;
}
Widget equalText(
String typeTxt, double convert, String endTxt, width, height, gif) {
var formatter = NumberFormat.decimalPattern('vi_VN');
return Container(
key: equal_key,
decoration: BoxDecoration(border: Border.all(color: Colors.black)),
height: height / 6,
width: width / 2,
child: Center(
child: Column(children: [
Expanded(child: MultiGifPage(gifs: _list, positions: positions)),
Text(
typeTxt +
' ${formatter.format((_endSum * convert).round())} ' +
endTxt,
style: TextStyle(fontFamily: Config.FONT),
)
])),
);
}
}
I have also tried a simpler version where I just use the width / 2 height / 6 of the container but that also does not work. I just want that the Container is filled with the gifs and I hav no clue how to do it and would really appreciate some help :)