老孟導讀：這是我前段時候發現的一篇文章，動畫效果相當酷炫。
原文地址：https://medium.com/flutterdevs/slimycard-animated-in-flutter-700f92b8f382
設計非常出色的動畫會使UI感覺更直覺，應用程序具有光滑的外觀和感覺，改善用戶體驗。Flutter的動畫支持使實現各種動畫類型變得容易。許多小部件，特別是“Material”小部件，都伴隨着其設計規範中所描述的標準運動效果，但是與此同時，也可以自定義這些效果。
在這個博客，我們將探討 SlimyCard動畫。我們將看到如何在flutter應用程序中實現使用slimy_card包製作動畫的粘紙卡。
pub 地址：https://pub.dev/packages/slimy_card
SlimyCard：
SlimyCard提供了一張類似於卡的粘液狀動畫，可分爲兩張不同的卡，一張在頂部，另一張在底部。可以將任何自定義窗口小部件放置在這兩個單獨的卡中。
屬性
slimy_card 包的一些屬性：
-
**顏色：**這些屬性表示用戶添加他們想要的任何顏色。 -
**width：**這些屬性表示寬度必須至少爲100。 -
**topCardHeight：**這些屬性表示“頂部卡”的高度必須至少爲150。 -
**bottomCardHeight：**這些屬性意味着Bottom Card的高度必須至少爲100。 -
**borderRadius：**這些屬性表示border-radius不能超過30，也不能爲負。
使用
步驟1：添加依賴項
slimy_card：^ 1.0.4
步驟2：導入
import 'package:slimy_card/slimy_card.dart';
**步驟3：**運行 flutter packages get 。
**步驟4：**啓用 AndriodX，gradle.properties 配置如下：
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
Demo:
StreamBuilder(
initialData: false,
stream: slimyCard.stream,
builder: ((BuildContext context, AsyncSnapshot snapshot) {
return ListView(
padding: EdgeInsets.zero,
children: <Widget>[
SizedBox(height: 70),
SlimyCard(
color: Colors.indigo[300],
topCardWidget: topCardWidget((snapshot.data)
? 'assets/images/devs.jpg'
: 'assets/images/flutter.png'),
bottomCardWidget: bottomCardWidget(),
),
],
);
}),
),
在Demo中，添加一個StreamBuilder（）。在StreamBuilder中，添加一個initialData；SlimyCard支持Streams（BLoC）提供其實時狀態。爲此，將SlimyCard 包在StreamBuilder中。在SlimyCard中，我們將添加顏色，topCardWidget和bottomCardWidget。我們將在下面描述代碼。
在topCardWidget中，我們將添加一個列小部件。在該列內，我們將添加一個容器小部件。在容器中，我們將添加高度，寬度和裝飾圖像。我們還將添加兩個文本並將它們包裝到中心。
Widget topCardWidget(String imagePath) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 70,
width: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(image: AssetImage(imagePath)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 20,
spreadRadius: 1,
),
],
),
),
SizedBox(height: 15),
Text(
'Flutter',
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 15),
Center(
child: Text(
'Flutter is Google’s UI toolkit for building beautiful, natively compiled applications'
' for mobile, web, and desktop from a single codebase.',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12,
fontWeight: FontWeight.w500),
textAlign: TextAlign.center,
),
),
SizedBox(height: 10),
],
);
}
在bottomCardWidget中，我們將返回 column。在 column 中，我們將添加兩個文本並將它們包裝在中間。當用戶點擊下拉按鈕時，bottomCardWidget將被激活並顯示在您的設備上。
Widget bottomCardWidget() {
return Column(
children: [
Text(
'https://flutterdevs.com/',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
SizedBox(height: 15),
Expanded(
child: Text(
'FlutterDevs specializes in creating cost-effective and efficient '
'applications with our perfectly crafted,creative and leading-edge '
'flutter app development solutions for customers all around the globe.',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
),
],
);
}
完整Demo：
import 'package:flutter/material.dart';
import 'package:slimy_card/slimy_card.dart';
class SlimyCardDemo extends StatefulWidget {
@override
_SlimyCardDemoState createState() => _SlimyCardDemoState();
}
class _SlimyCardDemoState extends State<SlimyCardDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.brown[100],
appBar: AppBar(
backgroundColor: Colors.indigo[300],
automaticallyImplyLeading: false,
title: Text("SlimyCard Animated Demo"),
),
body: StreamBuilder(
initialData: false,
stream: slimyCard.stream,
builder: ((BuildContext context, AsyncSnapshot snapshot) {
return ListView(
padding: EdgeInsets.zero,
children: <Widget>[
SizedBox(height: 70),
SlimyCard(
color: Colors.indigo[300],
topCardWidget: topCardWidget((snapshot.data)
? 'assets/images/devs.jpg'
: 'assets/images/flutter.png'),
bottomCardWidget: bottomCardWidget(),
),
],
);
}),
),
);
}
Widget topCardWidget(String imagePath) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 70,
width: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
image: DecorationImage(image: AssetImage(imagePath)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 20,
spreadRadius: 1,
),
],
),
),
SizedBox(height: 15),
Text(
'Flutter',
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(height: 15),
Center(
child: Text(
'Flutter is Google’s UI toolkit for building beautiful, natively compiled applications'
' for mobile, web, and desktop from a single codebase.',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12,
fontWeight: FontWeight.w500),
textAlign: TextAlign.center,
),
),
SizedBox(height: 10),
],
);
}
Widget bottomCardWidget() {
return Column(
children: [
Text(
'https://flutterdevs.com/',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
SizedBox(height: 15),
Expanded(
child: Text(
'FlutterDevs specializes in creating cost-effective and efficient '
'applications with our perfectly crafted,creative and leading-edge '
'flutter app development solutions for customers all around the globe.',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
),
],
);
}
}
總結
在這篇文章中，我用Flutter的方式解釋了SlimyCard Animated的基本結構。您可以根據自己的選擇修改此代碼。這是 我對SlimyCard Animated進行的簡短介紹。
本文分享自微信公衆號 - 老孟Flutter（lao_meng_qd）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。