slide_container 1.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 88
Awesome Flutter Dart Pub

Slide Container #

A container that can be slid vertically and horizontally with a smooth dampened motion.

Offers a handful of callbacks for customization and handles both drag distance and velocity to validate swipe gestures.

Features a customized GestureDetector to reduce nested GestureDetector conflicts.

Build the example folder with flutter run for a demo, or check the video in this blog post:

Install instructions and doc are available here:

1.1.3 - 2019-12-24 #

  • Added SlideContainerScrollView widget to be used as a SingleChildScrollView nested in a parent SlideContainer and still be able to slide the container.
  • Updated example to demo the new widget.

1.1.2 - 2019-10-09 #

  • Fixed container hit detection area not moving with content.
  • Updated example to demo the issue above and show a work around.
  • Updated example to add a few more use cases.

1.1.1 - 2019-10-09 #

  • Added option to disable auto-slide, allowing the container to stay where it as been dragged when the gesture end, instead of snapping to the start position or to the full extent.

1.1.0 - 2019-09-18 #

  • Breaking change Fixed naming issue with new Flutter version (1.9.0 and above). Use this version of the plugin when you upgrade Flutter.

1.0.7 - 2018-11-29 #

  • Added the SlideContainerController to allow a manual force slide in a given direction.
  • Updated example app to showcase the new SlideContainerController.

1.0.6 - 2018-10-25 #

  • Fixed Flutter analysis warnings.

1.0.5 - 2018-10-25 #

  • Fixed Flutter analysis warnings.

1.0.4 - 2018-10-25 #

  • Added onSlideValidated and onSlideUnvalidated callbacks.

1.0.3 - 2018-10-10 #

  • Improved logic to reduce nested GestureDetector conflicts. Now if the container as been slid to its max extent in one direction, trying to slid it more in this direction will not count as a gesture, thus allowing other GestureDetectors to get and handle the event.

1.0.2 - 2018-10-09 #

  • Updated README.

1.0.1 - 2018-10-06 #

  • Added support for horizontal sliding.
  • Breaking change
    • Renamed class VerticalSlideContainer to SlideContainer
    • Renamed enum VerticalSlideContainerDirection to SlideContainerDirection and changed its values.

1.0.0 - 2018-10-05 #

  • Initial release.


import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

import 'help_page.dart';
import 'page1.dart';
import 'page2.dart';
import 'page3.dart';
import 'page4.dart';
import 'page5.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  static const double bottomNavigationBarHeight = 48;

  Widget build(BuildContext context) => MaterialApp(
        theme: ThemeData(splashColor: Colors.transparent),
        home: Scaffold(
          body: _Body(),

class _Body extends StatefulWidget {
  _State createState() => _State();

class _State extends State<_Body> {
  final TextStyle selectedItemStyle = TextStyle(color: Colors.amber[800]);

  final List<Widget> pages = [

  int selectedPageIndex = 0;

  void initState() {
        .addPostFrameCallback((_) => Navigator.of(context).push(HelpPage()));

  void onPageSelected(int index) {
    if (mounted) setState(() => selectedPageIndex = index);

  List<BottomNavigationBarItem> get bottomNavigationBarItems => List.generate(
        (index) => BottomNavigationBarItem(
          icon: Text('${index + 1}'),
          activeIcon: Text('${index + 1}', style: selectedItemStyle),
          title: Container(),

  Widget build(BuildContext context) => Scaffold(
        body: pages[selectedPageIndex],
        bottomNavigationBar: SizedBox(
          height: App.bottomNavigationBarHeight,
          child: BottomNavigationBar(
            items: bottomNavigationBarItems,
            currentIndex: selectedPageIndex,
            onTap: onPageSelected,

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  slide_container: ^1.1.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:slide_container/slide_container.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Apr 4, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8