Flutter入門指南

更新 發佈閱讀 4 分鐘
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!

最近有新開一個部落格是在介紹Flutter相關的文章,大家可以去看看~

GetX

Getx是一個非常輕量化的套件,他的主要功能為狀態管理(State management)、路徑管理(Route management)和依賴管理(Dependency management),非常容易上手適合剛入門的工程師來使用,他也有提供中文的說明,大家可以進去看看!



檔案規劃

在我使用GetX時,我會這樣規劃自己的檔案分類

raw-image

Config

raw-image

我會拿來放一些常數,像是timeout的時間,因為我是使用Firestore來儲存資料,所以我還會在這邊放我資料庫路徑的參數。

class Paths {
  Paths._();
  static const String post = 'post';
  static const String user = 'user';
}

Helper

raw-image

Helper則是放一些工具,像是數學工具來做一些加減乘除或是Matrix的處理,又或是圖片處理,來選擇相簿內的照片等功能。

Models

raw-image

Models放各種會使用到的資料結構,可以根據自己的專案所需再細分成各個資料夾,各個model內則建議有一些內建的function,像是copyWith, toJson, fromJson等基本的功能,之後有機會再介紹。

Network

raw-image

Network則是根據每個人呼叫api等等的習慣來決定裡面的資料夾和檔案,我個人習慣使用dio來呼叫api,而repositories則是用來處理Firestore相關的api

Pages

raw-image

Pages就是app上的各個頁面,而裡面又會分成一個主畫面 + 一個getX的controller(GetX的binding我也會寫在裡面) 再加上一個widgets的資料夾,當然也可以根據專案的複雜程度再細分成不同的結構。

Routes

Routes則是用來處理GetX的路徑

class Routes {
  Routes._();
  static const homeRoute = '/home';
  static const splashRoute = '/splash';

  static final List<GetPage> routes = [
    GetPage(name: splashRoute, page: ()=> const SplashPage(), binding: SplashBinding()),
    GetPage(name: homeRoute, page: ()=> const HomePage(), binding: HomeBinding()),
  ];
}

Widgets

Widgets用來放各個頁面會共用到的Widgets


今天就先介紹到這裡,如果有任何問題、錯誤或是希望我介紹的主題都可以留言告訴我,謝謝!

留言
avatar-img
留言分享你的想法!
avatar-img
貓俠的沙龍
3會員
2內容數
你可能也想看
Thumbnail
雙11於許多人而言,不只是單純的折扣狂歡,更是行事曆裡預定的,對美好生活的憧憬。 錢錢沒有不見,它變成了快樂,跟讓臥房、辦公桌、每天早晨的咖啡香升級的樣子! 這次格編突擊辦公室,也邀請 vocus「野格團」創作者分享掀開蝦皮購物車的簾幕,「加入購物車」的瞬間,藏著哪些靈感,或是對美好生活的想像?
Thumbnail
雙11於許多人而言,不只是單純的折扣狂歡,更是行事曆裡預定的,對美好生活的憧憬。 錢錢沒有不見,它變成了快樂,跟讓臥房、辦公桌、每天早晨的咖啡香升級的樣子! 這次格編突擊辦公室,也邀請 vocus「野格團」創作者分享掀開蝦皮購物車的簾幕,「加入購物車」的瞬間,藏著哪些靈感,或是對美好生活的想像?
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News