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

36次阅读

共计 5699 个字符，预计需要花费 15 分钟才能阅读完成。

原文

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…

开源我的项目

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
发表至： flutter
2021-08-10
 0
关于flutter:在flutter中增加黑夜模式以及换肤功能
关于flutter:Flutter实现电影院选座效果
关于flutter:flutter-rn-uniapp-对比
Flutter实战自定义滚动条