Flutter 动画转场欢迎屏 concentric_transition

头像
独立开发者_猫哥
    阅读 7 分钟
    English
    1

    原文

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

    代码

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

    参考

    正文

    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 应用，所以请尝试它。

    © 猫哥

    往期

    开源

    GetX Quick Start

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

    新闻客户端

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

    strapi 手册译文

    https://getstrapi.cn

    微信讨论群 ducafecat

    系列集合

    译文

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

    开源项目

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

    Dart 编程语言基础

    https://space.bilibili.com/40...

    Flutter 零基础入门

    https://space.bilibili.com/40...

    Flutter 实战从零开始 新闻客户端

    https://space.bilibili.com/40...

    Flutter 组件开发

    https://space.bilibili.com/40...

    Flutter Bloc

    https://space.bilibili.com/40...

    Flutter Getx4

    https://space.bilibili.com/40...

    Docker Yapi

    https://space.bilibili.com/40...

    flutter
    独立开发者_猫哥
    666 声望126 粉丝
    « 上一篇
    Flutter 定制时间简化组件 time_planner
    下一篇 »
    Flutter 可拖动的悬浮动作按钮

    引用和评论

    推荐阅读
    头像
    Flutter 应用本地存储与云存储的最佳选择

    独立开发者_猫哥阅读 72

    头像
    使用 Flutter 3.19 更高效地开发

    Flutter阅读 826

    头像
    2024年 5 个优秀的Flutter图标库

    独立开发者_猫哥阅读 563

    头像
    鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙

    zacks阅读 522

    头像
    跨平台高手必修课–Flutter动态化解决方案实战(完结)

    贪玩的饺子阅读 481评论 1

    头像
    横扫鸿蒙弹窗乱象，SmartDialog出世

    小呆呆666阅读 433

    头像
    Flutter CTO 报告 2024：跨平台开发的未来趋势

    独立开发者_猫哥阅读 399

    0 条评论
    得票最新