Very much designed animations cause a UI to feel more instinctive, add to the slick look and feel of a polished application, and improve the user experience. Flutter’s animation support makes it easy to actualize an assortment of animation types. Numerous widgets, especially Material widgets, accompany the standard movement effects characterized in their design spec, but at the same time, it’s possible to customize these effects.
In this blog, we will explore the SlimyCard Animated In Flutter. We will see how to implement slimy card animated using the slimy_card package in your flutter applications.
slimy_card | Flutter Package
SlimyCard provides a beautiful slime-like animation of a Card that separates into two different Cards, one at the top…pub.dev
Table Of Contents ::
SlimyCard:
SlimyCard provides a wonderful slime-like animation of a Card that separates into two various Cards, one at the top and another at the bottom. It is possible to place any custom widget in these two separate cards.
Demo Module :
This demo video shows how to create a slimy card in a flutter. It shows how the slimy card will work using the slimy_card package in your flutter applications. It shows an animation of a card that separates into two different cards open. It will be shown on your device.
Attributes:
There are some attributes of the slimy card are:
- > color: These attributes mean the user adds any color they want.
- > width: These attributes mean the width must be at least 100.
- > topCardHeight: These attributes mean the height of the Top Card must be at least 150.
- > bottomCardHeight: These attributes mean the height of the Bottom Card must be at least 100.
- > borderRadius: These attributes mean the border-radius must neither exceed 30 nor be negative.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
slimy_card: ^1.0.4
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
assets:
- assets/images/
Step 3: Import
import 'package:slimy_card/slimy_card.dart';
Step 4: Run flutter packages get in the root directory of your app.
Step 5: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called slimy_card_demo.dart inside the lib folder.
StreamBuilder(
initialData: false,
stream: slimyCard.stream,
builder: ((BuildContext context, AsyncSnapshot snapshot) {
return ListView(
padding: EdgeInsets.zero,
children: <Widget>[
SizedBox(height: 70),
SlimyCard(
color: Colors.indigo[300],
topCardWidget: topCardWidget((snapshot.data)
? 'assets/images/devs.jpg'
: 'assets/images/flutter.png'),
bottomCardWidget: bottomCardWidget(),
),
],
);
}),
),
In the body, we will add a StreamBuilder(). In StreamBuilder, we will add an initialData; SlimyCard supports the Streams(BLoC) to provide its real-time status. For that, wrap SlimyCard in a StreamBuilder, and in its `stream` property, assign `slimyCard.stream`. Its snapshot will contain the status. In SlimyCard, we will add color, topCardWidget, and bottomCardWidget. We will below describe the code.
Now, we will deeply describe topCardWidget() function:
In the topCardWidget, we will add a column widget. Inside the column, we will add a container widget. In the container, we will add a height, width, and decorationImage. We will also add two texts and wrap them to the center.
Widget topCardWidget(String imagePath) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 70,
width: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(image: AssetImage(imagePath)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 20,
spreadRadius: 1,
),
],
),
),
SizedBox(height: 15),
Text(
'Flutter',
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 15),
Center(
child: Text(
'Flutter is Google’s UI toolkit for building beautiful, natively compiled applications'
' for mobile, web, and desktop from a single codebase.',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12,
fontWeight: FontWeight.w500),
textAlign: TextAlign.center,
),
),
SizedBox(height: 10),
],
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will deeply describe bottomCardWidget() function:
In the bottomCardWidget, we will return the column. In the column, we will add two texts and wrap them to the center. When the user taps the drop-down button, the bottomCardWidget will be animated and shown on your devices.
Widget bottomCardWidget() {
return Column(
children: [
Text(
'https://flutterdevs.com/',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
SizedBox(height: 15),
Expanded(
child: Text(
'FlutterDevs specializes in creating cost-effective and efficient '
'applications with our perfectly crafted,creative and leading-edge '
'flutter app development solutions for customers all around the globe.',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
),
],
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:slimy_card/slimy_card.dart';
class SlimyCardDemo extends StatefulWidget {
@override
_SlimyCardDemoState createState() => _SlimyCardDemoState();
}
class _SlimyCardDemoState extends State<SlimyCardDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.brown[100],
appBar: AppBar(
backgroundColor: Colors.indigo[300],
automaticallyImplyLeading: false,
title: Text("SlimyCard Animated Demo"),
),
body: StreamBuilder(
initialData: false,
stream: slimyCard.stream,
builder: ((BuildContext context, AsyncSnapshot snapshot) {
return ListView(
padding: EdgeInsets.zero,
children: <Widget>[
SizedBox(height: 70),
SlimyCard(
color: Colors.indigo[300],
topCardWidget: topCardWidget((snapshot.data)
? 'assets/images/devs.jpg'
: 'assets/images/flutter.png'),
bottomCardWidget: bottomCardWidget(),
),
],
);
}),
),
);
}
Widget topCardWidget(String imagePath) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 70,
width: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(image: AssetImage(imagePath)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 20,
spreadRadius: 1,
),
],
),
),
SizedBox(height: 15),
Text(
'Flutter',
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 15),
Center(
child: Text(
'Flutter is Google’s UI toolkit for building beautiful, natively compiled applications'
' for mobile, web, and desktop from a single codebase.',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12,
fontWeight: FontWeight.w500),
textAlign: TextAlign.center,
),
),
SizedBox(height: 10),
],
);
}
Widget bottomCardWidget() {
return Column(
children: [
Text(
'https://flutterdevs.com/',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
SizedBox(height: 15),
Expanded(
child: Text(
'FlutterDevs specializes in creating cost-effective and efficient '
'applications with our perfectly crafted,creative and leading-edge '
'flutter app development solutions for customers all around the globe.',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
),
],
);
}
}
Conclusion:
In the article, I have explained the SlimyCard Animated basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to SlimyCard Animated On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the SlimyCard Animated in your flutter projects. We will show you what the SlimyCard is?. Some slimycard attributes, make a demo program for working SlimyCard and show a beautiful animation of a Card that separates into two different Cards, one at the top and then another at the bottom using the slimy_card package 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.
find the source code of the Flutter SlimyCard Animated Demo:
flutter-devs/flutter_slimycard_animated_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
