iT邦幫忙

flutter相關文章
共有 574 則文章
鐵人賽 Mobile Development DAY 20

技術 Day 20: Riverpod 的開發多元性以及日常使用技巧!Provider 該如何選擇?

Riverpod 是什麼?相信大家都已經有初步了解了,甚至大家都已經運用在自己的專案了對吧?它本身的使用方式很多樣,是個很靈活的框架,但在很方便開發的同時,也...

鐵人賽 Mobile Development DAY 19

技術 [Day 19] 實戰新聞 APP - 無限捲軸

大家好,今天我們要完成主頁的新聞瀏覽頁面,並加上無限捲軸的實作。畫面會如下圖:不過為什麼我們需要無限捲軸呢?試想一下,假設我們有 100 篇的新聞資料,這些新聞...

鐵人賽 Mobile Development DAY 19

技術 Day 19: 如何撰寫 Riverpod 測試,使用 Mocktail 來幫助我們吧!

本文進入測試環節。適合對 Riverpod 有實際玩過且熟悉的朋友們,不會特別講解相關開發技巧,我們著重在於如何寫好一個基本的測試,穩固專案的品質。希望由這些...

鐵人賽 Mobile Development DAY 18

技術 [Day 18] 實戰新聞 APP - Custom Widget

寫到目前為止,我們一直都將一個畫面的內容寫在單一檔案中,也就是說頁面上看得到的 widget全都可以在 xxx_screen.dart 的程式碼中找到。 試想...

鐵人賽 Mobile Development DAY 18

技術 Day 18: Flutter 狀態管理?Riverpod 的 watch() 實際上如何通知更新?

當我們在專案使用 Riverpod 後, 一定很長使用到 WidgetRef API,例如:ref.read()、ref.watch()、ref.listen...

鐵人賽 Mobile Development DAY 17

技術 [Day 17] 實戰新聞 APP - FutureBuilder 與 StreamBuilder

昨天我們把我們的探索頁面的樣貌做的差不多拉,不過 Flutter 提供了兩個強大的 widget FutureBuilder 與StreamBuilder 專門...

鐵人賽 Mobile Development DAY 17

技術 Day 17: Riverpod 是什麼?它負責狀態管理嗎?跟著我了解幾個重要角色

在 Flutter,狀態管理對於專案來說很重要,不是說一定要用,只是當開發者還不熟悉 Flutter 原理以及刷新觀念,很容易會造成不當開發的效能問題。狀態管...

鐵人賽 Mobile Development DAY 16

技術 [Day 16] 實戰新聞 APP - 串接 API

今天我們將開始進行 API 串接,在開始講解之前請先開啟之前在 Day10 時建立的 api server。若你已將 server 部署至 vercel 上可以...

鐵人賽 Mobile Development DAY 16

技術 Day 16: 聊聊 Flutter 圖像使用的良好習慣,記憶體掌握與優化!

相信大部分 APP 都會使用到圖片,可能場景有貼文牆、大頭照、上傳圖片等等,在實作時大家是否有關心過記憶體的使用情況呢?或許在開發時、在自己的裝置上都運行的順...

鐵人賽 Mobile Development DAY 15

技術 Day 15: Flutter 效能優化,良好的開發觀念與技巧!(下)

延續上一篇的內容,本文繼續跟大家分享一些正確觀念,為了就是在開發時可以撰寫出品質好的程式碼,寫的任何一個元件都很重要,它們為何存在,使用的優缺點是什麼,都應該...

鐵人賽 Mobile Development DAY 14

技術 Day 14: Flutter 效能優化,良好的開發觀念與技巧!(上)

當我們開發 Flutter 一段時間後,想必都會有自己習慣的開發方式跟技巧,但有時候很方便、速度快的方式卻不代表是好的,有可能開發上很省時卻導致性能有缺陷,記...

鐵人賽 Mobile Development DAY 13

技術 Day 13: 在 Dart 與 Flutter 開發中常用的幾種 Pattern,為什麼需要它們?

Pattern 在每個領域的軟體開發當中都會遇到,有時候大家很常使用但卻沒有實際了解為什麼要這樣設計,他們都是為了解決某件事,讓我們很方便的完成開發。而在開發...

鐵人賽 Mobile Development DAY 12

技術 Day 12: 研究 Flutter 動畫,背後的 vsync 跟 Ticker 有多重要?

上一篇介紹了動畫的兩大分類,Explicit Animation 和 Implicit Animation,以及實作時會用到的幾個重要元素,包含 Animat...

鐵人賽 Mobile Development DAY 11

技術 Day 11: Flutter 動畫大補帖,觀念與使用時機都告訴你!

在 Flutter 中,動畫在大部分開發情境下不太常使用到,很多產品都以功能為導向,有時候有趣的體驗或是酷炫的效果都會被忽略甚至是排在後面,視為往後優化的部分...

鐵人賽 Mobile Development DAY 10

技術 Day 10: Async 和 Isolates 差異在哪裡?正確使用才能確保流暢體驗!

為什麼在 Flutter 開發中很常會需要 Async 非同步操作?因為畫面的互動、繪製刷新都是在同步的狀況下運行,為了順暢運行,需要一秒快速進行多次的渲染處...

鐵人賽 Mobile Development DAY 10

技術 [Day 10] 實戰新聞 APP - 前置作業 (JSON Server / Vercel / APP 設計稿)

今天我們將開啟一個全新的專案,製作一款新聞 APP。如果你是有年年在關注 iOS 更新的人應該會知道蘋果曾經在數年前發表一款 Apple News 的內建新聞軟...

鐵人賽 Mobile Development DAY 9

技術 [Day 09] Stateless & Stateful Widget

Stateless 與 Stateful widget 是在建構頁面之前,你應該要先仔細思考該頁面是否會有 state 變化的產生而去選擇應該使用的類型。 在...

鐵人賽 Mobile Development DAY 9

技術 Day 9: 深入 setState(),觀察它如何進行 UI 刷新!

每次執行 flutter create <name> 創建新的專案後,預設都會在主頁面看到很熟悉的計數器功能,在點擊 FloatingAction...

鐵人賽 Mobile Development DAY 8

技術 [Day 08] Flutter 基礎 widget:Text、Button 與排版元件

今天我們要來講解 Flutter 的基礎Widget。 Flutter 預設提供了兩種熱門的 UI 組件,分別是接近 Andorid 原生風格的 Materia...

鐵人賽 Mobile Development DAY 8

技術 Day 8: MediaQuery 優化後與 InheritedModel 如何進行指定更新

上一篇我們討論了 MediaQuery 是什麼、它的正常使用方式,並稍微帶大家分析背後源碼的運作流程。本文要了解在 Flutter 3.10 改版後,Inhe...

鐵人賽 自我挑戰組 DAY 18

技術 [鐵人賽 Day 18] Kotlin & Flutter 改變元件狀態方法比較

前言 回顧前幾篇寫的鐵人賽文章內容,個人覺得需要強調說明關於改變元件狀態的部分,因為這是 Kotlin & Flutter 在建立元件蠻重要的差異。 目...

鐵人賽 Mobile Development DAY 7

技術 Day 7: MediaQuery 是什麼?很方便但如何正確在 Flutter 使用,順便跟你說它的缺點

所有的 Flutter 開發者應該多多少少都有碰過 MediaQuery,它給予的支援很廣,是個很重要的數據來源,以至於非常多場景都會需要存取它。而在 Flu...

鐵人賽 Mobile Development DAY 7

技術 [Day 07] Flutter 的第一個專案

今天我們要來開始踏入 Flutter 開發拉,我們先從建立專案,執行看看,並且帶大家認識 Flutter 的檔案結構。讓我們開始吧! 建立專案 使用 flutt...