觀察一件事情的流行趨勢，可以從比較與其相關的項目著手，而以 Flutter 的角色來看，React Native 會是相當重要的對手。我特地到 Google Trend 比較 Flutter 和 React Native 搜尋熱度的趨勢變化，時間從 Flutter 最初被釋出的時刻 2017 年開始。
可以見到以下趨勢圖變化，Flutter 在 2019 年開始逐漸超越 React Native，看來 Flutter 是後來居上，一直到了 2021 年～我非常期待之後的變化。🤩
2021 年上半年，我因緣際會要協助一個 Flutter 專案，橋接 iOS 原生語言的 In App Purchase 功能，才接觸 Flutter 相關知識內容。到了下半年，更有公司專案負責人，找我協助在 Flutter 專案上新增功能，於是我更有機會實際使用 Flutter 來開發 App。
（繼續閱讀…）最近踏入跨平台開發，過去有開發過 Xamarin 和 Ionic 的我，原先對跨平台不屑一顧，不過在遇到 Flutter 之後，開始有不一樣的期待！為什麼呢？
第一，開發效率比其他跨平台程式語言還要好；第二，成果效能不輸給原生開發。
在此節錄高手的電子書內容，跟著前人的腳步學習，代表好的開始～😀
其實在幫忙維護公司產品時，覺得花太多時間在編譯上，每次編譯動輒一分鐘以上，若不小心動到核心檔案，編譯時間可能將近 5 分鐘，等待的過程我會滑手機，或是想著下一步要怎麼改動程式碼，行雲流水的思緒被中斷，實在不是很爽快呢～
因緣際會接觸了 Flutter 跨平台開發，第一次聽到 Flutter 是在港商公司，我的 Leader 耳聞 Google 最新跨平台技術誕生，就跟老闆提議可考慮用此技術來改善 UI/UX 不平衡的狀況。不久，老闆就裁掉 50 多人的 IT 部門，很快再招募新一批人馬，使用 Flutter 快速迭代開發，我看到上架到 App Store，下巴差點沒掉下來⋯⋯
如今已過兩年，Flutter 發展得比 React Native 還要蓬勃，想必是其有過人之處！😌
（繼續閱讀…）現在相機與相簿 (Camera and Album)是相當基本的功能，那我們要怎樣用AngularJS來實作呢？
![[Ionic][AngularJS] 相機與相簿 (Camera and Album)00001](https://cg2010studio.com/wp-content/uploads/2017/10/ionicangularjs-e79bb8e6a99fe88887e79bb8e7b0bf-camera-and-album00001.png)
動作選單 (Action Sheet)是個很常用到的介面，原來只要複製以下的程式碼來改就行囉！
![[Ionic] 動作選單 (Action Sheet)](https://cg2010studio.com/wp-content/uploads/2017/10/ionic-e58b95e4bd9ce981b8e596ae-action-sheet.png)
/**
Theme: Action Sheet
IDE: None
Language: AngularJS
Date: 106/10/16
Author: HappyMan
Blog: https://cg2010studio.com/
*/
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '照相' },
{ text: '相簿' }
],
// destructiveText: 'Delete',
titleText: '請選擇',
cancelText: '取消',
cancel: function() {
console.log('cancel add');
},
buttonClicked: function(index) {
if (index == 0) {
console.log('照相');
}
if (index == 1) {
console.log('相簿');
}
return true;
}
});
記得要引用$ionicActionSheet。
參考：ionic 1- $ionicActionSheet。
就像人生，面臨許多選擇，AngularJS選單可以怎麼呈現呢？
![[Ionic][AngularJS] 選單.png](https://cg2010studio.com/wp-content/uploads/2017/07/ionicangularjs-e981b8e596ae.png)
View的部分可以這麼寫：
/**
Theme: AngularJS Select
IDE: Sublime
Language: Javascript
Date: 106/07/13
Author: HappyMan
Blog: https://cg2010studio.com/
*/
<select ng-init="somethingHere = kidList[0]"
ng-model="somethingHere"
ng-options="option.Name for option in kidList"
ng-change="select()">
</select>
Controller可以這麼做：
/**
Theme: AngularJS Select
IDE: Sublime
Language: Javascript
Date: 106/07/13
Author: HappyMan
Blog: https://cg2010studio.com/
*/
$scope.kidList = JSON.parse(AuthService.storageGet('kidList'));
$scope.select = function () {
$scope.selectId = $scope.somethingHere.Id;
};
呼叫API之後，要等它處理完並傳回訊息，就能進行接下來的工作，這個行為叫做回傳呼叫 (Callback)，類似其它語言的Closure或Block。
那麼在AngularJS要怎麼實現Callback呢？
原來函數中的參數，可以函數型態傳入呀！
/**
Theme: Callback
IDE: Sublime
Language: Javascript
Date: 106/07/08
Author: HappyMan
Blog: https://cg2010studio.com/
*/
function two() {
console.log("value is 2")
}
function one(callback) {
console.log("value is 1")
callback()
}
one(function() {
two()
})
執行結果：
value is 1
value is 2
承接[Ionic][AngularJS] 載入Youtube影片，想要離開畫面就停止播放，該怎麼做呢？因為進到下一頁，正在播放的影片還沒有被移除，就會持續播放下去。
在controllers.js中寫：
.controller('ResultCtrl', function($scope, $sce) {
$scope.pauseVideo = function() {
console.log('postMessage pauseVideo');
var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
iframe.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
}
$scope.playVideo = function() {
console.log('postMessage playVideo');
var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
iframe.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
}
$scope.$on('$ionicView.beforeLeave', function(){
console.log('pauseVideo');
$scope.pauseVideo();
});
$scope.$on('$ionicView.enter', function(){
console.log('playVideo');
$scope.playVideo();
});
})
還要在Youtube影片網址後方連接參數⋯⋯
?enablejsapi=1
格式會像是：https://www.youtube.com/embed/uSmcLz2FAUI?enablejsapi=1
程式碼才會有作用喔～
參考：How to pause or stop an iframe youtube video when you leave a tab view or minimise your Ionic App。
還沒有真正開發過Android native app，就要先用Ionic來編譯Hybrid app的Android版本，當然一開始是最難的，因為前方有一堆你還沒遇過的問題擋在前面，途中我已劈荊斬棘，當前我遇到中文檔名的問題，當然一開始不曉得，查了網路上前人的經驗才疑惑地嘗試。
明明Hybrid app的iOS版本沒有問題，卻在透過Android Studio編譯成Hybrid app的Android版本有問題⋯⋯
關於Access Control Allow Origin。查了網路，SO裡頭有好多人有同樣的問題，發現最好的解決方式就是透過server來設定response的header。
我使用Chrome來debug，發現正要用的domain會有下列回應，套上先人使用的domain來測試，沒有這樣的回應，所以猜想是server設定的問題囉～
逍遙文工作室 
HappyMan・迴響