I have issues in the following code where am using a simpleanimation flutter package. Issue occurring in this statement opacity: animation?["opacity"]
. It prompted me to do add null safety and so I did, but then it gave this error The Operator ‘[]’ isn’t defined for the type ‘Widget’ . Try defining the operator ‘[]’. How to resolve it?
**Code of MovieTween is **
final tween = MovieTween();
tween.tween('opacity', Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 500));
tween.tween('translateY', Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 500),
curve: Curves.easeOut);
return PlayAnimationBuilder<Movie>(
delay: Duration(milliseconds: (500 * delay).round()),
tween: tween, // provide tween
duration: tween.duration, // total duration obtained from MovieTween
builder: (context, value, animation) {
return Opacity(
opacity: animation?["opacity"],
child: Transform.translate(
offset: Offset(0, animation["translateY"]),
child: child
),
);
},
);
Am adding code of MovieTween class below:
/// Animates a property and returns the implicitly created scene.
/// The scene can be used to add further properties to the scene or to
/// add further scenes to the movie.
MovieScene thenTween<T>(
/// Property to animate
MovieTweenPropertyType property,
//// Tween that describes the property animation.
Animatable<T> tween, {
/// Duration of the scene
required Duration duration,
/// Fine-tune the begin time of the next scene by adding a delay.
/// The value can also be negative.
Duration delay = Duration.zero,
/// Custom curve for this property.
Curve? curve,
Curve? sceneCurve,
}) {
return thenFor(duration: duration, delay: delay, curve: sceneCurve)
.tween(property, tween, curve: curve);
}
/// Adds an additional scene that begins immediately after this scene.
MovieScene thenFor({
/// Duration of the scene
required Duration duration,
/// Fine-tune the begin time of the next scene by adding a delay.
/// The value can also be negative.
Duration delay = Duration.zero,
/// Custom curve for this scene.
Curve? curve,
}) {
return parent.scene(
begin: begin + this.duration + delay,
duration: duration,
curve: curve,
);
}
}
class _SceneItem {
final MovieTweenPropertyType property;
final Animatable tween;
final Curve? curve;
final Duration shiftBegin;
final Duration shiftEnd;
_SceneItem({
required this.property,
required this.tween,
required this.shiftBegin,
required this.shiftEnd,
this.curve,
});
}
/// A snapshot of properties that are animated by a [MovieTween].
/// This class can obtained by using [MovieTween.transform].
class Movie {
final Map<MovieTweenPropertyType, dynamic> _map;
Movie({required Map<MovieTweenPropertyType, dynamic> map}) : _map = map;
/// Returns the value for a given [property].
V get<V>(MovieTweenPropertyType property) {
assert(_map.containsKey(property), 'Property $property was not found.');
return _map[property] as V;
}
}
class _AbsoluteSceneItem {
final MovieTweenPropertyType property;
final Animatable<dynamic> tween;
final Curve curve;
final int begin;
final int end;
_AbsoluteSceneItem({
required this.property,
required this.tween,
required this.curve,
required this.begin,
required this.end,
});
}
/// Any [Object] can act as a tween property.
typedef MovieTweenPropertyType = Object;
/// Type-safe tween property that can be used as a `const`.
class MovieTweenProperty<T> {
MovieTweenProperty();
/// Returns the current value of this property.
T from(Movie movie) => movie.get(this);
}
2
Answers
The third parameter to the builder method is a Widget which would be more appropriate to name it "child".
The value you specify for the opacity maybe should be value.
As I’ve looked through similar issues and solutions,
simple_animations
docs and read a few code, I think I understood what’s wrong with your code.It seems like the third parameter in
builder:
method inside yourPlayAnimationBuilder
is a Widget (It’s better practice to rename that parameter). And as we all know, we cannot treat widgets as a map. So,simpleWidget["something"]
won’t work.In order to set your opacity, the best way is to use the
value
. You can use the.get()
method with yourvalue
to get hold of your desired configuration, or you know, you can just use it as is.The value represents the current state of the animation and holds the interpolated values for each property. It might be a good idea to use value as it is.
Or if you have a custom class that acts as a type-safe identifier for a tween property, you can use that as well.
Hope this solves your issue. Feel free to provide more information so that we can solve your issue if this one doesn’t work for you.