(Flutter) Image vibrates when moving slowly

Question

I am trying to animate an image that shifts slowly by 10px when you click a button, using AnimatedBuilder. I'm using AnimatedBuilder because I plan to animate multiple properties later on - not just position. Animation looks ok if my widget is a plain colour container with text, but it vibrates slightly if it's an image. It's most noticeable on the left and right edges of the image.

I tested in debug, profile and release mode without seeing any difference.

Why is the image vibrating and how can I prevent this?

Here is the video showing the issue: Link to video on Google Drive

Here is the code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _offsetAnimation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 1), vsync: this);

    _offsetAnimation =
        Tween<Offset>(begin: const Offset(-10, 0), end: const Offset(0, 0))
            .animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Container(
        width: 1920,
        height: 1080,
        color: Colors.grey.shade100,
        child: Stack(alignment: Alignment.center, children: [
          Image.asset('assets/Map.jpg'),
          Positioned(
              left: 100,
              child: AnimatedBuilder(
                animation: _controller,
                builder: ((context, child) {
                  return Transform.translate(
                      offset: _offsetAnimation.value, child: child);
                }),
                child: Image.asset("assets/Istanbul.png"),
              )),
          Positioned(
            top: 50,
            left: 0,
            child: ElevatedButton(
                onPressed: () => _controller.forward(),
                child: const Text("Animate Offset")),
          ),
          Positioned(
            top: 100,
            left: 0,
            child: ElevatedButton(
                onPressed: () => _controller.reset(),
                child: const Text("Reset Position")),
          )
        ]),
      )),
    );
  }
}

(Flutter) Image vibrates when moving slowly

0 Answers0