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 |
49
.github/workflows/analyze-and-test.yaml
vendored
49
.github/workflows/analyze-and-test.yaml
vendored
@ -1,49 +0,0 @@
|
||||
name: Lottie Flutter
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
|
||||
jobs:
|
||||
analyze_and_test:
|
||||
name: Flutter analyze
|
||||
strategy:
|
||||
matrix:
|
||||
flutter: ['beta']
|
||||
runs-on: macos-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: subosito/flutter-action@v1
|
||||
with:
|
||||
channel: ${{ matrix.flutter }}
|
||||
- run: flutter doctor
|
||||
- run: flutter --version
|
||||
- run: flutter pub get
|
||||
working-directory: example
|
||||
- run: flutter analyze
|
||||
- run: flutter test test # https://github.com/flutter/flutter/issues/20907
|
||||
- run: flutter test 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 compile
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: subosito/flutter-action@v1
|
||||
with:
|
||||
channel: 'beta'
|
||||
- run: flutter config --enable-web
|
||||
- run: flutter precache web
|
||||
- run: flutter pub get
|
||||
working-directory: example
|
||||
- run: flutter build web
|
||||
working-directory: example
|
30
.github/workflows/publish-on-pub.yaml
vendored
30
.github/workflows/publish-on-pub.yaml
vendored
@ -1,30 +0,0 @@
|
||||
name: Publish package to pub.dev
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- v*
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: subosito/flutter-action@v1
|
||||
with:
|
||||
channel: 'beta'
|
||||
- run: flutter pub get
|
||||
- run: flutter pub run tool/publish/comment_dependency_overrides.dart
|
||||
- run: flutter pub get
|
||||
- run: flutter pub run tool/publish/check_version.dart ${GITHUB_REF}
|
||||
- name: Setup credentials
|
||||
run: |
|
||||
cat <<EOF > $PUB_CACHE/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": 1580681402856
|
||||
}
|
||||
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/
|
179
CHANGELOG.md
179
CHANGELOG.md
@ -1,179 +0,0 @@
|
||||
## [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
|
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.
|
263
README.md
263
README.md
@ -1,263 +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.
|
||||
|
||||
## 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({Key? key}) : super(key: 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({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_MyAppState 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 `LottieComposition.fromByteData` to
|
||||
parse the file from a list of bytes.
|
||||
|
||||
This example shows how to load and parse a Lottie composition from a json file.
|
||||
|
||||
```dart
|
||||
class MyWidget extends StatefulWidget {
|
||||
const MyWidget({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_MyWidgetState createState() => _MyWidgetState();
|
||||
}
|
||||
|
||||
class _MyWidgetState extends State<MyWidget> {
|
||||
late final Future<LottieComposition> _composition;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_composition = _loadComposition();
|
||||
}
|
||||
|
||||
Future<LottieComposition> _loadComposition() async {
|
||||
var assetData = await rootBundle.load('assets/LottieLogo1.json');
|
||||
return await LottieComposition.fromByteData(assetData);
|
||||
}
|
||||
|
||||
@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, {Key? key}) : super(key: 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),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
## 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,89 +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.
|
||||
|
||||
## 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 `LottieComposition.fromByteData` to
|
||||
parse the file from a list of bytes.
|
||||
|
||||
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';
|
||||
````
|
||||
|
||||
## 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,29 +0,0 @@
|
||||
include: package:flutter_lints/flutter.yaml
|
||||
analyzer:
|
||||
strong-mode:
|
||||
implicit-casts: false
|
||||
implicit-dynamic: false
|
||||
linter:
|
||||
rules:
|
||||
avoid_print: false
|
||||
|
||||
always_declare_return_types: true
|
||||
avoid_dynamic_calls: true
|
||||
avoid_escaping_inner_quotes: true
|
||||
avoid_setters_without_getters: true
|
||||
cast_nullable_to_non_nullable: true
|
||||
close_sinks: true
|
||||
no_adjacent_strings_in_list: true
|
||||
no_default_cases: true
|
||||
omit_local_variable_types: true
|
||||
only_throw_errors: true
|
||||
prefer_interpolation_to_compose_strings: true
|
||||
prefer_single_quotes: true
|
||||
sort_child_properties_last: true
|
||||
sort_pub_dependencies: true
|
||||
test_types_in_equals: true
|
||||
unawaited_futures: true
|
||||
unnecessary_parenthesis: true
|
||||
unnecessary_statements: true
|
||||
unsafe_html: true
|
||||
use_raw_strings: 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