Explore Concentric Transition In Flutter
Flutter widget is built using a modern framework. It is like a react. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state.
Flutter automated testing empowers you to meet high responsiveness in your application as it helps in discovering bugs and various issues in your application. A Flutter is a tool for developing mobile, desktop, web applications with code & is a free and open-source tool.
In this article, we will explore the Explore Concentric Transition In Flutter using the flutter_concentric_transition_package. With the help of the package, we can easily achieve flutter concentric transition. So let’s get started.
Table Of Contents :
Concentric Transition :
Concentric Transitions plugin is a very good plugin in a flutter. Users can use this plugin to create an animation type of onboarding screen and create custom animation screens like concentric page routers, custom clippers, etc. like we use Concentric PageRoute Then provides us animation type of page route which sends us from one screen to another.
Features:
- Concentric PageView
- Concentric Clipper
- Concentric PageRoute
Implementation :
You need to implement it in your code respectively :
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
dependencies:
concentric_transition: ^1.0.1+1Step 2: import the package :
import 'package:concentric_transition/concentric_transition.dart';Step 3: Run flutter package get
Code Implementation :
You need to implement it in your code respectively:
Before defining ConcentricPageView we will create a class in which we will define its title, image, color, etc as given in the below code reference.
class OnboardingData {
final String? title;
final Image? icon;
final Color bgColor;
final Color textColor;
OnboardingData({
this.title,
this.icon,
this.bgColor = Colors.white,
this.textColor = Colors.black,
});
}After this, we will define the onboarding class data in a list that will display the data given to us on the screen. let’s understand it with its code reference below.
final List<OnboardingData> onBoardingData = [
OnboardingData(
icon:Image.asset('assets/images/melon.png'),
title: "Fresh Lemon\nfruits",
//textColor: Colors.white,
bgColor: Color(0xffCFFFCE),
),
OnboardingData(
icon:Image.asset('assets/images/orange.png'),
title: "Fresh Papaya\nfruits",
bgColor: Color(0xffFFE0E1),
),
OnboardingData(
icon:Image.asset('assets/images/papaya.png'),
title: "Fresh Papaya\nfruits",
bgColor: Color(0xffFCF1B5),
//textColor: Colors.white,
),
];We will now use the ConcentricPageView widget inside the body in which color and duration of the animation. Using the column widget, we will show the image inside a box and display its title below the image. let’s understand it with its code reference below.
ConcentricPageView(
colors: colors,
radius: 30,
curve: Curves.ease,
duration: Duration(seconds: 2),
itemBuilder: (index, value) {
OnboardingData page = onBoardingData[index % onBoardingData.length];
return Container(
child: Theme(
data: ThemeData(
textTheme: TextTheme(
headline6: TextStyle(
color: page.textColor,
fontWeight: FontWeight.w600,
fontFamily: 'Helvetica',
letterSpacing: 0.0,
fontSize: 17,
),
subtitle2: TextStyle(
color: page.textColor,
fontWeight: FontWeight.w300,
fontSize: 18,
),
),
),
child: OnBoardingPage(onboardingDataPage: page),
),
);
},
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File :
import 'dart:ui';
import 'package:concentric_transition/concentric_transition.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class ConcentricPageViewDemo extends StatelessWidget {
final List<OnboardingData> onBoardingData = [
OnboardingData(
icon:Image.asset('assets/images/melon.png'),
title: "Fresh Lemon\nfruits",
//textColor: Colors.white,
bgColor: Color(0xffCFFFCE),
),
OnboardingData(
icon:Image.asset('assets/images/orange.png'),
title: "Fresh Papaya\nfruits",
bgColor: Color(0xffFFE0E1),
),
OnboardingData(
icon:Image.asset('assets/images/papaya.png'),
title: "Fresh Papaya\nfruits",
bgColor: Color(0xffFCF1B5),
//textColor: Colors.white,
),
];
List<Color> get colors => onBoardingData.map((p) => p.bgColor).toList();
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: ConcentricPageView(
colors: colors,
radius: 30,
curve: Curves.ease,
duration: Duration(seconds: 2),
itemBuilder: (index, value) {
OnboardingData page = onBoardingData[index % onBoardingData.length];
return Container(
child: Theme(
data: ThemeData(
textTheme: TextTheme(
headline6: TextStyle(
color: page.textColor,
fontWeight: FontWeight.w600,
fontFamily: 'Helvetica',
letterSpacing: 0.0,
fontSize: 17,
),
subtitle2: TextStyle(
color: page.textColor,
fontWeight: FontWeight.w300,
fontSize: 18,
),
),
),
child: OnBoardingPage(onboardingDataPage: page),
),
);
},
),
),
);
}
}
class OnBoardingPage extends StatelessWidget {
final OnboardingData onboardingDataPage;
const OnBoardingPage({
Key? key,
required this.onboardingDataPage,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(
horizontal: 30.0,
),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildPicture(context),
SizedBox(height: 30),
_buildText(context),
],
),
);
}
Widget _buildText(BuildContext context) {
return Text(
onboardingDataPage.title!,
style: Theme.of(context).textTheme.headline6,
textAlign: TextAlign.center,
);
}
Widget _buildPicture(
BuildContext context, {
double size = 190,
double iconSize = 170,
}) {
return Container(
width: size,
height: size,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(60.0)),
color: onboardingDataPage.bgColor
// .withBlue(page.bgColor.blue - 40)
.withGreen(onboardingDataPage.bgColor.green + 20)
.withRed(onboardingDataPage.bgColor.red - 100)
.withAlpha(90),
),
padding:EdgeInsets.all(15),
margin: EdgeInsets.only(
top: 140,
),
child:onboardingDataPage.icon,
);
}
}
class OnboardingData {
final String? title;
final Image? icon;
final Color bgColor;
final Color textColor;
OnboardingData({
this.title,
this.icon,
this.bgColor = Colors.white,
this.textColor = Colors.black,
});
}Conclusion:
In this article, I have explained Explore Concentric Transition In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Explore Concentric Transition In Flutter demo from our side.
I hope this blog will provide you with sufficient information on Trying up the Explore Concentric Transition In Flutter in your flutter project. We showed you what the Explore Concentric Transition 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.
