Flutter - Using SlideTransition Widget Examples

This tutorial shows you how to use SlideTransition in Flutter.

In Flutter, it's very easy to apply a transition animation to a widget. What you need to do is wrap the widget where the transition animation will be applied on as the child of SlideTransition widget. Then, create an Animation<Offset> to define the transition.

Creating SlideTransition Animation

Below is SlideTransition's constructor.

  const SlideTransition({
    Key key,
    @required Animation<Offset> position,
    this.transformHitTests = true,
    this.textDirection,
    this.child,
  })

As you can see on the constructor, it requires you to pass an Animation<Offset>. In order to create an Animation<Offset> you need to have an AnimationController, which requires you to have a State class with TickerProviderStateMixin for its vsync argument.

The below code is a basic example of how to use SlideTransition in Flutter. The duration of the animation is set in the AnimationController. In this example, we are going to use a Tween<Offset> animation where the widget's initial x offset is -0.5 and the final x offset is 0.5.

  class _AnimatedCrossFadeExampleState extends State<_AnimatedCrossFadeExample> with TickerProviderStateMixin {
    AnimationController _controller;
    Animation<Offset> _animation;
  
    @override
    void initState() {
      super.initState();
  
      _controller = AnimationController(
        duration: const Duration(seconds: 3),
        vsync: this,
      )..forward();
      _animation = Tween<Offset>(
        begin: const Offset(-0.5, 0.0),
        end: const Offset(0.5, 0.0),
      ).animate(CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInCubic,
      ));
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Builder(
          builder: (context) => Center(
            child: SlideTransition(
              position: _animation,
              child: Text('Woolha.com', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            ),
          )
        ),
      );
    }
  }

Output:

Flutter - SlideTransition - basic

 

Setting Text Direction

If you don't pass textDirection or set it to TextDirection.ltr, positive x offsets move the widget towards the right. If the property value is set to TextDirection.rtl, positive x offsets move the widget towards the left. Here's the result with the same animation, but textDirection is set to TextDirection.rtl.

  SlideTransition(
    position: _animation,
    textDirection: TextDirection.rtl,
    child: Text('Woolha.com', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
  )

Output:

Flutter - SlideTransition - basic

 

Setting transformHitTests

By default, transformHitTests is set to true which makes the widget clickable at the position it is currently painted on the screen. Setting transformHitTests to false causes the widget to be clickable only at the origin position and it's usually used when the animation is very fast and the widget is back to its origin position at the end.

To make it more obvious, we are going to have examples with a clickable button that will show a SnackBar when it's clicked. In the first example, transformHitTests is set to true.

  SlideTransition(
    position: _animation,
    transformHitTests: true,
    child: RaisedButton(
      child: Text('Woolha.com'),
      onPressed: () {
        Scaffold.of(context).showSnackBar(
          SnackBar(content: Text('Button is pressed'))
        );
      },
    ),
  )

Output:

Flutter - SlideTransition - transformHitTests - true

The origin position of the button is right on the center. You can see in the above result that the button is clickable on the area where it is painted.

 

In the second example, we set transformHitTests to false.

  SlideTransition(
    position: _animation,
    transformHitTests: false,
    child: RaisedButton(
      child: Text('Woolha.com'),
      onPressed: () {
        Scaffold.of(context).showSnackBar(
          SnackBar(content: Text('Button is pressed'))
        );
      },
    ),
  )

Output:

Flutter - SlideTransition - transformHitTests - false

As you can see, you can only click the button on its origin position which is right on the center.

 

Full Code

Below is the full code of this tutorial.

  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _AnimatedCrossFadeExample(),
      );
    }
  }
  
  class _AnimatedCrossFadeExample extends StatefulWidget {
    @override
    _AnimatedCrossFadeExampleState createState() =>
        new _AnimatedCrossFadeExampleState();
  }
  
  class _AnimatedCrossFadeExampleState extends State<_AnimatedCrossFadeExample> with TickerProviderStateMixin {
    AnimationController _controller;
    Animation<Offset> _animation;
  
    @override
    void initState() {
      super.initState();
  
      _controller = AnimationController(
        duration: const Duration(seconds: 3),
        vsync: this,
      )..forward();
      _animation = Tween<Offset>(
        begin: const Offset(-0.5, 0.0),
        end: const Offset(0.5, 0.0),
      ).animate(CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInCubic,
      ));
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Builder(
          builder: (context) => Center(
            child: SlideTransition(
              position: _animation,
              transformHitTests: true,
              textDirection: TextDirection.ltr,
              child: RaisedButton(
                child: Text('Woolha.com'),
                onPressed: () {
                  Scaffold.of(context).showSnackBar(
                    SnackBar(content: Text('Button is pressed'))
                  );
                },
              ),
            ),
          )
        ),
      );
    }
  }
  

Flutter - SlideTransition - transformHitTests - true

 

Properties

Here's the list of properties you can use to for SlideTransition.

  • Key key: The widget key, used to control if it should be replaced.
  • Animation<Offset> position *: The animation that controls the position of the child.
  • bool transformHitTests: Whether hit testing should be affected by the slide animation.
  • TextDirection textDirection: Direction of the x offset.
  • Widget child : The widget below this widget in the tree, where the slide transition animation will be applied on.

*: required