【Flutter】2020热门Package推荐

柔光的暖阳◎ 2023-07-21 16:24 16阅读 0赞

Flutter的生态越发强大， 通过丰富多彩的三方package你可以更好地学习并作出效果惊艳的APP。

这里精选了四类`pub.dev`上的热门项目，推荐给大家，这四类分别是：

*  向导页 ：用于APP首次启动的向导画面
 *  实用控件：常用的控件类型，效果炫酷
 *  底部导航：底部导航栏相关控件
 *  周边工具：提供一些非UI的必要功能和效率工具

# 向导页 #

--------------------

## 1.tutorial\_coach\_mark ##

[https://pub.dev/packages/tutorial\_coach\_mark][https_pub.dev_packages_tutorial_coach_mark]  
当APP的某页面首次露出时的前导页，可以自定义Guide的遮罩颜色以及说明内容

![20200405113117304.gif][] ![20200405113313551.gif][]

## 2. flutter\_sliding\_tutorial ##

[https://pub.dev/packages/flutter\_sliding\_tutorial][https_pub.dev_packages_flutter_sliding_tutorial]  
首次进入APP时前置引导页  
![20200405115350877.gif][]

## 3.flutter\_overboard ##

[https://pub.dev/packages/flutter\_overboard][https_pub.dev_packages_flutter_overboard]  
同样用于APP首次进入的前导页  
![20200405115438994.gif][]

# 实用控件 #

--------------------

## 1.awesome\_dialog ##

[https://pub.dev/packages/awesome\_dialog][https_pub.dev_packages_awesome_dialog]  
效果炫酷的Dialog，"!"区域还可以替换为任意图片，定制性高  
![20200405124646391.gif][]

## 2.sweetalert ##

[https://pub.dev/packages/sweetalert][https_pub.dev_packages_sweetalert]  
另一种风格的Dialog  
![20200405124732818.gif][]

## 3.percent\_indicator ##

[https://pub.dev/packages/percent\_indicator][https_pub.dev_packages_percent_indicator]  
显示圆形或条形的进度条

![20200405124819795.png][] ![20200405125035626.png][]

## 4.fl\_chart ##

[https://pub.dev/packages/fl\_chart][https_pub.dev_packages_fl_chart]  
各种超炫的图表

<table> 
 <thead> 
  <tr> 
   <th>LineChart</th> 
   <th>BarChart</th> 
   <th>PieChart</th> 
   <th>ScatterChart</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <img src="https://img-blog.csdnimg.cn/2020040513005030.gif" alt=""> <img src="https://img-blog.csdnimg.cn/20200405130137509.gif" alt=""> </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20200405130106869.gif" alt=""> <img src="https://img-blog.csdnimg.cn/20200405130207512.gif" alt=""> </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20200405130319333.gif" alt=""> <img src="https://img-blog.csdnimg.cn/20200405130329982.gif" alt=""> </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20200405130346587.gif" alt=""> <img src="https://img-blog.csdnimg.cn/20200405130359174.gif" alt=""> </td> 
  </tr> 
 </tbody> 
</table>

## 5.flutter\_clean\_calendar ##

[https://pub.dev/packages/flutter\_clean\_calendar][https_pub.dev_packages_flutter_clean_calendar]  
日历控件

![20200405125240787.png][] ![20200405125313968.gif][]

## 6.infinite\_cards ##

[https://pub.dev/packages/infinite\_cards][https_pub.dev_packages_infinite_cards]  
卡片控件，有点像Android5.0时期的程序选择器

<table> 
 <thead> 
  <tr> 
   <th>Android</th> 
   <th>iOS</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><img src="https://img-blog.csdnimg.cn/20200405125355498.gif"> </td> 
   <td><img src="https://img-blog.csdnimg.cn/20200405125440982.gif" alt=""></td> 
  </tr> 
 </tbody> 
</table>

# 底部导航 #

--------------------

## 1. bubble\_bottom\_bar ##

[https://pub.dev/packages/bubble\_bottom\_bar][https_pub.dev_packages_bubble_bottom_bar]

![20200405125519319.gif][]

## 2.bcurved\_navigation\_bar ##

[https://pub.dev/packages/curved\_navigation\_bar][https_pub.dev_packages_curved_navigation_bar]  
![20200405125555594.gif][]

## 3.bff\_navigation\_bar ##

[https://pub.dev/packages/ff\_navigation\_bar][https_pub.dev_packages_ff_navigation_bar]

![20200405125634614.gif][]

## 4.fancy\_bottom\_navigation ##

[https://pub.dev/packages/fancy\_bottom\_navigation][https_pub.dev_packages_fancy_bottom_navigation]

![20200405125705979.gif][]

# 周边工具 #

--------------------

## 1. fflutter\_icons ##

[https://pub.dev/packages/flutter\_icons][https_pub.dev_packages_flutter_icons]  
在Flutter中使用可定制的图标，该插件包是受到 `react-native-vector-icons`启发而开发

## 2.flutter\_launcher\_icons ##

[https://pub.dev/packages/flutter\_launcher\_icons][https_pub.dev_packages_flutter_launcher_icons]  
一个命令行工具，可以指定生成IOS以及Android上对应的icon

## 3.flutter\_native\_splash ##

[https://pub.dev/packages/flutter\_native\_splash][https_pub.dev_packages_flutter_native_splash]  
用native实现开机的闪屏页  
![20200405125746685.gif][]

## 4. flutter\_share ##

[https://pub.dev/packages/flutter\_share][https_pub.dev_packages_flutter_share]  
提供native的分享功能

![20200405125833763.gif][] ![2020040512584715.gif][]

## 5.url\_launcher ##

[https://pub.dev/packages/url\_launcher][https_pub.dev_packages_url_launcher]  
提供跳转到Web页打开URL的功能，还可以通过URL打开mai、电话等  
详细可参考[Flutter启动浏览器打开URL][Flutter_URL]

[https_pub.dev_packages_tutorial_coach_mark]: https://pub.dev/packages/tutorial_coach_mark
[20200405113117304.gif]: https://img-blog.csdnimg.cn/20200405113117304.gif
[20200405113313551.gif]: /images/20230528/e1829122e4d64f78bbea71fff7113338.png
[https_pub.dev_packages_flutter_sliding_tutorial]: https://pub.dev/packages/flutter_sliding_tutorial
[20200405115350877.gif]: /images/20230528/94def015142c4d17b5d56faa9d699407.png
[https_pub.dev_packages_flutter_overboard]: https://pub.dev/packages/flutter_overboard
[20200405115438994.gif]: /images/20230528/becbce9014654724b7be1a53c389aaf7.png
[https_pub.dev_packages_awesome_dialog]: https://pub.dev/packages/awesome_dialog
[20200405124646391.gif]: /images/20230528/a9780a881ab2491bbfba406be8ef9d77.png
[https_pub.dev_packages_sweetalert]: https://pub.dev/packages/sweetalert
[20200405124732818.gif]: /images/20230528/dd1aa04536d24f29b4ecc853f5256453.png
[https_pub.dev_packages_percent_indicator]: https://pub.dev/packages/percent_indicator
[20200405124819795.png]: https://img-blog.csdnimg.cn/20200405124819795.png
[20200405125035626.png]: /images/20230528/4925c09dfbfc4113b2b90cdc768fe50b.png
[https_pub.dev_packages_fl_chart]: https://pub.dev/packages/fl_chart
[https_pub.dev_packages_flutter_clean_calendar]: https://pub.dev/packages/flutter_clean_calendar
[20200405125240787.png]: https://img-blog.csdnimg.cn/20200405125240787.png
[20200405125313968.gif]: /images/20230528/e62181f006554f45aaed3ed1e3bcdc96.png
[https_pub.dev_packages_infinite_cards]: https://pub.dev/packages/infinite_cards
[https_pub.dev_packages_bubble_bottom_bar]: https://pub.dev/packages/bubble_bottom_bar
[20200405125519319.gif]: /images/20230528/ead38ca199604aab9fa6cc683271210e.png
[https_pub.dev_packages_curved_navigation_bar]: https://pub.dev/packages/curved_navigation_bar
[20200405125555594.gif]: /images/20230528/afe76519f31e4ab4ace0f18c54141a7c.png
[https_pub.dev_packages_ff_navigation_bar]: https://pub.dev/packages/ff_navigation_bar
[20200405125634614.gif]: /images/20230528/92a01f7e54fa4fff867ccdbcb5042c52.png
[https_pub.dev_packages_fancy_bottom_navigation]: https://pub.dev/packages/fancy_bottom_navigation
[20200405125705979.gif]: /images/20230528/37b747444f284e9d840873ba0f49265f.png
[https_pub.dev_packages_flutter_icons]: https://pub.dev/packages/flutter_icons
[https_pub.dev_packages_flutter_launcher_icons]: https://pub.dev/packages/flutter_launcher_icons
[https_pub.dev_packages_flutter_native_splash]: https://pub.dev/packages/flutter_native_splash
[20200405125746685.gif]: /images/20230528/f392df0b9d6c47fca09766a919d5312a.png
[https_pub.dev_packages_flutter_share]: https://pub.dev/packages/flutter_share
[20200405125833763.gif]: https://img-blog.csdnimg.cn/20200405125833763.gif
[2020040512584715.gif]: /images/20230528/3cf7a42feb9f414c86ac7dfd48ae85e6.png
[https_pub.dev_packages_url_launcher]: https://pub.dev/packages/url_launcher
[Flutter_URL]: https://blog.csdn.net/vitaviva/article/details/105312024