关于flutter:Flutter-动画转场欢迎屏-concentrictransition

原文

https://medium.com/flutterdev...

代码

https://github.com/tiamo/flut...

参考

https://pub.flutter-io.cn/pac...

注释

Flutter 小部件是应用古代框架构建的。这就像是一种反馈。在这里，咱们从小部件开始创立任何应用程序。屏幕中的每个组件都是一个小部件。这个小部件形容了依据他目前的配置和状态，他的前景应该是什么样的。小部件展现相似于它的想法和以后的设置和状态。

Flutter 自动化测试使您可能满足您的应用程序的高响应性，因为它有助于在您的应用程序中发现 bug 和各种问题。Flutter 是一个工具，开发挪动，桌面，网络应用程序与代码 & 是一个收费和开放源码的工具。

在本文中，咱们将用 Flutter concentric_transition 摸索 Concentric Transition 在 Flutter。利用该软件包，能够很容易地实现 Flutter 启动动画界面。那么让咱们开始吧。

https://pub.dev/packages/conc...

Concentric Transition

Concentric Transition 插件是一个十分好的 Flutter 插件。用户能够应用这个插件创立一个动画类型的入门屏幕，并创立自定义动画屏幕，如同心页面路由器，自定义剪刀，等等，就像咱们应用同心页面，而后为咱们提供动画类型的页面路线，将咱们从一个屏幕到另一个屏幕。

特点

Concentric PageView 页面
Concentric Clipper 剪切图
Concentric PageRoute 转场路由

依赖包

你须要别离在你的代码中实现它:

第一步: 增加依赖项

将依赖项增加到 pubspec ー yaml 文件。

dependencies:  concentric_transition: ^1.0.1+1

第二步: 导入包

import 'package:concentric_transition/concentric_transition.dart';

第三步: 运行 Run flutter package get

退出代码

你须要别离在你的代码中实现它:

在定义 ConcentricPageView 之前，咱们将创立一个类，在这个类中，咱们将定义其题目、图像、色彩等，如上面的代码援用所示。

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

在此之后，咱们将在一个列表中定义入职类数据，该列表将在屏幕上显示给咱们的数据。让咱们用上面的代码来了解一下。

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

当初，咱们将在动画的色彩和持续时间所在的主体中应用 ConcentricPageView 小部件。应用列小部件，咱们将在一个框中显示图像，并在图像下方显示其题目。让咱们用上面的代码来了解一下。

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

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

残缺代码

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

在这篇文章中，我解释了摸索 Concentric Transition Flutter，你能够依据本人的批改和试验，这个小介绍是从摸索 Concentric Transition Flutter 从咱们这边演示。

我心愿这个博客将提供您尝试在您的 Flutter 我的项目摸索 Concentric Transition 充沛的信息。咱们向您展现了什么摸索 Concentric Transition 在 Flutter 是和工作在您的 Flutter 利用，所以请尝试它。

https://ducafecat.tech/
https://github.com/ducafecat
微信群 ducafecat
b 站 https://space.bilibili.com/40...

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego...