開源 從零上手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看全網主播

寫這個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

安利一個比較方面的工具，flutter是不支持反射的，那麼後端獲取的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，謝謝！