Concentric Animation in Flutter App

October 9, 2021October 19, 2021 Dhrumil Shah 2 Comments concentric animation, flutter animation example, flutter animation library, flutter animation tutorial, flutter animations, flutter animations examples, flutter concentric animation

In this article, we are going to integrate concentric animation for onBoarding UI or Introduction Screens in flutter app. You can also check out flutter animations related articles.

To create concentric animation in mobile app for intro screens, we are using concentric_animation flutter package. We can also customize this animation using concentric page routers and clippers. In this flutter example, we are displaying football leagues with title, logo and description.

ConcentricPageView is used to display animation between two pages or screens on click of button. ConcentricPageView widget has many properties. We can specify color of individual onBoarding page using colors property. We can define number of pages to be animated using itemCount property. We can display our pages UI using itemBuilder property of ConcentricPageView widget.

Add required dependency in your pubspec.yaml file

concentric_transition: ^1.0.1

Add images for Onboarding UI Concentric Animation

First we need to places images in folder named ‘images’ in root folder of source code. Then we need to add their paths in pubspec.yaml file.

assets:
– images/premier_league.jpg
– images/laliga.png
– images/bundesliga.jpg
– images/serie_a.jpg
– images/ligue_one.png

Create Model Class to handle League Data

class MySoccerLeagueInfo{

String title, description, image;

MySoccerLeagueInfo(this.title, this.description, this.image);

}

Flutter Concentric Animation UI

import ‘package:concentric_transition/concentric_transition.dart’;
import ‘package:flutter/material.dart’;
import ‘package:flutterconcentricanimsample/my_soccer_league_info.dart’;

class MyConcentricTransitionScreen extends StatefulWidget {
@override
_MyConcentricTransitionScreenState createState() => _MyConcentricTransitionScreenState();
}

class _MyConcentricTransitionScreenState extends State<MyConcentricTransitionScreen> {

List<MySoccerLeagueInfo> listLeagues = [];

@override
Widget build(BuildContext context) {

listLeagues.add(MySoccerLeagueInfo(“Premier League”, “English Premier League or EPL”, “images/premier_league.jpg”));
listLeagues.add(MySoccerLeagueInfo(“La Liga”, “The Campeonato Nacional de Liga de Primera División”, “images/laliga.png”));
listLeagues.add(MySoccerLeagueInfo(“Bundesliga”, “Federal League”, “images/bundesliga.jpg”));
listLeagues.add(MySoccerLeagueInfo(“Serie A”, “Lega Nazionale Professionisti Serie A”, “images/serie_a.jpg”));
listLeagues.add(MySoccerLeagueInfo(“Ligue 1”, “Ligue 1 Conforama”, “images/ligue_one.png”));

return Scaffold(
body: ConcentricPageView(
colors: <Color>[Colors.orangeAccent, Colors.redAccent, Colors.lightGreenAccent, Colors.deepOrangeAccent, Colors.pinkAccent],
itemCount: 5,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (int position, double value) {
var leagueInfo = listLeagues[position];
return Container(
padding: EdgeInsets.all(25),
child: Column(
children: [
SizedBox(height: 50),
Text(leagueInfo.title, style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white),),
SizedBox(height: 25),
Image.asset(leagueInfo.image, width: 200, height: 200),
SizedBox(height: 25),
Text(leagueInfo.description, style: TextStyle(fontSize: 25, color: Colors.white))
],
),
);
},
)
);
}
}