發表文章

目前顯示的是有「Flutter」標籤的文章

Flutter_開發手機應用筆記2_Mac上配置_Xcode記得命名與路徑要再三檢查

圖片
按一下 Dock 中的「啟動台」圖像  ,在搜尋欄位中輸入「終端機」,然後按一下「終端機」。 在 Finder   中,打開「/應用程式/工具程式」檔案夾,然後按兩下「終端機」。 輸入uname -a 查看若有x86_64就代表用的是64位元 要有Apple ID相應帳號登入才能下載XCODE 要記得XCODE安裝可能會因為MacOS版本過低無法安裝喔 最新版本XCODE要求至少MacOS 13.0以上 剛好我這台跟3c產品行老闆 借來的 macOS 12.5沒辦法符合 下載下去就會被警示說 無法安裝 這邊我們安裝舊版XCODE  14.2 測試可以在MacOS 12.5跑得起來 相關XCODE對應環境參照表 再來就是flutter sdk記得先確認你MacOS版本是用Intel還是arm 對應不同stable版本sdk做安裝喔! 接著就可以透過flutter doctor確認環境配置狀況 看起來xcode它沒有感應到 暫時先視而不見 flutter --version確認有OK 有這個CLI安裝好了 記得設到系統環境變數(這只有暫時有效當你重開另一個terminal就會失效) export PATH="$PATH:`pwd`/flutter/bin" Ref: https://you.com/search?q=zsh%3A+command+not+found%3A+flutter&tbm=youchat&cfr=chatb&cid=c2_5cf55313-8a96-466e-b89f-37b62a178508 這裡設置全域永久有效的套用方式 可以透過open -a Simulator來開啟我們iphone模擬器 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. 預設的 /Library/Developer/CommandLineTools 目錄下, 並...

Flutter_開發手機應用筆記3_SearchBar

圖片
  Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 import 'package:flutter/material.dart' ; class HomePage extends StatefulWidget{ _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage>{ @ override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text( '首頁' ), actions: [ IconButton( icon: Icon(Icons.search), onPressed: (){ showSearch(context: context, delegate: CustomSearch()); }, ) ], ), body: Container(), ); } } class CustomSearch extends SearchDelegate{ List< String ...

Flutter_開發手機應用筆記1_底部TAB頁籤(Window上Android Studio配置)

圖片
首先Android Studio記得安裝下載好 起手式下載安裝flutter sdk 根據不同開發平台需下載相應SDK https://docs.flutter.dev/get-started/install 在Windows平台 https://docs.flutter.dev/get-started/install/windows 解壓後直接放到C槽根目錄並添加至系統環境變數當中 系統環境變數添加 接著開啟命令提示字元小黑視窗敲下面指令 flutter doctor來查檢相關環境配置是否順利 開啟Android Studio並進行Flutter套件配置 先新增一個空專案 更改專案SDK選定版本後 按Finish 確定相關android sdk都有安裝配置好 到File -> Settings視窗在搜尋plugin 指定flutter關鍵字查找 此時對應又會跳要多載Dart的字眼視窗(因為Flutter這個plugin是基於dart的) Restart Android Studio 選New flutter project 之後選左側Flutter 指定對應flutter sdk位置 再下一步就是命名專案名稱(注意只能用下滑線直接橫槓是不可以的) 專案就新增好了 四個資料夾: android:原生 Android 的 code base。 ios:原生 iOS 的 code base。 lib:Flutter 程式碼位置。 test:單元測試。 另外,pubspec.yaml 定義了 flutter 相關的參數。 在上半部這邊主要是挑選騎程式預設要執行哪隻下拉選單 其中在lib目錄下的main.dart就是整個應用程式的進入點 點選AVD Manager進行模擬器的建立 當創建好後按Finish 若發現出現此錯誤 代表Android有相關環境變數配置有尚未設置的 暫時沒配置還好 左上角選單就可從預設No selected device跳到有配置的模擬手機實體環境 等一陣子後就可看到一個預設範例按按鈕加一壘加的功能顯示出來 如果感覺load十分慢 可參考官方文件 設定 Android Emulator 的硬體加速功能 https://developer.android.com/studio/run/emulator-acceleration?hl=zh-tw ...