jeudi 2 février 2023

Randomly place animated gifs inside of container in Flutter

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 :)




Aucun commentaire:

Enregistrer un commentaire