flutter_liquid_swipe

Description:

flutter liquid swipe

Flutter Liquid Swipe : A flutter package that lets you add liquid swipe onboarding to your app, this is a fork of luke pighetti's https://x.com/luke_pighetti implementation
Screenshots #



GIF
To install this package, you can follow these steps:
Installation #
To install the flutter_liquid_swipe package, you can follow these steps:


Open your terminal or command prompt.


Run the following command to install the package:
flutter pub add flutter_liquid_swipe
copied to clipboard


Once the package is installed, you can import it in your Flutter project:
import package:flutter_liquid_swipe/liquid_swipe.dart;
copied to clipboard


You're now ready to use the flutter_liquid_swipe package in your Flutter project.


Example #
import 'package:flutter/material.dart';
import 'package:flutter_liquid_swipe/liquid_swipe.dart';

void main() {
runApp(const LiquidSwipeApp());
}

class LiquidSwipeApp extends StatelessWidget {
const LiquidSwipeApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(home: LiquidSwipeOnboarding());
}
}

class LiquidSwipeOnboarding extends StatefulWidget {
const LiquidSwipeOnboarding({super.key});

@override
State<LiquidSwipeOnboarding> createState() => _LiquidSwipeOnboardingState();
}

class _LiquidSwipeOnboardingState extends State<LiquidSwipeOnboarding> {
final _key = GlobalKey<LiquidSwipeState>();

LiquidSwipeState? get liquidSwipeController => _key.currentState;

@override
Widget build(BuildContext context) {
return Scaffold(
body: LiquidSwipe(key: _key, children: [
LiquidSwipeCard(
onTapName: () {},
onSkip: () {},
name: "Transcribe",
action: "Skip",
title: "SpeakEasy",
subtitle: "Empowering Communication ",
body: "Revolutionize the way you interact with the world ",
buttonColor: Colors.black,
titleStyle: TextStyle(
fontSize: 20,
color: Colors.grey.shade700,
),
subtitleStyle: TextStyle(
fontSize: 23,
color: Colors.grey.shade900,
),
bodyStyle: TextStyle(
fontSize: 18,
color: Colors.green.shade400,
),
gradient: const LinearGradient(
colors: [Colors.white, Colors.white],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network("https://picsum.photos/300/200"))),
LiquidSwipeCard(
onTapName: () => liquidSwipeController?.previous(),
onSkip: () {},
name: "Back",
action: "Done",
title: "Cutting Edge Technology",
subtitle: "With an Effortless Experience",
body:
"Our innovative speech-to-text solution offers precise transcription",
buttonColor: Colors.white,
titleStyle: const TextStyle(
fontSize: 20,
color: Colors.black,
),
subtitleStyle: TextStyle(
fontSize: 23,
color: Colors.grey.shade400,
),
bodyStyle: TextStyle(
fontSize: 18,
color: Colors.white.withOpacity(0.8),
),
gradient: const LinearGradient(
colors: [Colors.grey, Colors.green],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network("https://picsum.photos/350/200"))),
]));
}
}

copied to clipboard