Comments (6)
I think you should drop the renderCache: RenderCache.raster
. It's not supported in the web with the html-renderer.
Alternatively, you can also try the canvaskit renderer.
from lottie-flutter.
@konsultaner can you show how you configure the lottie widget? Do you use the renderCache
property?
from lottie-flutter.
@xvrh sorry, totally rushed that issue. This is my file including the lottie asset.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class QRCodeLoginNoScan extends StatelessWidget {
const QRCodeLoginNoScan({super.key});
@override
Widget build(BuildContext context) {
var lottieDelegates = [
if (Theme.of(context).brightness == Brightness.dark)
ValueDelegate.colorFilter(
const [ '**'],
value: ColorFilter.mode(Theme.of(context).colorScheme.onSurface, BlendMode.src),
),
if (Theme.of(context).brightness == Brightness.light)
ValueDelegate.colorFilter(
const [ '**', 'scan', '**'],
value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
),
if (Theme.of(context).brightness == Brightness.light)
ValueDelegate.colorFilter(
const [ '**', 'phone', 'Group 1', '**'],
value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
)
];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 200, horizontal: 20),
child: Center(
child: FittedBox(
fit: BoxFit.contain,
child: Lottie.asset(
width: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
height: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
fit: BoxFit.contain,
'assets/lottie/qr_code_animation.json',
renderCache: RenderCache.raster,
delegates: LottieDelegates(values: lottieDelegates),
),
),
),
);
}
}
from lottie-flutter.
I think you should drop the renderCache: RenderCache.raster. It's not supported in the web with the html-renderer.
Maybe the package should add a debug warning and have a kIsWeb
check on the renderCache so nobody else will have to face this issue?
from lottie-flutter.
I think it works with the canvaskit renderer so kIsWeb
is not enough. We need to detect the web-renderer used and I don't know if it's possible.
And this library works poorly with the html-renderer anyway, they are a lot of limitations.
Furthermore it's likely that the html-renderer will go away: flutter/flutter#145954
from lottie-flutter.
I changed my code to:
import 'dart:math';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class QRCodeLoginNoScan extends StatelessWidget {
const QRCodeLoginNoScan({super.key});
@override
Widget build(BuildContext context) {
var lottieDelegates = [
if (Theme.of(context).brightness == Brightness.dark)
ValueDelegate.colorFilter(
const [ '**'],
value: ColorFilter.mode(Theme.of(context).colorScheme.onSurface, BlendMode.src),
),
if (Theme.of(context).brightness == Brightness.light)
ValueDelegate.colorFilter(
const [ '**', 'scan', '**'],
value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
),
if (Theme.of(context).brightness == Brightness.light)
ValueDelegate.colorFilter(
const [ '**', 'phone', 'Group 1', '**'],
value: ColorFilter.mode(Theme.of(context).primaryColor, BlendMode.src),
)
];
return Padding(
padding: const EdgeInsets.symmetric(vertical: 200, horizontal: 20),
child: Center(
child: Lottie.asset(
width: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
height: max(MediaQuery.of(context).size.width,MediaQuery.of(context).size.height),
//fit: BoxFit.contain,
'assets/lottie/qr_code_animation.json',
renderCache: kIsWeb ? null : RenderCache.raster,
delegates: LottieDelegates(values: lottieDelegates),
),
),
);
}
}
on first load eveything works great but on hot-reload I get this error:
The following PersistedSurfaceException was thrown during a scheduler callback:
PersistedScene: is in an unexpected state.
Expected one of: PersistedSurfaceState.active, PersistedSurfaceState.pendingUpdate
But was: PersistedSurfaceState.released
When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3 throw_
lib/_engine/engine/html/surface.dart 181:3 debugAssertSurfaceState
lib/_engine/engine/html/surface.dart 705:12 update
lib/_engine/engine/html/scene_builder.dart 506:9 <fn>
lib/_engine/engine/profiler.dart 41:18 timeAction
lib/_engine/engine/html/scene_builder.dart 502:12 build
packages/flutter/src/rendering/layer.dart 1138:35 buildScene
packages/flutter/src/rendering/view.dart 304:30 compositeFrame
packages/flutter/src/rendering/binding.dart 582:19 drawFrame
packages/flutter/src/widgets/binding.dart 1138:13 drawFrame
packages/flutter/src/rendering/binding.dart 443:5 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1392:7 [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1313:9 handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1171:5 [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 1404:5 invoke
lib/_engine/engine/platform_dispatcher.dart 307:5 invokeOnDrawFrame
lib/_engine/engine/initialization.dart 187:36 <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 426:37 _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 431:39 dcall
Is that lottie related? Never seen anything like this.
from lottie-flutter.
Related Issues (20)
- Privacy Manifest file for IOS HOT 2
- Screen Stuck when try to load the lottie in flutter web
- The lottie files downloaded from lottiefiles can not render HOT 34
- lottie.netowkr how to cached?
- can't load json animation HOT 4
- The CPU usage is especially high HOT 2
- .lottie file not working on iOS HOT 1
- How can I let the click or slide event penetrate the lottie animation? HOT 2
- Not working on Windows 10
- How to show the last frame?
- Some lottie animations are not rendering correctly in Flutter HOT 3
- Strange lottie animation effect
- Animation flickering when updating to Flutter 3.22.x (iOS) HOT 11
- [Critical] Fatal animation error on LottieFiles website (Flutter)
- Unknown point starts with Token.nullToken HOT 2
- Animation presents different effects on Lottie Flutter and Lottie Android
- Fatal animation error on big LottieFiles.
- Performance and animation problem
- Unable to load Lottie.asset correctly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lottie-flutter.