[圖片上傳失敗...(image-a877c4-1652491399958)]
今天咏连，我們?cè)俅瓮扑] package。我們主要處理用戶界面和圖標(biāo)包箫章，所以... 讓我們?nèi)ズ陀淇斓拈喿x嗤堰！
原文
https://tomicriedel.medium.com/10-flutter-tips-part4-10-season-2-260e23214e3f
正文
swipe_to
https://pub.dev/packages/swipe_to
如果你想給任何小工具添加簡(jiǎn)單的滑動(dòng)手勢(shì)，滑動(dòng)到是一個(gè)很好的軟件包钱磅。這個(gè)軟件包的優(yōu)點(diǎn)是用戶不必點(diǎn)擊動(dòng)作，但是當(dāng)滑動(dòng)時(shí)動(dòng)作會(huì)立即執(zhí)行似枕。
這里有一個(gè)例子可以更好地理解它:
[圖片上傳失敗...(image-7ed3ea-1652491399959)]
但是... ... 我怎樣才能將這個(gè)令人難以置信的包集成到我的代碼中呢盖淡？
好吧，這很簡(jiǎn)單:
SwipeTo(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
child: text('???? Swipe me Left | YOU |Swipe me right ????'),
),
onLeftSwipe: () {.
print('Callback from Swipe To Left');
},
onRightSwipe: () {
print('Callback from Swipe To Right');
},
),
看凿歼，一點(diǎn)都不難褪迟，對(duì)吧冗恨？
rename
https://pub.dev/packages/rename
當(dāng)然，你希望你的應(yīng)用程序在發(fā)布之前有一個(gè)很酷的名字味赃。但是掀抹，讓我們面對(duì)現(xiàn)實(shí)吧，如果您為每個(gè)平臺(tái)手動(dòng)執(zhí)行這個(gè)過程心俗，那么這個(gè)過程可能會(huì)非常痛苦傲武。
這就是為什么存在著重命名。這個(gè)包允許你在幾秒鐘內(nèi)在任何平臺(tái)上重命名你的應(yīng)用程序城榛。以下是它的工作原理:
- 在命令行中執(zhí)行這個(gè)命令:
pub global activate rename
- 現(xiàn)在執(zhí)行這兩個(gè)命令:
pub global run rename --bundleId com.myDomain.myApp
pub global run rename --appname "MyApp"
這兩個(gè)命令的第一個(gè)設(shè)置你的應(yīng)用程序的 BundleId揪利。這是你的領(lǐng)域，只不過是倒過來的狠持。如果你沒有域名土童，把它設(shè)置成你的名字或者你公司的名字。但無論如何工坊，如果這個(gè)域名沒有被占用，那將是有利的敢订。
第二個(gè)命令正確地重命名應(yīng)用程序王污。你會(huì)在你的主屏幕上看到這個(gè)名字，在 iOS 和 Android 或者其他平臺(tái)上楚午。
你可以隨心所欲地更改名字昭齐。
還有更多的可能性，比如只為一個(gè)特定的平臺(tái)重命名一個(gè)應(yīng)用程序矾柜。
Hidable
https://pub.dev/packages/hidable
Hidable 可以讓你在用戶滾動(dòng)時(shí)隱藏任何窗口小部件阱驾。這對(duì)于很多事情都是非常有用的，所以現(xiàn)在我們來看看如何實(shí)現(xiàn)這個(gè)包:
- 首先怪蔑，創(chuàng)建一個(gè) ScrollController里覆。
final ScrollController scrollController = ScrollController();
2。現(xiàn)在將 scrollController 作為控制器添加到可滾動(dòng)的小部件中缆瓣。下面是一個(gè) ListView 的例子:
ListView.separated(
// General scroll controller which makes bridge between// This ListView and Hidable widget.
controller: scrollController,
itemCount: colors.length,
itemBuilder: (_, i) => container(
height: 50,
color: colors[i].withOpacity(.6),
),
separatorBuilder: (_, __) =>const SizedBox(height: 10),
),
3喧枷。第三步，也是最后一步弓坞，用 Hidable widget 包裝任何組件隧甚。在小部件中，指定 scrollController 作為控制器渡冻∑莅猓可租用小部件還有一些其他屬性。我們現(xiàn)在使用 AppBar 來完成這個(gè)過程族吻。
Hidable(
controller: scrollController,
wOpacity:true,// As default it's true.
size: 56,// As default it's 56.
child: BottomNavigationBar(...),
),
就是這樣∶苯瑁現(xiàn)在你已經(jīng)成功地實(shí)現(xiàn)了可租用小工具珠增！
Flutter Sticky Header
有時(shí)候你在應(yīng)用程序中滾動(dòng)，然后突然間類別卡在屏幕頂部宜雀，這意味著你總是知道你在哪里切平。你有沒有想過在 Flutter 是怎么工作的？不是嗎辐董？好吧悴品，那么無論如何還是閱讀這一部分，因?yàn)樗浅Ｓ腥?/p>
如果你還在讀简烘，我會(huì)給你詳細(xì)展示我的意思:
[圖片上傳失敗...(image-7377af-1652491399959)]
我想我們現(xiàn)在都知道我的意思了苔严。
但是我如何在 Flutter 中實(shí)現(xiàn)這個(gè)呢？嗯孤澎，非常簡(jiǎn)單: 帶有 flutter/sticky/header 包届氢。這個(gè)軟件包可以很容易地為你的應(yīng)用程序添加這樣一個(gè)偉大的功能。讓我來告訴你如何在代碼中實(shí)現(xiàn)它:
SliverStickyHeader(
header: Container(
height: 60.0,
color: Colors.lightBlue,
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Header #0',
style:const TextStyle(color: Colors.white),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) => ListTile(
leading: CircleAvatar(
child: Text('0'),
),
title: Text('List tile #$i'),
),
childCount: 4,
),
),
);
但是還有其他方法可以實(shí)現(xiàn)類似的東西覆旭，比如使用 sliversticheader.builder退子。
Preload Page View
每個(gè)人都知道 PageViews。它們非常方便型将，甚至可以在 TikTok 上找到(如果它是用 Flutter 建造的)寂祥。但是如果你在 PageView 上有來自服務(wù)器的內(nèi)容呢。當(dāng)用戶進(jìn)入一個(gè)頁(yè)面后七兜，加載的內(nèi)容卻要花費(fèi)很長(zhǎng)的時(shí)間丸凭，這是不好的。這個(gè)問題通過預(yù)加載 _ 頁(yè)面視圖來解決腕铸。正如它的名字所說惜犀，你可以使用這個(gè)包來預(yù)加載任意數(shù)量的頁(yè)面，這樣你就不會(huì)有永恒的加載屏幕狠裹。這個(gè)小部件的實(shí)現(xiàn)非常簡(jiǎn)單虽界，工作原理幾乎和一般的 PageView 小部件一樣:
@override
Widget build(BuildContext context) {
return new PreloadPageView.builder(
itemCount: ..,
itemBuilder: ..,
onPageChanged: { (int position) { ...},
.....
preloadPagesCount: 3,
controller: PreloadPageController(),
);
}
其實(shí)也沒那么難。
Phosphor Icons
正如開頭提到的涛菠，我們當(dāng)然想談?wù)剤D標(biāo)庫(kù)浓恳。相信我，這個(gè)圖標(biāo)圖書館真是太棒了碗暗。在我看來颈将，這些是迄今為止我見過的最好的圖標(biāo)。最棒的是言疗， phosphoricons.com 上有 5364 個(gè)圖標(biāo)晴圾，有各種各樣的變化。
當(dāng)然噪奄，這只是網(wǎng)站的一個(gè)截圖死姚。
[圖片上傳失敗...(image-b8acf1-1652491399959)]
https://pub.dev/packages/phosphor_flutter
但是... 這整件事和 Flutter 現(xiàn)在有什么關(guān)系人乓？有一個(gè)官方支持的 Flutter 軟件包，它包含了所有磷圖標(biāo)都毒。
在 Flutter 中實(shí)現(xiàn)圖標(biāo)非常簡(jiǎn)單:
Icon(
PhosphorIcons.pencil,// Pencil Icon
),
就是這樣色罚，現(xiàn)在你的應(yīng)用程序中有了一個(gè)漂亮的鉛筆圖標(biāo)。
[圖片上傳失敗...(image-cdfa02-1652491399959)]
Sliding Clipped Nav Bar
https://pub.dev/packages/sliding_clipped_nav_bar
到目前為止账劲，它幾乎是一個(gè)儀式戳护，我提出了我的 10 個(gè) Flutter 技巧文章導(dǎo)航 Pub 包。今天這篇文章提到了滑動(dòng)滑塊導(dǎo)航欄瀑焦。這個(gè)軟件包為你提供了一個(gè)讓你的應(yīng)用程序?qū)τ脩魜碚f更有趣的好方法腌且。由于其令人難以置信的簡(jiǎn)單的執(zhí)行和美麗的設(shè)計(jì)，它是最好的導(dǎo)航 Pub 包之一榛瓮。
但是... ... 說夠了铺董，導(dǎo)航欄和這個(gè)包裝看起來怎么樣？
[圖片上傳失敗...(image-99560b-1652491399959)]
我想你很清楚我為什么這么喜歡這個(gè)包裹禀晓。有這么多的定制可能性和實(shí)現(xiàn)非常簡(jiǎn)單:
return Scaffold(
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: controller,
...
),
bottomNavigationBar: SlidingClippedNavBar(
backgroundColor: Colors.white,
onButtonPressed: (index) {
setState(() {
selectedIndex = index;
});
controller.animateToPage(selectedIndex,
duration:const Duration(milliseconds: 400),
curve: Curves.easeOutQuad);
},
iconSize: 30,
activeColor: Color(0xFF01579B),
selectedIndex: selectedIndex,
barItems: [
BarItem(
icon: Icons.event,
title: 'Events',
),
BarItem(
icon: Icons.search_rounded,
title: 'Search',
),
/// Add more BarItem if you want
],
),
);
是的精续，就是這樣。你不需要做其他的事情粹懒。這個(gè)軟件包的 README 文件非常詳細(xì)重付，使您可以非常容易地開始進(jìn)入軟件包。
Battery plus
https://pub.dev/packages/battery_plus
Battery_plus 是一個(gè)由 Flutter 社區(qū)支持的軟件包崎淳，它可以提供關(guān)于電池狀態(tài)的各種信息。它非常容易使用愕把，并且可以用于許多應(yīng)用程序:
// Import package
import 'package:battery_plus/battery_plus.dart';
// Instantiate it
var battery = Battery();
// Access current battery level
print(await battery.batteryLevel);
// Be informed when the state (full, charging, discharging) changes
battery.onBatteryStateChanged.listen((BatteryState state) {
// Do something with new state
});
Freezed
http://pub.dev/packages/freezed
也許你已經(jīng)聽說過這個(gè)包被凍結(jié)了拣凹，但是如果沒有，我現(xiàn)在就向你解釋(因?yàn)樗浅Ｓ杏?恨豁。
現(xiàn)在我們假設(shè)您已經(jīng)在 Flutter 中創(chuàng)建了一個(gè)數(shù)據(jù)類嚣镜。正如您可能已經(jīng)注意到的，這里有大量的鍋爐代碼橘蜜，查看這些代碼令人不快菊匿。這就是為什么冰凍被創(chuàng)造出來。使用這個(gè)包计福，您可以創(chuàng)建具有多種可能性的數(shù)據(jù)類跌捆，只需要很少的樣板代碼。
我不會(huì)在這里向您展示如何實(shí)現(xiàn) Freezed象颖，但是 README 文件非常棒佩厚。
end.
祝你今天愉快！
? 貓哥
微信 ducafecat
