原文
https://medium.com/flutterdevs/explore-concentric-transition-in-flutter-82ef4194d3d9
代碼
https://github.com/tiamo/flutter-concentric-transition/tree/master/example
參考
正文
Flutter 小部件是使用現(xiàn)代框架構(gòu)建的。這就像是一種反應(yīng)。在這里，我們從小部件開始創(chuàng)建任何應(yīng)用程序两芳。屏幕中的每個(gè)組件都是一個(gè)小部件。這個(gè)小部件描述了根據(jù)他目前的配置和狀態(tài)掂僵，他的前景應(yīng)該是什么樣的反惕。小部件展示類似于它的想法和當(dāng)前的設(shè)置和狀態(tài)昌渤。
Flutter 自動(dòng)化測(cè)試使您能夠滿足您的應(yīng)用程序的高響應(yīng)性齐邦，因?yàn)樗兄谠谀膽?yīng)用程序中發(fā)現(xiàn) bug 和各種問題椎侠。Flutter 是一個(gè)工具，開發(fā)移動(dòng)措拇，桌面我纪，網(wǎng)絡(luò)應(yīng)用程序與代碼 & 是一個(gè)免費(fèi)和開放源碼的工具。
在本文中丐吓，我們將用 Flutter concentric_transition 探索 Concentric Transition 在 Flutter浅悉。利用該軟件包，可以很容易地實(shí)現(xiàn) Flutter 啟動(dòng)動(dòng)畫界面 券犁。那么讓我們開始吧术健。
https://pub.dev/packages/concentric_transition
Concentric Transition
Concentric Transition 插件是一個(gè)非常好的 Flutter 插件。用戶可以使用這個(gè)插件創(chuàng)建一個(gè)動(dòng)畫類型的入門屏幕粘衬，并創(chuàng)建自定義動(dòng)畫屏幕荞估，如同心頁面路由器，自定義剪刀色难，等等泼舱，就像我們使用同心頁面，然后為我們提供動(dòng)畫類型的頁面路線枷莉，將我們從一個(gè)屏幕到另一個(gè)屏幕。
特點(diǎn)
- Concentric PageView 頁面
- Concentric Clipper 剪切圖
- Concentric PageRoute 轉(zhuǎn)場(chǎng)路由
依賴包
你需要分別在你的代碼中實(shí)現(xiàn)它:
- 第一步: 添加依賴項(xiàng)
將依賴項(xiàng)添加到 pubspec ー yaml 文件尺迂。
dependencies:
concentric_transition: ^1.0.1+1
- 第二步: 導(dǎo)入包
import 'package:concentric_transition/concentric_transition.dart';
- 第三步: 運(yùn)行 Run flutter package get
加入代碼
你需要分別在你的代碼中實(shí)現(xiàn)它:
在定義 ConcentricPageView 之前笤妙，我們將創(chuàng)建一個(gè)類，在這個(gè)類中噪裕，我們將定義其標(biāo)題蹲盘、圖像、顏色等膳音，如下面的代碼引用所示召衔。
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,
});
}
在此之后，我們將在一個(gè)列表中定義入職類數(shù)據(jù)祭陷，該列表將在屏幕上顯示給我們的數(shù)據(jù)苍凛。讓我們用下面的代碼來理解一下趣席。
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,
),
];
現(xiàn)在，我們將在動(dòng)畫的顏色和持續(xù)時(shí)間所在的主體中使用 ConcentricPageView 小部件醇蝴。使用列小部件宣肚，我們將在一個(gè)框中顯示圖像，并在圖像下方顯示其標(biāo)題悠栓。讓我們用下面的代碼來理解一下霉涨。
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),
),
);
},
),
當(dāng)我們運(yùn)行應(yīng)用程序時(shí)，我們應(yīng)該得到屏幕的輸出惭适，就像下面的屏幕截圖一樣笙瑟。
完整代碼
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癞志，你可以根據(jù)自己的修改和實(shí)驗(yàn)往枷，這個(gè)小介紹是從探索 Concentric Transition Flutter 從我們這邊演示。
我希望這個(gè)博客將提供您嘗試在您的 Flutter 項(xiàng)目探索 Concentric Transition 充分的信息今阳。我們向您展示了什么探索 Concentric Transition 在 Flutter 是和工作在您的 Flutter 應(yīng)用师溅，所以請(qǐng)嘗試它。
? 貓哥
微信群 ducafecat
往期
開源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新聞客戶端
https://github.com/ducafecat/flutter_learn_news
strapi 手冊(cè)譯文
微信討論群 ducafecat
系列集合
譯文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
開源項(xiàng)目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 編程語言基礎(chǔ)
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基礎(chǔ)入門
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 實(shí)戰(zhàn)從零開始 新聞客戶端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 組件開發(fā)
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578
