Flutterexperts

Flutter makes beautiful animations very simple and attractive likewise the truth is that we developers are afraid to push ourselves to the next level by including all those little animations that make our app stand out rather than beautiful. When we tune a component in a material design, it becomes very easy to be buddy with the ripples animation.

In this blog, we will explore Explore Ripple Into Page In Flutter. We will also implement a demo of the Explore Ripple Into Page In Flutter and how to use them in your flutter applications. So let’s get started.

---

Table of Contents :

Flutter

Explore Ripple Into Page In Flutter

Implementation

Code Implementation

Code File

Conclusion

---

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”.

Ripple Into Page :

Flutter makes beautiful animations easy. That’s the fact. We as developers are also scared to push our apps to the next level by adding those minor animations that make the app beautiful instead of just pretty. Let’s change it together! In this post, I’d like to show you how we can add a ripple effect that may make your client say “I like that!”.

Implementation :

Let us now see how we add all these packages to our pubspec.

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :dependencies:
ripple_navigation: ^1.0.5

Step 1: Install :

You can install packages from the command line:

flutter pub get

Step 2: Importing :

import 'package:ripple_navigation/ripple_navigation.dart';

Step 3: Enable AndriodX :

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

Code Implementation :

You need to implement it in your code respectively:

Before exploring the ripple page, we will create a controller inside the Globalkey, which we will define inside an animateRipple() method, whose controller type we can change according to us, as an example, the code is referenced below.

GlobalKey<RippleLocationState> rippleController = GlobalKey();

void animateRipple(){
rippleController.currentState!.forwardRipple();
}

Now to navigate to the next page with wave transition we have created an onPressed() method in which we use the pushRippleTransitionPage() method from the controller() inside which we have defined the second page which will send us from the first page to the second page.

For Example:

void onPressed() {
rippleController.currentState!.pushRippleTransitionPage(
context,
SecondScreen(),
);
}

After this we will define the center property inside a stateful widget, inside it, we will define the RippleLocation widget in which we will create a button, inside its onPressed() method, we will call the onPressedButton() method which will send us to the next page and we will in the RippleLocation() We also defined its property rippleController so that our ripple animate will display.

RippleLocation(
rippleController: rippleController,
child: RaisedButton(
padding: const EdgeInsets.all(12),
textColor: Colors.white,
color: Colors.green,
onPressed: () {
onPressedButton();
},
child: Text('Click Button'),
),
),

As we move from the first screen to the second screen we see ripple animation is displayed on the screen and send to the second screen on the second screen I have displayed an image and as soon as we click on the arrow of appBar then it sends us back to the first screen as I have given below code reference.

Center(
child: Padding(
padding: EdgeInsets.all(15),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(
'assets/images/furniture.png',
height: 200,
fit: BoxFit.cover,
width: 1000,
),
),
),
),

Code File :

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

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: RippleFirstScreen(),
);
}
}

class RippleFirstScreen extends StatefulWidget {
@override
_RippleFirstScreenState createState() => _RippleFirstScreenState();
}

class _RippleFirstScreenState extends State<RippleFirstScreen> {
GlobalKey<RippleLocationState> rippleController = GlobalKey();

void animateRipple() {
rippleController.currentState!.forwardRipple();
}

void onPressed() {
rippleController.currentState!.pushRippleTransitionPage(
context,
SecondScreen(),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Ripple Demo'),
),
body: Center(
child: RippleLocation(
rippleController: rippleController,
child: RaisedButton(
// disabledColor: Colors.red,
// disabledTextColor: Colors.black,
padding: const EdgeInsets.all(12),
textColor: Colors.white,
color: Colors.green,
onPressed: () {
onPressed();
},
child: Text('Click Button'),
),
),
),
/*floatingActionButton: RippleLocation(
rippleController: rippleController,
child: FloatingActionButton(
onPressed: onPressed,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),*/
);
}
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
backgroundColor: Colors.lightBlue,
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(
'assets/images/furniture.png',
height: 200,
fit: BoxFit.cover,
width: 1000,
),
),
),
),
);
}
}

Conclusion :

In this article, I have explained Explore Ripple Into Page In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Explore Ripple Into Page In Flutter demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Explore Ripple Into Page In Flutter in your flutter project. We showed you what the Explore Ripple Into Page In Flutter is and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.