iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Mobile Development

「Google Flutter」學習筆記系列 第 12

【Day 12】HistoryOfEverything - 歷史的時間軸

今日要點
》介紹 HistoryOfEverything 專案
》下載並編譯 HistoryOfEverything 專案


介紹 HistoryOfEverything 專案

今天要介紹的Github專案,是一個非常優秀的專案,我第一次被 Flutter 吸引,就是下載這個 App。2d-inc/HistoryOfEverything 功能非常簡單,就是介紹一些歷史上的事件,用垂直的時間軸,讓您可以滑動瀏覽,探索和比較從“大爆炸”到互聯網誕生的事件。5.2K 的星星,也是觀注度很高的專案。

他們用 ScrollPhysics 和 GestureDetector 讓滾動非常的流暢。UX感覺一級棒。在動畫上也用上 Flare and Nima 事件說明精美的呈現而且生動活潑。

在 README.md 的內容,寫的很詳細,除了把專案運作的畫面截圖下來,也寫了很多說明,是值得好好研究的專案。

先看看他 README.md 裡的運行畫面,相信你也會心動的。
  

下載並編譯 HistoryOfEverything 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 HistoryOfEverything 專案囉。

% git clone https://github.com/2d-inc/HistoryOfEverything.git

Cloning into 'HistoryOfEverything'...
remote: Enumerating objects: 2411, done.
remote: Total 2411 (delta 0), reused 0 (delta 0), pack-reused 2411
Receiving objects: 100% (2411/2411), 10.22 MiB | 3.03 MiB/s, done.
Resolving deltas: 100% (1479/1479), done.


% cd HistoryOfEverything/app

好,正常這時候我們會開始下 pub get, 不過這專案還不行,如果下了會出現
Running "flutter pub get" in app... pub get failed (66; Could not find a file named "pubspec.yaml" in "/Users/jasonhung/Flutter_jason/ithelp2020/HistoryOfEverything/dependencies/Nima -Flutter".)

我們要先把他的相關的 dependencies 下載回來。

% git submodule init

Submodule 'dependencies/Flare-Flutter' (https://github.com/2d-inc/Flare-Flutter.git) registered for path 'dependencies/Flare-Flutter'
Submodule 'dependencies/Nima-Flutter' (https://github.com/2d-inc/Nima-Flutter.git) registered for path 'dependencies/Nima-Flutter'


% git submodule update

Cloning into '/Users/jasonhung/Flutter_jason/ithelp2020/HistoryOfEverything/dependencies/Flare-Flutter'...
Cloning into '/Users/jasonhung/Flutter_jason/ithelp2020/HistoryOfEverything/dependencies/Nima-Flutter'...
Submodule path 'dependencies/Flare-Flutter': checked out '562ac0b644ae965b50d2b3e229c501c471ad01d1'
Submodule path 'dependencies/Nima-Flutter': checked out 'ac1a169addeef3ba28838ca31fbb95239c414a4c'


% flutter pub get

Running "flutter pub get" in app...     3.0s

試 build 一下,

% flutter run -d all

Warning: Podfile is out of date
This can cause a mismatched version of Flutter to be embedded in your app,
which may result in App Store submission rejection or crashes.
If you have local Podfile edits you would like to keep, see
https://github.com/flutter/flutter/issues/24641 for instructions.
To regenerate the Podfile, run:
rm ios/Podfile

好吧,ios 有一些錯誤,還在找如何處理

anroid 也有問題,把 targetSdkVersion 27 改成 28 OK了
把 build.gradle
targetSdkVersion 28


ok,Android 執行起來了,iOS改天再找一下問題。

 

程式架構研究

Main.dart : BlocProvider, MaterialApp

main_menu/main_menu.dart

今天就先這樣吧。

好,第12天,寫完。


上一篇
【Day 11】flutter_deer - UI畫面非常齊全的商務專案
下一篇
【Day 13】fun_android_flutter - 一個聊Android開發的網站APP
系列文
「Google Flutter」學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言