開源 從零上手flutter一個月可以做出什麼東西？

HarryZhang6發表於2020-05-25
Flutter

前言

上手flutter 差不多一個月 的時間了，總結一下吧！畢竟沉澱(摸魚)兩個月了,還是得重新記錄記錄下。

先說一下本來是打算空閒時間寫個app來玩耍一下的,一開始本來想用原生安卓的，後來又想跨平臺.然後就篩選了3個方案

  • react-native: facebook旗下的，但是網上找了下資料，發現大多數都是幾年前的，在說對react不是特別熟悉。 故放棄。
  • uni-app:國內團隊，目前公司小程式就是用的這個，不想在入坑了。故放棄。
  • flutter: 谷歌開源，國內也有很多公司在使用，比如最早的 閒魚，然後上手寫了個demo感覺還不錯，再加上本身就是個UI框架。最終決定使用flutter開發。

在當時決定時我是根本沒有接觸過flutter的，就當作學習了，給予最大幫助的還是github(全球最大的同性交友網站gayhub)，官方文件。 也就每天下班後和週末有時間可以寫寫

什麼是flutter？

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。簡單來說，Flutter是一款移動應用程式SDK，包含框架、控制元件和一些工具，可以用一套程式碼同時構建Android和iOS應用，並且效能可以達到原生應用一樣的效能。詳情請參考Flutter簡介 。

flutter使用心得

從我的觀點來看的話 flutter還是很不錯，生態也在慢慢的發展，就是這個套娃語法有時候看著有點吃力，不過拆分一下還是可讀的。

目前flutter的第三方庫還是能滿足日常的app的，反正我寫個視訊類的app還是行的，說到這就得吐槽下flutter的視訊方面感覺比較弱一點，官方的video player 又太麻煩，比較出名點的有chewie、fijkplayer。支援自定義UI。 可能部分手機會有掉幀的情況，網上也有人遇到過，不過我身邊除了我的手機好像並沒有出現這樣的情況(oneplus 5T 釘子戶) 寫到這突然就不知道怎麼寫了，感覺很亂，還是結合一下具體專案說一下吧。

開源 alltv 一個app看全網主播

開源 從零上手flutter一個月可以做出什麼東西？ 開源 從零上手flutter一個月可以做出什麼東西？ 開源 從零上手flutter一個月可以做出什麼東西？ 開源 從零上手flutter一個月可以做出什麼東西？

寫這個app也只是為了圖個方便,在一個想學學新的的東西。

路由管理 fluro

其實本身app頁面並不多，flutter原生路由也可以滿足，但還是決定用下框架，專案使用fluro很痛心的一點，框架本身並不支援中文引數，所以得手動處理。 詳情請見

網路請求 dio

dio是Flutter中文網開源的一個強大的Dart Http請求庫，支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、超時等。 dio

視屏播放器

採用 開源fijkplayer作者好像也在掘金。基於b站開源的ijkplayer 具體請見 fijkplayer

其他的就不詳細說了
dependencies:
  flutter:
    sdk: flutter
  # storage
  shared_preferences: ^0.5.6+3
  # 狀態管理
  provider: ^4.0.5+1
  # 螢幕適配
  flutter_screenutil: ^1.1.0
  # 路由管理
  fluro: "^1.6.3"
  # 下拉重新整理
  pull_to_refresh: ^1.5.7
  # toast
  fluttertoast: ^4.0.0
  # 網路請求
  dio: ^3.0.9
  cached_network_image: ^2.2.0
  #websocket
  web_socket_channel: ^1.1.0
  # 視訊播放
  fijkplayer: ^0.8.3
  crypto: ^2.1.3
  cupertino_icons: ^0.1.2

複製程式碼

JSON to Dart

安利一個比較方面的工具，dart好像是不支援反射，那麼後端獲取的json 怎麼快速轉成物件呢？ 那麼這個網站比較方便 json to dart

flutter 踩坑日記

flutter build apk 真機無法請求網路

具體原因是安卓高版本預設不開啟網路訪問許可權，需要自己手動開啟， 在這個檔案裡，android\app\src\profile\AndroidManifest.xml，manifest 裡新增這段程式碼：

<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
複製程式碼

你以為就完了？還有呢，在src\main下面也有一個AndroidManifest.xml，同樣需要相同的操作，主要不要放到application下了。

不能訪問http請求

原因：IOS和Android 9.0+對非HTTPS請求做了一些限制，不能直接訪問Http請求，在Android中會出現net:ERR_CLEARTEXT_NOT_PERMITTED的錯誤 解決辦法：

  • 在src/res/xml下面建立network_security_config.xml，配置如下所示：
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
     <base-config cleartextTrafficPermitted="true" />
</network-security-config>
複製程式碼
  • 在src\main下的AndroidManifes.xml上新增：
 <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config">
            <!-- ... -->
        </application>
    </manifest>
複製程式碼

其實專案中往往不止這些坑,只不過當時沒記錄，這時候你很難想到了。

專案地址

傳送門:github apk：藍奏雲

END

如果覺得對你有所幫助，那就麻煩點個Star，謝謝！

相關文章