-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add interactive animation demo and improve README
- Loading branch information
Showing
5 changed files
with
271 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,22 @@ | ||
| Example app to demonstrate use of the `fleet` package. | ||
| This Flutter project contains a number of small self contained demos to | ||
| demonstrate the Fleet framework: | ||
|
|
||
| - [interactive_box_fleet.dart] and [interactive_box_flutter.dart] implement the | ||
| same interactive animation, one using the Fleet framework and the other using | ||
| the standard components from the Flutter framework. | ||
| - [simple_declarative_animation.dart] show how to use animate though a | ||
| declarative style with `Animated`. | ||
| - [simple_imperative_animation.dart] show how to use animate though a imperative | ||
| style with `setStateWithAnimation`. | ||
| - [stack.dart] show how to stagger animations through `AnimatedSpec.delay`. | ||
|
|
||
| [interactive_box_fleet.dart]: | ||
| https://github.com/blaugold/fleet/blob/main/packages/fleet/example/lib/interactive_box_fleet.dart | ||
| [interactive_box_flutter.dart]: | ||
| https://github.com/blaugold/fleet/blob/main/packages/fleet/example/lib/interactive_box_flutter.dart | ||
| [simple_declarative_animation.dart]: | ||
| https://github.com/blaugold/fleet/blob/main/packages/fleet/example/lib/simple_declarative_animation.dart | ||
| [simple_imperative_animation.dart]: | ||
| https://github.com/blaugold/fleet/blob/main/packages/fleet/example/lib/simple_imperative_animation.dart | ||
| [stack.dart]: | ||
| https://github.com/blaugold/fleet/blob/main/packages/fleet/example/lib/stack.dart |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import 'package:fleet/fleet.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| void main() { | ||
| FleetBinding.ensureInitialized(); | ||
| runApp(const MyApp()); | ||
| } | ||
|
|
||
| class MyApp extends StatelessWidget { | ||
| const MyApp({super.key}); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return const MaterialApp( | ||
| debugShowCheckedModeBanner: false, | ||
| home: MyHomePage(), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class MyHomePage extends StatefulWidget { | ||
| const MyHomePage({super.key}); | ||
|
|
||
| @override | ||
| State<MyHomePage> createState() => _MyHomePageState(); | ||
| } | ||
|
|
||
| class _MyHomePageState extends State<MyHomePage> { | ||
| static final _distanceColorTween = | ||
| ColorTween(begin: Colors.blue, end: Colors.green); | ||
|
|
||
| var _alignment = Alignment.center; | ||
| var _color = _distanceColorTween.begin!; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final size = MediaQuery.of(context).size / 2; | ||
| return Scaffold( | ||
| body: GestureDetector( | ||
| onPanUpdate: (details) { | ||
| setState(() { | ||
| _alignment += Alignment( | ||
| details.delta.dx / size.width, | ||
| details.delta.dy / size.height, | ||
| ); | ||
| final distance = Offset(_alignment.x, _alignment.y).distance; | ||
| _color = _distanceColorTween.transform(distance)!; | ||
| }); | ||
| }, | ||
| onPanEnd: (_) { | ||
| setStateWithAnimation(Curves.ease.animation(300.ms), () { | ||
| _alignment = Alignment.center; | ||
| _color = _distanceColorTween.begin!; | ||
| }); | ||
| }, | ||
| child: AAlign( | ||
| alignment: _alignment, | ||
| child: SizedBox.square( | ||
| dimension: 400, | ||
| child: AColoredBox( | ||
| color: _color, | ||
| child: const Center( | ||
| child: Text( | ||
| 'Drag me!', | ||
| style: TextStyle(color: Colors.white), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
103 changes: 103 additions & 0 deletions
103
packages/fleet/example/lib/interactive_box_flutter.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import 'package:fleet/fleet.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| void main() { | ||
| FleetBinding.ensureInitialized(); | ||
| runApp(const MyApp()); | ||
| } | ||
|
|
||
| class MyApp extends StatelessWidget { | ||
| const MyApp({super.key}); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return const MaterialApp( | ||
| debugShowCheckedModeBanner: false, | ||
| home: MyHomePage(), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class MyHomePage extends StatefulWidget { | ||
| const MyHomePage({super.key}); | ||
|
|
||
| @override | ||
| State<MyHomePage> createState() => _MyHomePageState(); | ||
| } | ||
|
|
||
| class _MyHomePageState extends State<MyHomePage> | ||
| with SingleTickerProviderStateMixin { | ||
| static final _distanceColorTween = | ||
| ColorTween(end: Colors.green, begin: Colors.blue); | ||
|
|
||
| late final _controller = AnimationController(duration: 300.ms, vsync: this); | ||
|
|
||
| final _alignmentTween = AlignmentTween(end: Alignment.center); | ||
| final _colorTween = ColorTween(end: _distanceColorTween.begin); | ||
|
|
||
| late var _alignment = _alignmentTween.end!; | ||
| late var _color = _distanceColorTween.begin!; | ||
|
|
||
| @override | ||
| void initState() { | ||
| super.initState(); | ||
|
|
||
| final curveTween = CurveTween(curve: Curves.ease); | ||
| final alignmentAnimation = | ||
| _alignmentTween.chain(curveTween).animate(_controller); | ||
| final colorAnimation = _colorTween.chain(curveTween).animate(_controller); | ||
|
|
||
| _controller.addListener(() { | ||
| setState(() { | ||
| _alignment = alignmentAnimation.value; | ||
| _color = colorAnimation.value!; | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| @override | ||
| void dispose() { | ||
| _controller.dispose(); | ||
| super.dispose(); | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final size = MediaQuery.of(context).size / 2; | ||
| return Scaffold( | ||
| body: GestureDetector( | ||
| onPanUpdate: (details) { | ||
| _controller.stop(); | ||
| setState(() { | ||
| _alignment += Alignment( | ||
| details.delta.dx / size.width, | ||
| details.delta.dy / size.height, | ||
| ); | ||
| final distance = Offset(_alignment.x, _alignment.y).distance; | ||
| _color = _distanceColorTween.transform(distance)!; | ||
| }); | ||
| }, | ||
| onPanEnd: (_) { | ||
| _alignmentTween.begin = _alignment; | ||
| _colorTween.begin = _color; | ||
| _controller.forward(from: 0); | ||
| }, | ||
| child: Align( | ||
| alignment: _alignment, | ||
| child: SizedBox.square( | ||
| dimension: 400, | ||
| child: ColoredBox( | ||
| color: _color, | ||
| child: const Center( | ||
| child: Text( | ||
| 'Drag me!', | ||
| style: TextStyle(color: Colors.white), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
File renamed without changes.