Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some animations are displayed incorrectly (only on Android!) #385

Open
InfiniteFalltrough opened this issue Dec 4, 2024 · 0 comments
Open

Comments

@InfiniteFalltrough
Copy link

InfiniteFalltrough commented Dec 4, 2024

Hey!
Perhaps someone understands this and will be able to tell us what we are doing wrong.

Problem - some animations (~1 from 10) are displayed incorrectly only on Android (on iOS everything works)

  1. flutter doctor
    flutter doctor.txt

  2. [Lottie](lottie: ^2.7.0)

  3. Explanation
    Background layer 720x20000 on the left as it should be, on the right how it sometimes works (layer just covers part of the scene)
    Screenshot 2024-12-04 at 10 27 00 AM

examples:

IMG_4084
IMG_4085
IMG_4086

  1. Lottie JSON
    Mahabharata 3_1_chunk.json

  2. Code

`
@OverRide
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context).size;
return Stack(
children: [
SingleChildScrollView(
controller: _scrollController,
child: Container(
constraints: BoxConstraints(
minWidth: screenSize.width,
minHeight: widget.scrollHeight,
),
child: const EmptyView(),
),
),

    // Overlay
    IgnorePointer(
      ignoring: true, // same as allowsHitTesting(false) in SwiftUI
      child: Align(
        alignment: Alignment.center,
        child: Container(
          width: screenSize.width,
          height: screenSize.height,
          child: Stack(
            alignment: Alignment.center,
            children: [
              SizedBox.expand(
                child: FittedBox(
                  fit: BoxFit.cover,
                  child: Lottie.file(
                    widget.lottieFile1,
                    fit: BoxFit.fill,
                    width: screenSize.width,
                    height: screenSize.height,
                    controller: _animationController1,
                    onLoaded: (composition) {
                      // set the animation duration based on the Lottie composition
                      _animationController1.duration = composition.duration;
                    },
                  ),
                ),
              ),
              SizedBox.expand(
                child: FittedBox(
                    fit: BoxFit.cover,
                    child: Lottie.file(
                      widget.lottieFile2,
                      fit: BoxFit.fill,
                      width: screenSize.width,
                      height: screenSize.height,
                      controller: _animationController2,
                      onLoaded: (composition) {
                        // set the animation duration based on the Lottie composition
                        _animationController2.duration =
                            composition.duration;
                      },
                    )),
              )
            ],
          ),
        ),
      ),
    ),
  ],
);

}

void _onScroll() {
setState(() {
// calculate scroll value as a percentage of total scrollable height
double scrollPercent =
_scrollController.offset / _scrollController.position.maxScrollExtent;
print(scrollPercent);
// update animation progress based on the scroll percentage
_animationController1.value = scrollPercent.clamp(0.0, 1.0);
_animationController2.value = scrollPercent.clamp(0.0, 1.0);
});
}
`

Any help will be appreciated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant