Add flutter_web samples (#75)

web/particle_background/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Felix Blaschke
+
+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.

web/particle_background/README.md

@@ -0,0 +1,7 @@
+Flutter app demonstrating
+[simple_animations](https://pub.dev/packages/simple_animations) in action.
+
+Contributed by Felix Blaschke.
+
+One of a series of samples
+[published here](https://github.com/felixblaschke/simple_animations_example_app).

web/particle_background/lib/main.dart

@@ -0,0 +1,171 @@
+import 'dart:math';
+
+import 'package:flutter_web/material.dart';
+import 'package:particle_background/simple_animations_package.dart';
+
+void main() => runApp(ParticleApp());
+
+class ParticleApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: ParticleBackgroundPage(),
+      ),
+    );
+  }
+}
+
+class ParticleBackgroundPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: <Widget>[
+        Positioned.fill(child: AnimatedBackground()),
+        Positioned.fill(child: Particles(30)),
+        Positioned.fill(child: CenteredText()),
+      ],
+    );
+  }
+}
+
+class Particles extends StatefulWidget {
+  final int numberOfParticles;
+
+  Particles(this.numberOfParticles);
+
+  @override
+  _ParticlesState createState() => _ParticlesState();
+}
+
+class _ParticlesState extends State<Particles> {
+  final Random random = Random();
+
+  final List<ParticleModel> particles = [];
+
+  @override
+  void initState() {
+    List.generate(widget.numberOfParticles, (index) {
+      particles.add(ParticleModel(random));
+    });
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Rendering(
+      startTime: Duration(seconds: 30),
+      onTick: _simulateParticles,
+      builder: (context, time) {
+        return CustomPaint(
+          painter: ParticlePainter(particles, time),
+        );
+      },
+    );
+  }
+
+  _simulateParticles(Duration time) {
+    particles.forEach((particle) => particle.maintainRestart(time));
+  }
+}
+
+class ParticleModel {
+  Animatable tween;
+  double size;
+  AnimationProgress animationProgress;
+  Random random;
+
+  ParticleModel(this.random) {
+    restart();
+  }
+
+  restart({Duration time = Duration.zero}) {
+    final startPosition = Offset(-0.2 + 1.4 * random.nextDouble(), 1.2);
+    final endPosition = Offset(-0.2 + 1.4 * random.nextDouble(), -0.2);
+    final duration = Duration(milliseconds: 3000 + random.nextInt(6000));
+
+    tween = MultiTrackTween([
+      Track("x").add(
+          duration, Tween(begin: startPosition.dx, end: endPosition.dx),
+          curve: Curves.easeInOutSine),
+      Track("y").add(
+          duration, Tween(begin: startPosition.dy, end: endPosition.dy),
+          curve: Curves.easeIn),
+    ]);
+    animationProgress = AnimationProgress(duration: duration, startTime: time);
+    size = 0.2 + random.nextDouble() * 0.4;
+  }
+
+  maintainRestart(Duration time) {
+    if (animationProgress.progress(time) == 1.0) {
+      restart(time: time);
+    }
+  }
+}
+
+class ParticlePainter extends CustomPainter {
+  List<ParticleModel> particles;
+  Duration time;
+
+  ParticlePainter(this.particles, this.time);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()..color = Colors.white.withAlpha(50);
+
+    particles.forEach((particle) {
+      var progress = particle.animationProgress.progress(time);
+      final animation = particle.tween.transform(progress);
+      final position =
+          Offset(animation["x"] * size.width, animation["y"] * size.height);
+      canvas.drawCircle(position, size.width * 0.2 * particle.size, paint);
+    });
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}
+
+class AnimatedBackground extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final tween = MultiTrackTween([
+      Track("color1").add(Duration(seconds: 3),
+          ColorTween(begin: Color(0xff8a113a), end: Colors.lightBlue.shade900)),
+      Track("color2").add(Duration(seconds: 3),
+          ColorTween(begin: Color(0xff440216), end: Colors.blue.shade600))
+    ]);
+
+    return ControlledAnimation(
+      playback: Playback.MIRROR,
+      tween: tween,
+      duration: tween.duration,
+      builder: (context, animation) {
+        return Container(
+          decoration: BoxDecoration(
+              gradient: LinearGradient(
+                  begin: Alignment.topLeft,
+                  end: Alignment.bottomRight,
+                  colors: [animation["color1"], animation["color2"]])),
+        );
+      },
+    );
+  }
+}
+
+class CenteredText extends StatelessWidget {
+  const CenteredText({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text(
+        "Welcome to Flutter for web",
+        style: TextStyle(color: Colors.white, fontWeight: FontWeight.w200),
+        textScaleFactor: 4,
+      ),
+    );
+  }
+}

web/particle_background/lib/simple_animations_package.dart

@@ -0,0 +1,465 @@
+// Package simple_animations:
+//    https://pub.dev/packages/simple_animations
+
+import 'dart:math';
+import 'package:flutter_web/widgets.dart';
+import 'package:flutter_web/scheduler.dart';
+
+/// Widget to easily create a continuous animation.
+///
+/// You need to specify a [builder] function that gets the build context passed
+/// along with the [timeElapsed] (as a [Duration]) since the rendering started.
+/// You can use this time to specify custom animations on it.
+///
+/// The [builder] rebuilds all sub-widgets every frame.
+///
+/// You define an [onTick] function that is called before builder to update
+/// you rendered scene. It's also utilized during fast-forwarding the animation.
+///
+/// Specify a [startTime] to fast-forward your animation in the beginning.
+/// The widget will interpolate the animation by calling the [onTick] function
+/// multiple times. (Default value is `20`. You can tune it by setting the
+/// [startTimeSimulationTicks] property.)
+class Rendering extends StatefulWidget {
+  final Widget Function(BuildContext context, Duration timeElapsed) builder;
+  final Function(Duration timeElapsed) onTick;
+  final Duration startTime;
+  final int startTimeSimulationTicks;
+
+  Rendering(
+      {this.builder,
+      this.onTick,
+      this.startTime = Duration.zero,
+      this.startTimeSimulationTicks = 20})
+      : assert(builder != null, "Builder needs to defined.");
+
+  @override
+  _RenderingState createState() => _RenderingState();
+}
+
+class _RenderingState extends State<Rendering>
+    with SingleTickerProviderStateMixin {
+  Ticker _ticker;
+  Duration _timeElapsed = Duration(milliseconds: 0);
+
+  @override
+  void initState() {
+    if (widget.startTime > Duration.zero) {
+      _simulateStartTimeTicks();
+    }
+
+    _ticker = createTicker((elapsed) {
+      _onRender(elapsed + widget.startTime);
+    });
+    _ticker.start();
+    super.initState();
+  }
+
+  void _onRender(Duration effectiveElapsed) {
+    if (widget.onTick != null) {
+      widget.onTick(effectiveElapsed);
+    }
+    setState(() {
+      _timeElapsed = effectiveElapsed;
+    });
+  }
+
+  void _simulateStartTimeTicks() {
+    if (widget.onTick != null) {
+      Iterable.generate(widget.startTimeSimulationTicks + 1).forEach((i) {
+        final simulatedTime = Duration(
+            milliseconds: (widget.startTime.inMilliseconds *
+                    i /
+                    widget.startTimeSimulationTicks)
+                .round());
+        widget.onTick(simulatedTime);
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _ticker.stop(canceled: true);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.builder(context, _timeElapsed);
+  }
+}
+
+/// Animatable that tweens multiple parallel properties (called [Track]s).
+/// ---
+/// The constructor of [MultiTrackTween] expects a list of [Track] objects.
+/// You can fetch the specified total duration via [duration] getter.
+/// ---
+/// Example:
+///
+/// ```dart
+///   final tween = MultiTrackTween([
+///     Track("color")
+///       .add(Duration(seconds: 1), ColorTween(begin: Colors.red, end: Colors.blue))
+///       .add(Duration(seconds: 1), ColorTween(begin: Colors.blue, end: Colors.yellow)),
+///     Track("width")
+///       .add(Duration(milliseconds: 500), ConstantTween(200.0))
+///       .add(Duration(milliseconds: 1500), Tween(begin: 200.0, end: 400.0),
+///            curve: Curves.easeIn)
+///   ]);
+///
+///   return ControlledAnimation(
+///     duration: tween.duration,
+///     tween: tween,
+///     builder: (context, values) {
+///        ...
+///     }
+///   );
+/// ```
+class MultiTrackTween extends Animatable<Map<String, dynamic>> {
+  final _tracksToTween = Map<String, _TweenData>();
+  var _maxDuration = 0;
+
+  MultiTrackTween(List<Track> tracks)
+      : assert(tracks != null && tracks.length > 0,
+            "Add a List<Track> to configure the tween."),
+        assert(tracks.where((track) => track.items.length == 0).length == 0,
+            "Each Track needs at least one added Tween by using the add()-method.") {
+    _computeMaxDuration(tracks);
+    _computeTrackTweens(tracks);
+  }
+
+  void _computeMaxDuration(List<Track> tracks) {
+    tracks.forEach((track) {
+      final trackDuration = track.items
+          .map((item) => item.duration.inMilliseconds)
+          .reduce((sum, item) => sum + item);
+      _maxDuration = max(_maxDuration, trackDuration);
+    });
+  }
+
+  void _computeTrackTweens(List<Track> tracks) {
+    tracks.forEach((track) {
+      final trackDuration = track.items
+          .map((item) => item.duration.inMilliseconds)
+          .reduce((sum, item) => sum + item);
+
+      final sequenceItems = track.items
+          .map((item) => TweenSequenceItem(
+              tween: item.tween,
+              weight: item.duration.inMilliseconds / _maxDuration))
+          .toList();
+
+      if (trackDuration < _maxDuration) {
+        sequenceItems.add(TweenSequenceItem(
+            tween: ConstantTween(null),
+            weight: (_maxDuration - trackDuration) / _maxDuration));
+      }
+
+      final sequence = TweenSequence(sequenceItems);
+
+      _tracksToTween[track.name] =
+          _TweenData(tween: sequence, maxTime: trackDuration / _maxDuration);
+    });
+  }
+
+  /// Returns the highest duration specified by [Track]s.
+  /// ---
+  /// Use it to pass it into an [ControlledAnimation].
+  ///
+  /// You can also scale it by multiplying a double value.
+  ///
+  /// Example:
+  /// ```dart
+  ///   final tween = MultiTrackTween(listOfTracks);
+  ///
+  ///   return ControlledAnimation(
+  ///     duration: tween.duration * 1.25, // stretch animation by 25%
+  ///     tween: tween,
+  ///     builder: (context, values) {
+  ///        ...
+  ///     }
+  ///   );
+  /// ```
+  Duration get duration {
+    return Duration(milliseconds: _maxDuration);
+  }
+
+  @override
+  Map<String, dynamic> transform(double t) {
+    final Map<String, dynamic> result = Map();
+    _tracksToTween.forEach((name, tweenData) {
+      final double tTween = max(0, min(t, tweenData.maxTime - 0.0001));
+      result[name] = tweenData.tween.transform(tTween);
+    });
+    return result;
+  }
+}
+
+/// Single property to tween. Used by [MultiTrackTween].
+class Track<T> {
+  final String name;
+  final List<_TrackItem> items = [];
+
+  Track(this.name) : assert(name != null, "Track name must not be null.");
+
+  /// Adds a "piece of animation" to a [Track].
+  ///
+  /// You need to pass a [duration] and a [tween]. It will return the track, so
+  /// you can specify a track in a builder's style.
+  ///
+  /// Optionally you can set a named parameter [curve] that applies an easing
+  /// curve to the tween.
+  Track<T> add(Duration duration, Animatable<T> tween, {Curve curve}) {
+    items.add(_TrackItem(duration, tween, curve: curve));
+    return this;
+  }
+}
+
+class _TrackItem<T> {
+  final Duration duration;
+  Animatable<T> tween;
+
+  _TrackItem(this.duration, Animatable<T> _tween, {Curve curve})
+      : assert(duration != null, "Please set a duration."),
+        assert(_tween != null, "Please set a tween.") {
+    if (curve != null) {
+      tween = _tween.chain(CurveTween(curve: curve));
+    } else {
+      tween = _tween;
+    }
+  }
+}
+
+class _TweenData<T> {
+  final Animatable<T> tween;
+  final double maxTime;
+
+  _TweenData({this.tween, this.maxTime});
+}
+
+/// Playback tell the controller of the animation what to do.
+enum Playback {
+  /// Animation stands still.
+  PAUSE,
+
+  /// Animation plays forwards and stops at the end.
+  PLAY_FORWARD,
+
+  /// Animation plays backwards and stops at the beginning.
+  PLAY_REVERSE,
+
+  /// Animation will reset to the beginning and start playing forward.
+  START_OVER_FORWARD,
+
+  /// Animation will reset to the end and start play backward.
+  START_OVER_REVERSE,
+
+  /// Animation will play forwards and start over at the beginning when it
+  /// reaches the end.
+  LOOP,
+
+  /// Animation will play forward until the end and will reverse playing until
+  /// it reaches the beginning. Then it starts over playing forward. And so on.
+  MIRROR
+}
+
+/// Widget to create custom, managed, tween-based animations in a very simple way.
+///
+/// ---
+///
+/// An internal [AnimationController] will do everything you tell him by
+/// dynamically assigning the one [Playback] to [playback] property.
+/// By default the animation will start playing forward and stops at the end.
+///
+/// A minimum set of properties are [duration] (time span of the animation),
+/// [tween] (values to interpolate among the animation) and a [builder] function
+/// (defines the animated scene).
+///
+/// Instead of using [builder] as building function you can use for performance
+/// critical scenarios [builderWithChild] along with a prebuild [child].
+///
+/// ---
+///
+/// The following properties are optional:
+///
+/// - You can apply a [delay] that forces the animation to pause a
+///   specified time before the animation will perform the defined [playback]
+///   instruction.
+///
+/// - You can specify a [curve] that modifies the [tween] by applying a
+///   non-linear animation function. You can find curves in [Curves], for
+///   example [Curves.easeOut] or [Curves.easeIn].
+///
+/// - You can track the animation by setting an [AnimationStatusListener] to
+///   the property [animationControllerStatusListener]. The internal [AnimationController] then
+///   will route out any events that occur. [ControlledAnimation] doesn't filter
+///   or modifies these events. These events are currently only reliable for the
+///   [playback]-types [Playback.PLAY_FORWARD] and [Playback.PLAY_REVERSE].
+///
+/// - You can set the start position of animation by specifying [startPosition]
+///   with a value between *0.0* and *1.0*. The [startPosition] is only
+///   evaluated once during the initialization of the widget.
+///
+class ControlledAnimation<T> extends StatefulWidget {
+  final Playback playback;
+  final Animatable<T> tween;
+  final Curve curve;
+  final Duration duration;
+  final Duration delay;
+  final Widget Function(BuildContext buildContext, T animatedValue) builder;
+  final Widget Function(BuildContext, Widget child, T animatedValue)
+      builderWithChild;
+  final Widget child;
+  final AnimationStatusListener animationControllerStatusListener;
+  final double startPosition;
+
+  ControlledAnimation(
+      {this.playback = Playback.PLAY_FORWARD,
+      this.tween,
+      this.curve = Curves.linear,
+      this.duration,
+      this.delay,
+      this.builder,
+      this.builderWithChild,
+      this.child,
+      this.animationControllerStatusListener,
+      this.startPosition = 0.0,
+      Key key})
+      : assert(duration != null,
+            "Please set property duration. Example: Duration(milliseconds: 500)"),
+        assert(tween != null,
+            "Please set property tween. Example: Tween(from: 0.0, to: 100.0)"),
+        assert(
+            (builderWithChild != null && child != null && builder == null) ||
+                (builder != null && builderWithChild == null && child == null),
+            "Either use just builder and keep buildWithChild and child null. "
+            "Or keep builder null and set a builderWithChild and a child."),
+        assert(
+            startPosition >= 0 && startPosition <= 1,
+            "The property startPosition "
+            "must have a value between 0.0 and 1.0."),
+        super(key: key);
+
+  @override
+  _ControlledAnimationState<T> createState() => _ControlledAnimationState<T>();
+}
+
+class _ControlledAnimationState<T> extends State<ControlledAnimation>
+    with SingleTickerProviderStateMixin {
+  AnimationController _controller;
+  Animation<T> _animation;
+  bool _isDisposed = false;
+  bool _waitForDelay = true;
+  bool _isCurrentlyMirroring = false;
+
+  @override
+  void initState() {
+    _controller = AnimationController(vsync: this, duration: widget.duration)
+      ..addListener(() {
+        setState(() {});
+      })
+      ..value = widget.startPosition;
+
+    _animation = widget.tween
+        .chain(CurveTween(curve: widget.curve))
+        .animate(_controller);
+
+    if (widget.animationControllerStatusListener != null) {
+      _controller.addStatusListener(widget.animationControllerStatusListener);
+    }
+
+    initialize();
+    super.initState();
+  }
+
+  void initialize() async {
+    if (widget.delay != null) {
+      await Future.delayed(widget.delay);
+    }
+    _waitForDelay = false;
+    executeInstruction();
+  }
+
+  @override
+  void didUpdateWidget(ControlledAnimation oldWidget) {
+    _controller.duration = widget.duration;
+    executeInstruction();
+    super.didUpdateWidget(oldWidget);
+  }
+
+  void executeInstruction() async {
+    if (_isDisposed || _waitForDelay) {
+      return;
+    }
+
+    if (widget.playback == Playback.PAUSE) {
+      _controller.stop();
+    }
+    if (widget.playback == Playback.PLAY_FORWARD) {
+      _controller.forward();
+    }
+    if (widget.playback == Playback.PLAY_REVERSE) {
+      _controller.reverse();
+    }
+    if (widget.playback == Playback.START_OVER_FORWARD) {
+      _controller.forward(from: 0.0);
+    }
+    if (widget.playback == Playback.START_OVER_REVERSE) {
+      _controller.reverse(from: 1.0);
+    }
+    if (widget.playback == Playback.LOOP) {
+      _controller.repeat();
+    }
+    if (widget.playback == Playback.MIRROR && !_isCurrentlyMirroring) {
+      _isCurrentlyMirroring = true;
+      _controller.repeat(reverse: true);
+    }
+
+    if (widget.playback != Playback.MIRROR) {
+      _isCurrentlyMirroring = false;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.builder != null) {
+      return widget.builder(context, _animation.value);
+    } else if (widget.builderWithChild != null && widget.child != null) {
+      return widget.builderWithChild(context, widget.child, _animation.value);
+    }
+    _controller.stop(canceled: true);
+    throw FlutterError(
+        "I don't know how to build the animation. Make sure to either specify "
+        "a builder or a builderWithChild (along with a child).");
+  }
+
+  @override
+  void dispose() {
+    _isDisposed = true;
+    _controller.dispose();
+    super.dispose();
+  }
+}
+
+/// Utility class to compute an animation progress between two points in time.
+///
+/// On creation you specify a [startTime] and a [duration].
+///
+/// You can query the progress value - a value between `0.0` and `11.0` - by
+/// calling [progress] and passing the current time.
+class AnimationProgress {
+  final Duration duration;
+  final Duration startTime;
+
+  /// Creates an [AnimationProgress].
+  AnimationProgress({this.duration, this.startTime})
+      : assert(duration != null, "Please specify an animation duration."),
+        assert(
+            startTime != null, "Please specify a start time of the animation.");
+
+  /// Queries the current progress value based on the specified [startTime] and
+  /// [duration] as a value between `0.0` and `1.0`. It will automatically
+  /// clamp values this interval to fit in.
+  double progress(Duration time) => max(0.0,
+      min((time - startTime).inMilliseconds / duration.inMilliseconds, 1.0));
+}

web/particle_background/pubspec.lock

@@ -0,0 +1,471 @@
+# Generated by pub
+# See https://www.dartlang.org/tools/pub/glossary#lockfile
+packages:
+  analyzer:
+    dependency: transitive
+    description:
+      name: analyzer
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.36.3"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.8"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.5.1"
+  async:
+    dependency: transitive
+    description:
+      name: async
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.0"
+  bazel_worker:
+    dependency: transitive
+    description:
+      name: bazel_worker
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.20"
+  build:
+    dependency: transitive
+    description:
+      name: build
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.4"
+  build_config:
+    dependency: transitive
+    description:
+      name: build_config
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.0"
+  build_daemon:
+    dependency: transitive
+    description:
+      name: build_daemon
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.0"
+  build_modules:
+    dependency: transitive
+    description:
+      name: build_modules
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.2"
+  build_resolvers:
+    dependency: transitive
+    description:
+      name: build_resolvers
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.4"
+  build_runner:
+    dependency: "direct dev"
+    description:
+      name: build_runner
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.4.0"
+  build_runner_core:
+    dependency: transitive
+    description:
+      name: build_runner_core
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.5"
+  build_web_compilers:
+    dependency: "direct dev"
+    description:
+      name: build_web_compilers
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
+  built_collection:
+    dependency: transitive
+    description:
+      name: built_collection
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.2.1"
+  built_value:
+    dependency: transitive
+    description:
+      name: built_value
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.5.0"
+  charcode:
+    dependency: transitive
+    description:
+      name: charcode
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.2"
+  code_builder:
+    dependency: transitive
+    description:
+      name: code_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.2.0"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.14.11"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.16.0"
+  dart_style:
+    dependency: transitive
+    description:
+      name: dart_style
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.2.7"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.10.9"
+  flutter_web:
+    dependency: "direct main"
+    description:
+      path: "packages/flutter_web"
+      ref: HEAD
+      resolved-ref: "7a92f7391ee8a72c398f879e357380084e2076b4"
+      url: "https://github.com/flutter/flutter_web"
+    source: git
+    version: "0.0.0"
+  flutter_web_ui:
+    dependency: "direct main"
+    description:
+      path: "packages/flutter_web_ui"
+      ref: HEAD
+      resolved-ref: "7a92f7391ee8a72c398f879e357380084e2076b4"
+      url: "https://github.com/flutter/flutter_web"
+    source: git
+    version: "0.0.0"
+  front_end:
+    dependency: transitive
+    description:
+      name: front_end
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.18"
+  glob:
+    dependency: transitive
+    description:
+      name: glob
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.7"
+  graphs:
+    dependency: transitive
+    description:
+      name: graphs
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.0"
+  html:
+    dependency: transitive
+    description:
+      name: html
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.14.0+2"
+  http:
+    dependency: transitive
+    description:
+      name: http
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.12.0+2"
+  http_multi_server:
+    dependency: transitive
+    description:
+      name: http_multi_server
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.3"
+  intl:
+    dependency: transitive
+    description:
+      name: intl
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.15.8"
+  io:
+    dependency: transitive
+    description:
+      name: io
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.3"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.1+1"
+  json_annotation:
+    dependency: transitive
+    description:
+      name: json_annotation
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.0"
+  kernel:
+    dependency: transitive
+    description:
+      name: kernel
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.18"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.11.3+2"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.12.5"
+  meta:
+    dependency: transitive
+    description:
+      name: meta
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.7"
+  mime:
+    dependency: transitive
+    description:
+      name: mime
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.6+2"
+  package_config:
+    dependency: transitive
+    description:
+      name: package_config
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.5"
+  package_resolver:
+    dependency: transitive
+    description:
+      name: package_resolver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.10"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.6.2"
+  pedantic:
+    dependency: transitive
+    description:
+      name: pedantic
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.6.0"
+  pool:
+    dependency: transitive
+    description:
+      name: pool
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.4.0"
+  protobuf:
+    dependency: transitive
+    description:
+      name: protobuf
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.13.11"
+  pub_semver:
+    dependency: transitive
+    description:
+      name: pub_semver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.4.2"
+  pubspec_parse:
+    dependency: transitive
+    description:
+      name: pubspec_parse
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.4"
+  quiver:
+    dependency: transitive
+    description:
+      name: quiver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.3"
+  scratch_space:
+    dependency: transitive
+    description:
+      name: scratch_space
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.3+2"
+  shelf:
+    dependency: transitive
+    description:
+      name: shelf
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.7.5"
+  shelf_web_socket:
+    dependency: transitive
+    description:
+      name: shelf_web_socket
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.3"
+  source_maps:
+    dependency: transitive
+    description:
+      name: source_maps
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.10.8"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.5.5"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.9.3"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.19"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.4"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
+  timing:
+    dependency: transitive
+    description:
+      name: timing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.1+1"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.6"
+  vector_math:
+    dependency: transitive
+    description:
+      name: vector_math
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.8"
+  watcher:
+    dependency: transitive
+    description:
+      name: watcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.7+10"
+  web_socket_channel:
+    dependency: transitive
+    description:
+      name: web_socket_channel
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.12"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.15"
+sdks:
+  dart: ">=2.3.0-dev.0.1 <3.0.0"

web/particle_background/pubspec.yaml

@@ -0,0 +1,27 @@
+name: particle_background
+description: Example for the simple_animations package
+author: Felix Blaschke <felix@felix-blaschke.de>
+homepage: https://github.com/felixblaschke/simple_animations
+
+environment:
+  sdk: ">=2.2.0 <3.0.0"
+
+dependencies:
+  flutter_web: any
+  flutter_web_ui: any
+
+dev_dependencies:
+  build_runner: any
+  build_web_compilers: any
+
+# flutter_web packages are not published to pub.dartlang.org
+# These overrides tell the package tools to get them from GitHub
+dependency_overrides:
+  flutter_web:
+    git:
+      url: https://github.com/flutter/flutter_web
+      path: packages/flutter_web
+  flutter_web_ui:
+    git:
+      url: https://github.com/flutter/flutter_web
+      path: packages/flutter_web_ui

web/particle_background/web/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+  <script defer src="main.dart.js" type="application/javascript"></script>
+</head>
+<body>
+</body>
+</html>

web/particle_background/web/main.dart

@@ -0,0 +1,10 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import 'package:flutter_web_ui/ui.dart' as ui;
+import 'package:particle_background/main.dart' as app;
+
+main() async {
+  await ui.webOnlyInitializePlatform();
+  app.main();
+}