How to make animated slide in Flutter

The Animated Slide in Flutter is an example of Implicit Animation. This Widget helps us to slide another Widget either horizontally, or vertically.

You may think of children’s playground. At that place the “slide” represents a structure. For what? To go down, of course. Every child loves to glide down. 🙂

However, in Flutter we can slide up also. In addition, we can move sideways. Towards right, or left.

Basically, the AnimatedSlide Widget works in Cartesian space.

The Widget moves either horizontally, or vertically. On the X axis or on the Y axis.

In case of Animated Slide, four arguments play the most crucial role.

The following code snippet shows those properties.

AnimatedSlide(
                offset: position.offset,
                duration: const Duration(milliseconds: 500),
                curve: Curves.easeInOut,
                child: Row(
...

The “offset” property automatically transitions the “offset” property of the Child Widget. As a result, relative to its normal position, the Child Widget starts moving.

Therefore, in a Stateful Widget we can manipulate the “offset” argument inside the “setState()” function. When the value of “offset” changes, the “State” also changes.

However, in this section, we have managed the “State” with the Provider Package.

Consequently, each change in State reduces the Widget rebuilding. In Stateful Widget, though, the whole Widget tree rebuilds.

How do you make a slide animation in Flutter?

Let us take a look at the respective screenshots first.

We have two Elevated Buttons. One represents slide-up. And the other represents slide-down.

Besides, we have put two Image Widgets in a Row Widget.

So that they can either move up, or move down.

Slide Animation has not started yet

We will discuss the code in a minute. Before we see what happens. Let us press the “down” button.

After Slide Animation has taken place

As a consequence, two images slide down. It means, in Cartesian system, they move towards the negative side of the Y axis.

Meanwhile, let us see how it works.

What is offset in animation Flutter?

Since we have used the Provider package, we added the dependencies in our “pubspec.yaml” file.

Otherwise, we cannot provide the exact “Type” that we need.

dependencies:
  animations: ^2.0.2
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  google_fonts: ^2.2.0
  material_design_icons_flutter: ^5.0.6595
  path: ^1.8.0
  provider: ^6.0.2
  sqflite: ^2.0.1

Next we need to keep our Provider on the top of the root Widget tree. Besides, we need return the “Type” that will be provided.

void main() {
  Provider.debugCheckInvalidValueType = null;
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ChangePosition()),
      ],
      child: const MyApp(),
    ),
  );
}

In the “ChangePosition” model class we have defined our Offset Constructor that passes X and Y axis as arguments.

class ChangePosition with ChangeNotifier {
  Offset offset = Offset.zero;
  void changePositionUp() {
    offset = offset -= const Offset(0, 1);
    notifyListeners();
  }

  void changePositionDown() {
    offset = offset += const Offset(0, 1);
    notifyListeners();
  }
}

The Offset is two dimensional floating-point offset. We can change it. And that is exactly what we have done through our Model class.

The rest part is quite easy.

We will provide the Model class “Type” and access the properties and methods.

class SlideanimatedExample extends StatelessWidget {
  const SlideanimatedExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ChangePosition position = Provider.of<ChangePosition>(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ElevatedButton(
              onPressed: position.changePositionDown,
              child: const Text('Slide Down'),
            ),
            const SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: position.changePositionUp,
              child: const Text('Slide Up'),
            ),
            Padding(
              padding: const EdgeInsets.all(50),
              child: AnimatedSlide(
                offset: position.offset,
                duration: const Duration(milliseconds: 500),
                curve: Curves.easeInOut,
                child: Row(
                  children: [
                    Container(
                      padding: const EdgeInsets.all(10),
                      width: 150,
                      height: 150,
                      child: Image.network(
                        'https://cdn.pixabay.com/photo/2016/03/23/04/01/woman-1274056_960_720.jpg',
                      ),
                    ),
                    const Divider(
                      thickness: 20,
                    ),
                    Container(
                      padding: const EdgeInsets.all(10),
                      width: 150,
                      height: 150,
                      child: Image.network(
                        'https://cdn.pixabay.com/photo/2015/07/09/00/29/woman-837156_960_720.jpg',
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

We can always control the “duration” and the “curve” arguments of the Animated Slide Widget.

Moreover, we can interpret the Offset in two ways. Either through the RenderBox protocol, where it represents a point in Cartesian space. Or, we can interpret as a vector applied to the coordinates. It is associated with the RenderObject.

But remember, the Offset is used in both senses.

For full code snippet please visit the particular branch of the GitHub repository.

What Next?

Twitter