skip to Main Content

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


  1. 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.

    opacity: value
    
    Login or Signup to reply.
  2. 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 your PlayAnimationBuilder 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 your value to get hold of your desired configuration, or you know, you can just use it as is.

    MovieTween animates to Movie that offers you a get() method to obtain a single animated value.

    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.

    return PlayAnimationBuilder<Movie>(
      delay: Duration(milliseconds: (500 * delay).round()),
      tween: tween,
      duration: tween.duration,
      builder: (context, value, widget) {
        return Opacity(
          opacity: value, // use 'value' directly as the opacity value, not using get() right now
          child: Transform.translate(
            ...
          ),
        );
      },
    );
    

    Or if you have a custom class that acts as a type-safe identifier for a tween property, you can use that as well.

    return PlayAnimationBuilder<Movie>(
      delay: Duration(milliseconds: (500 * delay).round()),
      tween: tween,
      duration: tween.duration,
      builder: (context, value, widget) {
        return Opacity(
          opacity: value.get(MovieTweenProperty<double>()), // now we use get() <-
          child: Transform.translate(
            offset: Offset(0, value.get(MovieTweenProperty<double>())), // here dont use animate and instead use the value
            child: child,
          ),
        );
      },
    );
    

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search