Flutter animation transition welcome screen concentric_transition

original

https://medium.com/flutterdevs/explore-concentric-transition-in-flutter-82ef4194d3d9

Code

https://github.com/tiamo/flutter-concentric-transition/tree/master/example

refer to

https://pub.flutter-io.cn/packages/concentric_transition

text

Flutter widgets are built using modern frameworks. This is like a reaction. Here, we start with widgets to create any application. Each component on the screen is a small part. This widget describes what his prospects should look like based on his current configuration and status. The widget display is similar to its idea and current settings and status.

Flutter automated testing enables you to meet the high responsiveness of your application because it helps to find bugs and various problems in your application. Flutter is a tool for developing mobile, desktop, web applications and codes & is a free and open source tool.

In this article, we will use Flutter concentric_transition to explore Concentric Transition in Flutter. Using this software package, you can easily implement the Flutter startup animation interface. So let's get started.

https://pub.dev/packages/concentric_transition

Concentric Transition

The Concentric Transition plugin is a very good Flutter plugin. Users can use this plug-in to create an animated entry screen, and create custom animated screens, like the heart page router, custom scissors, etc., just like we use the concentric page, and then provide us with the animation type page route. We go from one screen to another.

Feature

Concentric PageView page
Concentric Clipper
Concentric PageRoute Transition Route

Dependent package

You need to implement it in your code separately:

Step 1: add dependencies

Add dependencies to the pubspec ーyaml file.

dependencies:
  concentric_transition: ^1.0.1+1

Step 2: Import the package

import 'package:concentric_transition/concentric_transition.dart';

Step 3: Run Run flutter package get

Add code

You need to implement it in your code separately:

Before defining ConcentricPageView, we will create a class, in this class, we will define its title, image, color, etc., as shown in the code reference below.

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 entry data in a list, which will show us the data on the screen. Let us use the following code to understand.

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,
  ),
];

Now, we will use the ConcentricPageView widget in the body where the color and duration of the animation are. Using the column widget, we will display the image in a box and display its title below the image. Let us use the following code to understand.

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 should get the output of the screen, just like the screenshot below.

Complete code

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 explained the exploration of Concentric Transition Flutter, you can modify and experiment according to your own, this small introduction is from the exploration of Concentric Transition Flutter from our side.

I hope this blog will provide you with sufficient information about trying to explore Concentric Transition in your Flutter project. We showed you what to explore Concentric Transition in Flutter is and work in your Flutter app, so please try it.