mirror of
https://github.com/xvrh/lottie-flutter.git
synced 2025-08-06 16:39:36 +08:00
Compare commits
2 Commits
Author | SHA1 | Date | |
---|---|---|---|
5739f3b2ec | |||
dd04d149e8 |
Binary file not shown.
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.0 KiB |
9
.github/dependabot.yml
vendored
9
.github/dependabot.yml
vendored
@ -1,9 +0,0 @@
|
||||
# Dependabot configuration file.
|
||||
# See https://docs.github.com/en/code-security/dependabot/dependabot-version-updates
|
||||
version: 2
|
||||
|
||||
updates:
|
||||
- package-ecosystem: "github-actions"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "weekly"
|
45
.github/workflows/analyze-and-test.yaml
vendored
45
.github/workflows/analyze-and-test.yaml
vendored
@ -1,45 +0,0 @@
|
||||
name: Lottie Flutter
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
|
||||
jobs:
|
||||
analyze_and_test:
|
||||
name: Flutter analyze
|
||||
runs-on: macos-14
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: subosito/flutter-action@v2
|
||||
with:
|
||||
channel: 'stable'
|
||||
- run: flutter doctor
|
||||
- run: flutter --version
|
||||
- run: flutter pub get
|
||||
working-directory: example
|
||||
- run: flutter analyze
|
||||
- run: flutter test
|
||||
- run: flutter test
|
||||
working-directory: example
|
||||
- run: flutter pub run tool/prepare_submit.dart
|
||||
- name: "check for uncommitted changes"
|
||||
run: |
|
||||
git diff --exit-code --stat -- . ':(exclude)*pubspec.lock' \
|
||||
|| (echo "##[error] found changed files after build. please run 'dart tool/prepare_submit.dart'" \
|
||||
"and check in all changes" \
|
||||
&& exit 1)
|
||||
shell: bash
|
||||
build_web_version:
|
||||
name: Check that the web version can compile
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: subosito/flutter-action@v2
|
||||
with:
|
||||
channel: 'stable'
|
||||
- run: flutter precache web
|
||||
- run: flutter pub get
|
||||
working-directory: example
|
||||
- run: flutter build web
|
||||
working-directory: example
|
22
.github/workflows/coverage.yaml
vendored
22
.github/workflows/coverage.yaml
vendored
@ -1,22 +0,0 @@
|
||||
name: Coverage
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
|
||||
jobs:
|
||||
coverage:
|
||||
name: Coverage
|
||||
runs-on: macos-14
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: subosito/flutter-action@v2
|
||||
with:
|
||||
channel: 'stable'
|
||||
- run: flutter test --coverage
|
||||
|
||||
- name: Upload coverage reports to Codecov
|
||||
uses: codecov/codecov-action@v5.1.1
|
||||
with:
|
||||
token: ${{ secrets.CODECOV_TOKEN }}
|
29
.github/workflows/publish-on-pub.yaml
vendored
29
.github/workflows/publish-on-pub.yaml
vendored
@ -1,29 +0,0 @@
|
||||
name: Publish package to pub.dev
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- v*
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: subosito/flutter-action@v2
|
||||
with:
|
||||
channel: 'stable'
|
||||
- run: flutter pub get
|
||||
- run: flutter pub run tool/publish/check_version.dart ${GITHUB_REF}
|
||||
- name: Setup credentials
|
||||
run: |
|
||||
mkdir -p $XDG_CONFIG_HOME/dart
|
||||
cat <<EOF > $XDG_CONFIG_HOME/dart/pub-credentials.json
|
||||
{
|
||||
"accessToken":"${{ secrets.OAUTH_ACCESS_TOKEN }}",
|
||||
"refreshToken":"${{ secrets.OAUTH_REFRESH_TOKEN }}",
|
||||
"tokenEndpoint":"https://accounts.google.com/o/oauth2/token",
|
||||
"scopes": [ "openid", "https://www.googleapis.com/auth/userinfo.email" ],
|
||||
"expiration": 1691492965565
|
||||
}
|
||||
EOF
|
||||
- name: Publish package
|
||||
run: flutter pub publish --force
|
12
.gitignore
vendored
12
.gitignore
vendored
@ -1,12 +0,0 @@
|
||||
.*
|
||||
_*
|
||||
|
||||
!.gitignore
|
||||
!.github
|
||||
!.pubignore
|
||||
|
||||
**/failures/*.png
|
||||
|
||||
*.iml
|
||||
**/doc/api/
|
||||
build/
|
||||
|
10
.metadata
10
.metadata
@ -1,10 +0,0 @@
|
||||
# This file tracks properties of this Flutter project.
|
||||
# Used by Flutter tool to assess capabilities and perform upgrades etc.
|
||||
#
|
||||
# This file should be version controlled and should not be manually edited.
|
||||
|
||||
version:
|
||||
revision: 27321ebbad34b0a3fafe99fac037102196d655ff
|
||||
channel: stable
|
||||
|
||||
project_type: package
|
15
.pubignore
15
.pubignore
@ -1,15 +0,0 @@
|
||||
.dart_tool/
|
||||
.packages
|
||||
build/
|
||||
doc/api/
|
||||
*.iml
|
||||
_*
|
||||
.*
|
||||
**/failures/*.png
|
||||
test/golden/
|
||||
test/goldens/
|
||||
example/assets/
|
||||
example/android/
|
||||
example/ios/
|
||||
example/macos/
|
||||
example/web/
|
397
CHANGELOG.md
397
CHANGELOG.md
@ -1,397 +0,0 @@
|
||||
## 3.3.1
|
||||
- Update `package:archive` to `>=4.0.0` constraint
|
||||
|
||||
## 3.3.0
|
||||
- Requires Flutter 3.27 and fix lints.
|
||||
- Add conditional imports to prevent importing `dart:io` on Web targets
|
||||
|
||||
## 3.2.0
|
||||
- Apply Blend mode at layer level
|
||||
|
||||
## 3.1.3
|
||||
- Update `package:archive` dependency constraints
|
||||
|
||||
## 3.1.2
|
||||
- Fixes for some animations generated by lottiefiles.com
|
||||
|
||||
## 3.1.1
|
||||
- Fix rounding-off error on progress calculation
|
||||
- Allow missing end values for integer animations
|
||||
|
||||
## 3.1.0
|
||||
- Use `package:http` for `Lottie.network`. This allows to drop dependency on `dart:html` and be compatible with `wasm`.
|
||||
- Fix new lints
|
||||
|
||||
## 3.0.0
|
||||
- Add `renderCache` parameter.
|
||||
|
||||
```dart
|
||||
Lottie.asset('assets/complex_animation.json',
|
||||
renderCache: RenderCache.raster,
|
||||
)
|
||||
```
|
||||
|
||||
Opt-in to a special render mode where the frames of the animation are lazily rendered and kept in a cache.
|
||||
Subsequent runs of the animation are cheaper to render.
|
||||
|
||||
There are 2 kinds of caches:
|
||||
|
||||
**RenderCache.raster**: keep the frame rasterized in the cache (as [dart:ui.Image]).
|
||||
Subsequent runs of the animation are very cheap for both the CPU and GPU but it takes
|
||||
a lot of memory.
|
||||
**RenderCache.drawingCommands**: keep the frame as a list of graphical operations ([dart:ui.Picture]).
|
||||
Subsequent runs of the animation are cheaper for the CPU but not for the GPU.
|
||||
|
||||
- Allow to load Telegram Stickers (.tgs)
|
||||
|
||||
```dart
|
||||
Lottie.asset(
|
||||
'sticker.tgs',
|
||||
decoder: LottieComposition.decodeGZip,
|
||||
)
|
||||
```
|
||||
|
||||
- Expose a hook to customize how to decode zip archives. This is useful for dotlottie archives (.lottie) when we want
|
||||
to specify a specific .json file inside the archive
|
||||
|
||||
```dart
|
||||
Lottie.asset(
|
||||
'animation.lottie',
|
||||
decoder: customDecoder,
|
||||
);
|
||||
|
||||
Future<LottieComposition?> customDecoder(List<int> bytes) {
|
||||
return LottieComposition.decodeZip(bytes, filePicker: (files) {
|
||||
return files.firstWhere((f) => f.name == 'animations/cat.json');
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
- Add `backgroundLoading` parameter to `Lottie.asset|network|file|memory`.
|
||||
If `backgroundLoading` is true, the animation will be loaded in a background isolate.
|
||||
This is useful for large animations that can take a long time to parse and block the UI work.
|
||||
|
||||
- Remove the name property from `LottieComposition`
|
||||
|
||||
- `imageProviderFactory` is not used in .zip file by default anymore.
|
||||
To restore the old behaviour, use:
|
||||
```dart
|
||||
Future<LottieComposition?> decoder(List<int> bytes) {
|
||||
return LottieComposition.decodeZip(bytes, imageProviderFactory: imageProviderFactory);
|
||||
}
|
||||
|
||||
Lottie.asset('anim.json', decoder: decoder)
|
||||
```
|
||||
|
||||
- Disable gradient cache optimization when `ValueDelegate.gradientColor` is used
|
||||
- Use `DefaultAssetBundle.of` in `AssetLottie` before fallback to `rootBundle`
|
||||
- Add `BuildContext` optional parameter in `LottieProvider.load`
|
||||
- Fixed varying opacity stops across keyframes in the same gradient
|
||||
- Fixed rounded corners for non-closed curves
|
||||
- Implement auto-orient
|
||||
- Add support for layer blend mode
|
||||
- Require Flutter 3.16
|
||||
|
||||
## 3.0.0-alpha.4
|
||||
|
||||
*See the latest 3.0.0 release*
|
||||
|
||||
## 3.0.0-alpha.3
|
||||
|
||||
*See the latest 3.0.0 release*
|
||||
|
||||
## 3.0.0-alpha.2
|
||||
|
||||
*See the latest 3.0.0 release*
|
||||
|
||||
## 3.0.0-alpha.1
|
||||
|
||||
*See the latest 3.0.0 release*
|
||||
|
||||
## 2.7.0
|
||||
- Support loading Fonts from a zip file
|
||||
- Fix a bug in Text with strokes
|
||||
- Fix gradient interpolation for opacity stops beyond the last color stop
|
||||
- Add color value callback to solid layer
|
||||
|
||||
## 2.6.0
|
||||
- Accept `List<int>` instead of `Uint8List` in `LottieComposition.fromBytes`
|
||||
- Stroke line cap defaults to butt instead of square
|
||||
|
||||
## 2.5.0
|
||||
- Add layer-level opacity option to LottieOptions
|
||||
- Fix TextLayer opacity calculation
|
||||
|
||||
## 2.4.0
|
||||
- Require minimum Dart 3.0.0 and Flutter 3.10.0
|
||||
- Fix a parsing bug when the name property in RoundedCorner was null
|
||||
|
||||
## 2.3.2
|
||||
- Fix a bug when running on the web due to [bitwise operations difference](https://dart.dev/guides/language/numbers#bitwise-operations).
|
||||
|
||||
## 2.3.1
|
||||
- Fix an assertion for null `ShapeTrimPathType.type`.
|
||||
|
||||
## 2.3.0
|
||||
- Fixed a failed assertion (`dirty: is not true`) when calling `setState` inside `onLoaded` callback.
|
||||
- Update point text y offset
|
||||
- Makes static compositions not animate by default
|
||||
|
||||
## 2.2.0
|
||||
Apply the latest fixes from Lottie-Android:
|
||||
|
||||
- Overhaul text layout
|
||||
- Fix rounded corners modifying already rounded corners
|
||||
- Support box position in Document Data
|
||||
- Allow interpolating between gradients with different opacity stops
|
||||
- Add support for gradient opacity stops
|
||||
|
||||
## 2.1.0
|
||||
- Improve the cache to ensure that there is not an empty frame each time we load an animation.
|
||||
The method `AssetLottie('anim.json').load()` returns a `SynchronousFuture` if it has been loaded previously.
|
||||
- Expose the `LottieCache` singleton.
|
||||
It allows to change the cache behaviour and clear the entries.
|
||||
|
||||
```dart
|
||||
void main() {
|
||||
Lottie.cache.maximumSize = 10;
|
||||
Lottie.cache.clear();
|
||||
Lottie.cache.evict(NetworkLottie('https://lottie.com/anim.json'));
|
||||
}
|
||||
```
|
||||
|
||||
## 2.0.0
|
||||
- **Breaking change**: the lottie widget will be smaller if it relies on the intrinsic size of the composition.
|
||||
|
||||
Previously the lottie parser was automatically multiplying the size of the composition by `window.devicePixelRatio`.
|
||||
This was incorrect as it results in a widget of a different size depending on the pixel ratio of the monitor.
|
||||
Furthermore, it created some bugs when the property `window.devicePixelRatio` was not available immediately at the start
|
||||
of the app (on Android release builds).
|
||||
|
||||
The code can be adapted to specify explicitly the size of the animation with `width`, `height` and `fit` properties.
|
||||
|
||||
```dart
|
||||
Scaffold(
|
||||
body: Center(
|
||||
child: Lottie.asset(
|
||||
'assets/LottieLogo1.json',
|
||||
height: 800,
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
),
|
||||
);
|
||||
```
|
||||
|
||||
## 1.4.3
|
||||
- Fixed some lints with Flutter 3.3.
|
||||
|
||||
## 1.4.2
|
||||
- Use `FilterQuality.low` as default to draw image layers.
|
||||
|
||||
## 1.4.1
|
||||
- Allow `AlignmentGeometry` for `alignment`.
|
||||
|
||||
## 1.4.0
|
||||
- Added `filterQuality` property to control the performance vs quality trade-off to use when drawing images
|
||||
|
||||
## 1.3.0
|
||||
- Added support for rounded corners on shapes and rects
|
||||
- Add support for text in dynamic properties (`ValueDelegate`)
|
||||
|
||||
Example:
|
||||
|
||||
```dart
|
||||
Lottie.asset(
|
||||
'assets/DynamicText.json',
|
||||
delegates: LottieDelegates(values: [
|
||||
ValueDelegate.text(
|
||||
['Text layer'], // The path to the text element to change
|
||||
value: 'The new text',
|
||||
),
|
||||
]),
|
||||
)
|
||||
```
|
||||
|
||||
- Improve stroke with offset
|
||||
- Add support for reversed polystar paths
|
||||
- Enforce order of operations to avoid rounding errors
|
||||
|
||||
## 1.2.2
|
||||
- Internal maintenance: fix lints for Flutter 2.10
|
||||
|
||||
## 1.2.1
|
||||
- Fix: Revert Cubic to `PathInterpolator.cubic`
|
||||
|
||||
## 1.2.0
|
||||
- Add support for gaussian blurs.
|
||||
|
||||
Example to blur some elements dynamically:
|
||||
|
||||
```dart
|
||||
Lottie.asset(
|
||||
'assets/AndroidWave.json',
|
||||
delegates: LottieDelegates(values: [
|
||||
ValueDelegate.blurRadius(
|
||||
['**'], // The path to the element to blur
|
||||
value: 20,
|
||||
),
|
||||
]),
|
||||
)
|
||||
```
|
||||
|
||||
- Add support for drop shadows.
|
||||
|
||||
Example to add a shadow dynamically:
|
||||
```dart
|
||||
Lottie.asset(
|
||||
'assets/animation.json',
|
||||
delegates: LottieDelegates(values: [
|
||||
ValueDelegate.dropShadow(
|
||||
['**'], // The path to the elements with shadow
|
||||
value: const DropShadow(
|
||||
color: Colors.blue,
|
||||
direction: 140,
|
||||
distance: 60,
|
||||
radius: 10,
|
||||
),
|
||||
),
|
||||
]),
|
||||
)
|
||||
```
|
||||
|
||||
## 1.1.0
|
||||
- Add `errorBuilder` callback to provide an alternative widget in case an error occurs during loading.
|
||||
```dart
|
||||
Lottie.network(
|
||||
'https://example.does.not.exist/lottie.json',
|
||||
errorBuilder: (context, exception, stackTrace) {
|
||||
return const Text('😢');
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
- Add `onWarning` to be notified when a warning occurs during the animation parsing or painting.
|
||||
Previously the warnings where written in an internal `logger`.
|
||||
```dart
|
||||
Lottie.asset('animation.json'
|
||||
onWarning: (warning) {
|
||||
_logger.info(warning);
|
||||
},
|
||||
);
|
||||
```
|
||||
- Various bug fixes
|
||||
|
||||
## 1.0.1
|
||||
- Implement `RenderBox.computeDryLayout`
|
||||
|
||||
## 1.0.0
|
||||
- Migrate to null safety
|
||||
- Fix some rendering bugs
|
||||
- Add an image delegate to dynamically change images
|
||||
- Allow to use an imageProviderFactory with a zip file
|
||||
|
||||
## 0.7.1
|
||||
- Fix a crash for some lottie file with empty paths.
|
||||
|
||||
## 0.7.0+1
|
||||
- Fix Flutter Web compilation error
|
||||
|
||||
## 0.7.0
|
||||
- Performance improvement for complex animations.
|
||||
|
||||
## 0.6.0
|
||||
- Runs the animation at the frame rate specified in the json file (ie. An animation encoded with a 20 FPS will only
|
||||
be paint 20 times per seconds even though the AnimationController will invalidate the widget 60 times per seconds).
|
||||
A new property `frameRate` allows to opt-out this behavior and have the widget to repaint at the device frame rate
|
||||
(`FrameRate.max`).
|
||||
- Automatically add a `RepaintBoundary` around the widget. Since `Lottie` animations are generally complex to paint, a
|
||||
`RepaintBoundary` will separate the animation with the rest of the app and improve performance. A new property `addRepaintBoundary`
|
||||
allows to opt-out this behavior.
|
||||
- Fix a bug where we would call `markNeedPaint` when the animation was not changing. This removes unnecessary paints in
|
||||
animations with static periods.
|
||||
|
||||
## 0.5.1
|
||||
- Remove direct dependencies on dart:io to support Flutter Web
|
||||
|
||||
## 0.5.0
|
||||
- Support loading animation from network in a web app
|
||||
- Fix a couple of bugs with the web dev compiler
|
||||
|
||||
## 0.4.1
|
||||
- Support color value stored as RGB, not RGBA
|
||||
|
||||
## 0.4.0+1
|
||||
- Support latest version of the `characters` package
|
||||
|
||||
## 0.4.0
|
||||
- Disable "Merge paths" by default and provide an option to enable them.
|
||||
This is the same behavior as in Lottie-android.
|
||||
Merge paths currently don't work if the the operand shape is entirely contained within the
|
||||
first shape. If you need to cut out one shape from another shape, use an even-odd fill type
|
||||
instead of using merge paths.
|
||||
|
||||
Merge paths can be enabled with:
|
||||
```dart
|
||||
Lottie.asset('file.json', options: LottieOptions(enableMergePaths: true));
|
||||
```
|
||||
|
||||
|
||||
## 0.3.6
|
||||
- Export the `Marker` class
|
||||
|
||||
## 0.3.5
|
||||
- Fix a bug with a wrongly clipped rectangle.
|
||||
|
||||
## 0.3.4
|
||||
- Fix a bug with dashed path
|
||||
|
||||
## 0.3.3
|
||||
- Fix a bug with rounded rectangle shape
|
||||
|
||||
## 0.3.2
|
||||
- Fix a bug with "repeater" content
|
||||
|
||||
## 0.3.1
|
||||
- Support dashed path
|
||||
|
||||
## 0.3.0+1
|
||||
- Specify a version range for the dependency on `characters`.
|
||||
|
||||
## 0.3.0
|
||||
- Add `LottieDelegates` a group of options to customize the lottie animation at runtime.
|
||||
ie: Dynamically modify color, position, size, text... of every elements of the animation.
|
||||
- Correctly display Linear and Radial Gradients
|
||||
- Integrate latest changes from Lottie-android
|
||||
|
||||
## 0.2.2
|
||||
- Add a [repeat] parameter to specify if the automatic animation should loop.
|
||||
- Add the [animate], [reverse], [repeat] properties on `LottieBuilder`
|
||||
- Fix bug with `onLoaded` callback when the `LottieProvider` is changed
|
||||
|
||||
## 0.2.1
|
||||
- Fix a big bug in the path transformation code. A lot more animations look correct now.
|
||||
|
||||
## 0.2.0+1
|
||||
- Improve readme
|
||||
- (internal) Add golden tests
|
||||
|
||||
## 0.2.0
|
||||
- Support loading the animation and its images from a zip file
|
||||
- Breaking: `LottieComposition.fromBytes` and `fromByteData` are now asynchronous.
|
||||
|
||||
## 0.1.4
|
||||
- Support images in animation
|
||||
- Basic support for text in animation (work in progress)
|
||||
|
||||
## 0.1.3
|
||||
- Support Polystar shape
|
||||
- Reorganize examples.
|
||||
|
||||
## 0.1.2
|
||||
- Implement `Lottie.network`, `Lottie.file` and `Lottie.memory`
|
||||
|
||||
## 0.1.1
|
||||
- Fix analysis lints
|
||||
|
||||
## 0.1.0
|
||||
- Initial conversion of [lottie-android](https://github.com/airbnb/lottie-android) to Dart/Flutter
|
@ -1,2 +0,0 @@
|
||||
github: xvrh
|
||||
custom: https://buymeacoffee.com/xvrh
|
21
LICENSE
21
LICENSE
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) [year] [fullname]
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
325
README.md
325
README.md
@ -1,325 +0,0 @@
|
||||
# Lottie for Flutter
|
||||
|
||||
[](https://github.com/xvrh/lottie-flutter)
|
||||
[](https://pub.dev/packages/lottie)
|
||||
|
||||
Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html)
|
||||
animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
|
||||
|
||||
This repository is an unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart.
|
||||
|
||||
It works on Android, iOS, macOS, linux, windows and web.
|
||||
|
||||
<a href="https://www.buymeacoffee.com/xvrh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="60" width="217"></a>
|
||||
|
||||
## Usage
|
||||
|
||||
### Simple animation
|
||||
This example shows how to display a Lottie animation in the simplest way.
|
||||
The `Lottie` widget will load the json file and run the animation indefinitely.
|
||||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lottie/lottie.dart';
|
||||
|
||||
void main() => runApp(const MyApp());
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
const MyApp({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: ListView(
|
||||
children: [
|
||||
// Load a Lottie file from your assets
|
||||
Lottie.asset('assets/LottieLogo1.json'),
|
||||
|
||||
// Load a Lottie file from a remote url
|
||||
Lottie.network(
|
||||
'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
|
||||
|
||||
// Load an animation and its images from a zip file
|
||||
Lottie.asset('assets/lottiefiles/angel.zip'),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Specify a custom `AnimationController`
|
||||
This example shows how to take full control over the animation by providing your own `AnimationController`.
|
||||
|
||||
With a custom `AnimationController` you have a rich API to play the animation in various ways: start and stop the animation when you want,
|
||||
play forward or backward, loop between specifics points...
|
||||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lottie/lottie.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 TickerProviderStateMixin {
|
||||
late final AnimationController _controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_controller = AnimationController(vsync: this);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: ListView(
|
||||
children: [
|
||||
Lottie.asset(
|
||||
'assets/LottieLogo1.json',
|
||||
controller: _controller,
|
||||
onLoaded: (composition) {
|
||||
// Configure the AnimationController with the duration of the
|
||||
// Lottie file and start the animation.
|
||||
_controller
|
||||
..duration = composition.duration
|
||||
..forward();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[See this file](https://github.com/xvrh/lottie-flutter/blob/master/example/lib/examples/animation_full_control.dart) for a more comprehensive example.
|
||||
|
||||
### Control the size of the Widget
|
||||
The `Lottie` widget takes the same arguments and have the same behavior as the `Image` widget
|
||||
in term of controlling its size.
|
||||
```dart
|
||||
Lottie.asset(
|
||||
'assets/LottieLogo1.json',
|
||||
width: 200,
|
||||
height: 200,
|
||||
fit: BoxFit.fill,
|
||||
)
|
||||
```
|
||||
|
||||
`width` and `height` are optionals and fallback on the size imposed by the parent or on the intrinsic size of the lottie
|
||||
animation.
|
||||
|
||||
### Custom loading
|
||||
The `Lottie` widget has several convenient constructors (`Lottie.asset`, `Lottie.network`, `Lottie.memory`) to load, parse and
|
||||
cache automatically the json file.
|
||||
|
||||
Sometime you may prefer to have full control over the loading of the file. Use `AssetLottie` (or `NetworkLottie`, `MemoryLottie`) to load a lottie composition from a json file.
|
||||
|
||||
This example shows how to load and parse a Lottie composition from a json file.
|
||||
|
||||
```dart
|
||||
class MyWidget extends StatefulWidget {
|
||||
const MyWidget({super.key});
|
||||
|
||||
@override
|
||||
State<MyWidget> createState() => _MyWidgetState();
|
||||
}
|
||||
|
||||
class _MyWidgetState extends State<MyWidget> {
|
||||
late final Future<LottieComposition> _composition;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_composition = AssetLottie('assets/LottieLogo1.json').load();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FutureBuilder<LottieComposition>(
|
||||
future: _composition,
|
||||
builder: (context, snapshot) {
|
||||
var composition = snapshot.data;
|
||||
if (composition != null) {
|
||||
return Lottie(composition: composition);
|
||||
} else {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom drawing
|
||||
This example goes low level and shows you how to draw a `LottieComposition` on a custom Canvas at a specific frame in
|
||||
a specific position and size.
|
||||
|
||||
````dart
|
||||
class CustomDrawer extends StatelessWidget {
|
||||
final LottieComposition composition;
|
||||
|
||||
const CustomDrawer(this.composition, {super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CustomPaint(
|
||||
painter: _Painter(composition),
|
||||
size: const Size(400, 400),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Painter extends CustomPainter {
|
||||
final LottieDrawable drawable;
|
||||
|
||||
_Painter(LottieComposition composition)
|
||||
: drawable = LottieDrawable(composition);
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
var frameCount = 40;
|
||||
var columns = 10;
|
||||
for (var i = 0; i < frameCount; i++) {
|
||||
var destRect = Offset(i % columns * 50.0, i ~/ 10 * 80.0) & (size / 5);
|
||||
drawable
|
||||
..setProgress(i / frameCount)
|
||||
..draw(canvas, destRect);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
### Modify properties at runtime
|
||||
This example shows how to modify some properties of the animation at runtime. Here we change the text,
|
||||
the color, the opacity and the position of some layers.
|
||||
For each `ValueDelegate` we can either provide a static `value` or a `callback` to compute a value for a each frame.
|
||||
|
||||
````dart
|
||||
class _Animation extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Lottie.asset(
|
||||
'assets/Tests/Shapes.json',
|
||||
delegates: LottieDelegates(
|
||||
text: (initialText) => '**$initialText**',
|
||||
values: [
|
||||
ValueDelegate.color(
|
||||
const ['Shape Layer 1', 'Rectangle', 'Fill 1'],
|
||||
value: Colors.red,
|
||||
),
|
||||
ValueDelegate.opacity(
|
||||
const ['Shape Layer 1', 'Rectangle'],
|
||||
callback: (frameInfo) => (frameInfo.overallProgress * 100).round(),
|
||||
),
|
||||
ValueDelegate.position(
|
||||
const ['Shape Layer 1', 'Rectangle', '**'],
|
||||
relative: const Offset(100, 200),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
### Frame rate
|
||||
By default, the animation is played at the frame rate exported by AfterEffect.
|
||||
This is the most power-friendly as generally the animation is exported at 10 or 30 FPS compared to the phone's 60 or 120 FPS.
|
||||
If the result is not good, you can change the frame rate
|
||||
|
||||
````dart
|
||||
Lottie.asset('anim.json',
|
||||
// Use the device frame rate (up to 120FPS)
|
||||
frameRate: FrameRate.max,
|
||||
// Use the exported frame rate (default)
|
||||
frameRate: FrameRate.composition,
|
||||
// Specific frame rate
|
||||
frameRate: FrameRate(10),
|
||||
)
|
||||
````
|
||||
|
||||
### Telegram Stickers (.tgs) and DotLottie (.lottie)
|
||||
TGS file can be loaded by providing a special decoder
|
||||
|
||||
````dart
|
||||
Widget build(BuildContext context) {
|
||||
return ListView(
|
||||
children: [
|
||||
Lottie.network(
|
||||
'https://telegram.org/file/464001484/1/bzi7gr7XRGU.10147/815df2ef527132dd23',
|
||||
decoder: LottieComposition.decodeGZip,
|
||||
),
|
||||
Lottie.asset(
|
||||
'assets/LightningBug_file.tgs',
|
||||
decoder: LottieComposition.decodeGZip,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
````
|
||||
|
||||
You can select the correct .json file from a dotlottie (.lottie) archive by providing a custom decoder
|
||||
|
||||
````dart
|
||||
class Example extends StatelessWidget {
|
||||
const Example({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Lottie.asset(
|
||||
'assets/cat.lottie',
|
||||
decoder: customDecoder,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Future<LottieComposition?> customDecoder(List<int> bytes) {
|
||||
return LottieComposition.decodeZip(bytes, filePicker: (files) {
|
||||
return files.firstWhereOrNull(
|
||||
(f) => f.name.startsWith('animations/') && f.name.endsWith('.json'));
|
||||
});
|
||||
}
|
||||
````
|
||||
|
||||
## Performance or excessive CPU/GPU usage
|
||||
|
||||
Version `v3.0` introduced the `renderCache` parameter to help reduce an excessive energy consumption.
|
||||
|
||||
In this mode, the frames of the animation are rendered lazily in an offscreen cache. Subsequent runs of the animation
|
||||
are cheaper to render. It helps reduce the power usage of the application at the cost of an increased memory usage.
|
||||
|
||||
## Limitations
|
||||
This port supports the same [feature set as Lottie Android](https://airbnb.io/lottie/#/supported-features).
|
||||
|
||||
## Flutter Web
|
||||
Run the app with `flutter run -d chrome --web-renderer canvaskit`
|
||||
|
||||
See a preview here: https://xvrh.github.io/lottie-flutter-web/
|
||||
|
||||
## More examples
|
||||
See the `example` folder for more code samples of the various possibilities.
|
@ -1,126 +0,0 @@
|
||||
# Lottie for Flutter
|
||||
|
||||
[](https://github.com/xvrh/lottie-flutter)
|
||||
[](https://pub.dev/packages/lottie)
|
||||
|
||||
Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](https://www.adobe.com/products/aftereffects.html)
|
||||
animations exported as json with [Bodymovin](https://github.com/airbnb/lottie-web) and renders them natively on mobile!
|
||||
|
||||
This repository is an unofficial conversion of the [Lottie-android](https://github.com/airbnb/lottie-android) library in pure Dart.
|
||||
|
||||
It works on Android, iOS, macOS, linux, windows and web.
|
||||
|
||||
<a href="https://www.buymeacoffee.com/xvrh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="60" width="217"></a>
|
||||
|
||||
## Usage
|
||||
|
||||
### Simple animation
|
||||
This example shows how to display a Lottie animation in the simplest way.
|
||||
The `Lottie` widget will load the json file and run the animation indefinitely.
|
||||
|
||||
```dart
|
||||
import 'example/lib/main.dart';
|
||||
```
|
||||
|
||||
### Specify a custom `AnimationController`
|
||||
This example shows how to take full control over the animation by providing your own `AnimationController`.
|
||||
|
||||
With a custom `AnimationController` you have a rich API to play the animation in various ways: start and stop the animation when you want,
|
||||
play forward or backward, loop between specifics points...
|
||||
|
||||
```dart
|
||||
import 'example/lib/examples/animation_controller.dart';
|
||||
```
|
||||
|
||||
[See this file](https://github.com/xvrh/lottie-flutter/blob/master/example/lib/examples/animation_full_control.dart) for a more comprehensive example.
|
||||
|
||||
### Control the size of the Widget
|
||||
The `Lottie` widget takes the same arguments and have the same behavior as the `Image` widget
|
||||
in term of controlling its size.
|
||||
```dart
|
||||
Lottie.asset(
|
||||
'assets/LottieLogo1.json',
|
||||
width: 200,
|
||||
height: 200,
|
||||
fit: BoxFit.fill,
|
||||
)
|
||||
```
|
||||
|
||||
`width` and `height` are optionals and fallback on the size imposed by the parent or on the intrinsic size of the lottie
|
||||
animation.
|
||||
|
||||
### Custom loading
|
||||
The `Lottie` widget has several convenient constructors (`Lottie.asset`, `Lottie.network`, `Lottie.memory`) to load, parse and
|
||||
cache automatically the json file.
|
||||
|
||||
Sometime you may prefer to have full control over the loading of the file. Use `AssetLottie` (or `NetworkLottie`, `MemoryLottie`) to load a lottie composition from a json file.
|
||||
|
||||
This example shows how to load and parse a Lottie composition from a json file.
|
||||
|
||||
```dart
|
||||
import 'example/lib/examples/custom_load.dart#example';
|
||||
```
|
||||
|
||||
### Custom drawing
|
||||
This example goes low level and shows you how to draw a `LottieComposition` on a custom Canvas at a specific frame in
|
||||
a specific position and size.
|
||||
|
||||
````dart
|
||||
import 'example/lib/examples/custom_draw.dart#example';
|
||||
````
|
||||
|
||||
### Modify properties at runtime
|
||||
This example shows how to modify some properties of the animation at runtime. Here we change the text,
|
||||
the color, the opacity and the position of some layers.
|
||||
For each `ValueDelegate` we can either provide a static `value` or a `callback` to compute a value for a each frame.
|
||||
|
||||
````dart
|
||||
import 'example/lib/examples/simple_dynamic_properties.dart#example';
|
||||
````
|
||||
|
||||
### Frame rate
|
||||
By default, the animation is played at the frame rate exported by AfterEffect.
|
||||
This is the most power-friendly as generally the animation is exported at 10 or 30 FPS compared to the phone's 60 or 120 FPS.
|
||||
If the result is not good, you can change the frame rate
|
||||
|
||||
````dart
|
||||
Lottie.asset('anim.json',
|
||||
// Use the device frame rate (up to 120FPS)
|
||||
frameRate: FrameRate.max,
|
||||
// Use the exported frame rate (default)
|
||||
frameRate: FrameRate.composition,
|
||||
// Specific frame rate
|
||||
frameRate: FrameRate(10),
|
||||
)
|
||||
````
|
||||
|
||||
### Telegram Stickers (.tgs) and DotLottie (.lottie)
|
||||
TGS file can be loaded by providing a special decoder
|
||||
|
||||
````dart
|
||||
import 'example/lib/examples/telegram_stickers.dart#example';
|
||||
````
|
||||
|
||||
You can select the correct .json file from a dotlottie (.lottie) archive by providing a custom decoder
|
||||
|
||||
````dart
|
||||
import 'example/lib/examples/dotlottie.dart#example';
|
||||
````
|
||||
|
||||
## Performance or excessive CPU/GPU usage
|
||||
|
||||
Version `v3.0` introduced the `renderCache` parameter to help reduce an excessive energy consumption.
|
||||
|
||||
In this mode, the frames of the animation are rendered lazily in an offscreen cache. Subsequent runs of the animation
|
||||
are cheaper to render. It helps reduce the power usage of the application at the cost of an increased memory usage.
|
||||
|
||||
## Limitations
|
||||
This port supports the same [feature set as Lottie Android](https://airbnb.io/lottie/#/supported-features).
|
||||
|
||||
## Flutter Web
|
||||
Run the app with `flutter run -d chrome --web-renderer canvaskit`
|
||||
|
||||
See a preview here: https://xvrh.github.io/lottie-flutter-web/
|
||||
|
||||
## More examples
|
||||
See the `example` folder for more code samples of the various possibilities.
|
@ -1,58 +0,0 @@
|
||||
include: package:flutter_lints/flutter.yaml
|
||||
analyzer:
|
||||
language:
|
||||
strict-casts: true
|
||||
strict-inference: true
|
||||
linter:
|
||||
rules:
|
||||
avoid_print: false
|
||||
|
||||
always_declare_return_types: true
|
||||
avoid_bool_literals_in_conditional_expressions: true
|
||||
avoid_double_and_int_checks: true
|
||||
avoid_dynamic_calls: true
|
||||
avoid_equals_and_hash_code_on_mutable_classes: true
|
||||
avoid_escaping_inner_quotes: true
|
||||
avoid_final_parameters: true
|
||||
avoid_function_literals_in_foreach_calls: true
|
||||
avoid_js_rounded_ints: true
|
||||
avoid_positional_boolean_parameters: true
|
||||
avoid_redundant_argument_values: true
|
||||
avoid_setters_without_getters: true
|
||||
avoid_type_to_string: true
|
||||
avoid_unused_constructor_parameters: true
|
||||
cancel_subscriptions: true
|
||||
cast_nullable_to_non_nullable: true
|
||||
close_sinks: true
|
||||
collection_methods_unrelated_type: true
|
||||
combinators_ordering: true
|
||||
conditional_uri_does_not_exist: true
|
||||
dangling_library_doc_comments: true
|
||||
deprecated_consistency: true
|
||||
implicit_reopen: true
|
||||
invalid_case_patterns: true
|
||||
leading_newlines_in_multiline_strings: true
|
||||
library_annotations: true
|
||||
no_adjacent_strings_in_list: true
|
||||
no_default_cases: true
|
||||
noop_primitive_operations: true
|
||||
omit_local_variable_types: true
|
||||
only_throw_errors: true
|
||||
prefer_if_elements_to_conditional_expressions: true
|
||||
prefer_relative_imports: true
|
||||
prefer_single_quotes: true
|
||||
sort_child_properties_last: true
|
||||
sort_pub_dependencies: true
|
||||
test_types_in_equals: true
|
||||
unawaited_futures: true
|
||||
unnecessary_breaks: true
|
||||
unnecessary_library_directive: true
|
||||
unnecessary_parenthesis: true
|
||||
unnecessary_statements: true
|
||||
unnecessary_to_list_in_spreads: true
|
||||
unsafe_html: true
|
||||
use_enums: true
|
||||
use_if_null_to_convert_nulls_to_bools: true
|
||||
use_named_constants: true
|
||||
use_raw_strings: true
|
||||
use_super_parameters: true
|
1
assets/AssetManifest.json
Normal file
1
assets/AssetManifest.json
Normal file
File diff suppressed because one or more lines are too long
1
assets/FontManifest.json
Normal file
1
assets/FontManifest.json
Normal file
@ -0,0 +1 @@
|
||||
[{"family":"MaterialIcons","fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}]}]
|
14409
assets/LICENSE
Normal file
14409
assets/LICENSE
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 149 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user