Skip to content

Nidakhan786/liquid_swipe_flutter

 
 

Repository files navigation

liquid_swipe Pub

Liquid swipe is the revealing clipper to stacked Container and inspired by Cuberto's liquid swipe and IntroViews.

Sample

Video

APK

Download

Usage

  • Add this to your pubspec.yaml

    dependencies:
    liquid_swipe: ^1.0.2
    
    
  • Get package from Pub:

    flutter packages get
    
  • Import it in your file

    import 'package:liquid_swipe/liquid_swipe.dart';
    

Example

  • First, create a list of Containers.
final pages = [
   Container(
     color: Colors.pink,
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisSize: MainAxisSize.max,
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: <Widget>[
         Image.asset(
           'assets/1.png',
           fit: BoxFit.cover,
         ),
         Padding(padding: const EdgeInsets.all(20.0)),
         Column(
           children: <Widget>[
             new Text(
               "Hi",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
             new Text(
               "It's Me",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
             new Text(
               "Sahdeep",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
           ],
         )
       ],
     ),
   ),
   Container(
     color: Colors.deepPurpleAccent,
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisSize: MainAxisSize.max,
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: <Widget>[
         Image.asset(
           'assets/1.png',
           fit: BoxFit.cover,
         ),
         Padding(padding: const EdgeInsets.all(20.0)),
         Column(
           children: <Widget>[
             new Text(
               "Take a",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
             new Text(
               "look at",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
             new Text(
               "Liquid Swipe",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
           ],
         )
       ],
     ),
   ),
   Container(
     color: Colors.greenAccent,
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisSize: MainAxisSize.max,
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: <Widget>[
         Image.asset(
           'assets/1.png',
           fit: BoxFit.cover,
         ),
         Padding(padding: const EdgeInsets.all(20.0)),
         Column(
           children: <Widget>[
             new Text(
               "Liked?",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
             new Text(
               "Fork!",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
             new Text(
               "Give Star!",
               style: TextStyle(
                   fontSize: 30,
                   fontFamily: "Billy",
                   fontWeight: FontWeight.w600),
             ),
           ],
         )
       ],
     ),
   ),
 ];
  • Second, just pass it to liquidswipe constructor.
 @override
 Widget build(BuildContext context) {
   return new MaterialApp(
     home: Builder(
         builder: (context) =>
             LiquidSwipe(
                 pages: pages
             )),
   );
 }
  • Remember pages can only be containers.
  • Check out the complete Example

Credits

Author & support

This project is created by Sahdeep Singh but with lots of support and help. See the Credits.

About

A flutter based liquid swipe

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 86.9%
  • Objective-C 5.9%
  • Java 4.8%
  • Ruby 2.4%