---
image: https://i.imgur.com/1SULxuT.png
---
###### tags: `Flutter`

# 手把手用 Flutter 做一個 hacker news app


## 分享錄影重播

- [手把手用 Flutter 做一個 hacker news app - Facebook](https://www.facebook.com/events/663181318628187/)

Flutter 是一個由 Google 開發的跨平台移動應用程式開發框架，它可以讓您使用 Dart 程式語言來撰寫原生體驗的 Android 和 iOS 應用程式。Flutter 不但提供了豐富的組件和工具，更可以讓您快速開發和測試應用程式，並且支援熱重載(Hot Reload)，大幅提昇開發人員體驗(DX)，使你能夠在開發的過程中立即看到修改的成果。這場直播我特別邀請到 zonble 來為我們分享這場長達 3 小時的 Flutter 訓練課程，zonble 是台灣唯一的 Flutter GDE，擁有多年的 Flutter 開發經驗，相信本次分享可以帶大家快速上手 Flutter 的各種技術細節，手把手教會你用 Flutter 設計出一個 hacker news app！👍

【講者介紹】
楊維中，網路代號 zonble，Flutter GDE。
從 2007 年開始從事軟體業。現為賽輪斯（Cerence）台北辦公室軟體開發經理，從事車用領域軟體開發。之前則擔任過 KKBOX iOS 主管等職務，作品散見於 GitHub、Medium、個人 blog 以及國內社群。

▶ 記得到 [Will 保哥的技術交流中心](https://www.facebook.com/will.fans) **按讚**、**分享**

- [手把手用 Flutter 做一個 hacker news app - YouTube](https://www.youtube.com/watch?v=rSKM1aVI1VI)

▶ 記得**按讚**、**訂閱**、**分享**、**開啟小鈴鐺** 🔔

## 學習資源整理

- [正體中文 Flutter 開發文件](https://flutter.tw/)
- [正體中文 Dart 語言開發文件](https://dart.tw.gh.miniasp.com/guides/)
- 今日 API 資料來源: https://github.com/HackerNews/API

## 開發 Flutter 的專案類型

- Application

可發佈執行檔的應用程式

- Plugin

開發跨平台的 Bridge code，會產生 Java, Kotlin, Swift, ... 等代碼

- Package

開發 Dart 專屬的函式庫 (只能放 Dart 原始碼)

## 關於 Dart 程式語言

- [Effective Dart: Style](https://dart.dev/guides/language/effective-dart/style) / [高效 Dart 語言指南：程式碼風格](https://dart.tw.gh.miniasp.com/guides/language/effective-dart/style)

- [Stream class - dart:async library - Dart API](https://api.flutter.dev/flutter/dart-async/Stream-class.html)

- Dart 的 Future 與 Stream 有何差異？


- 怎樣在 Dart 裡面取得 Stream 的內容？


- Dart 的 const 與 final 有什麼差異？


## 關於 Flutter Layout 相關資源

- [zonble -- Flutter 工程師遇到複雜 Layout 的自救指南](https://youtu.be/qwUl_rfTa0E?t=19128) (YouTube)
- [See DevFest Taipei '21. at Google Developer Groups GDG Taipei](https://gdg.community.dev/events/details/google-gdg-taipei-presents-devfest-taipei-21/#:~:text=zonble%20%2D%2D%20Flutter%20%E5%B7%A5%E7%A8%8B%E5%B8%AB%E9%81%87%E5%88%B0%E8%A4%87%E9%9B%9C%20Layout%20%E7%9A%84%E8%87%AA%E6%95%91%E6%8C%87%E5%8D%97)
- [FlutterFlow - Build beautiful, modern apps incredibly fast!](https://flutterflow.io/)
- [Flutter Layout Cheat Sheet](https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e)
- [FigmaToFlutter | Figma Community](https://www.figma.com/community/plugin/844008530039534144)
- [DhiWise Figma to Flutter code hands-on: A Step by Step Guide to convert your Figma design to Flutter code](https://www.dhiwise.com/post/how-to-convert-figma-design-to-flutter-code)

## 關於 Flutter 狀態管理

- [flutter_bloc | Flutter Package](https://pub.dev/packages/flutter_bloc)
- [[Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022 - Speaker Deck](https://speakerdeck.com/j796160836/flutter-lai-ti-yan-bloc-xiao-fang-kuai-de-shen-qi-mo-fa-at-devfest-2022)
- [【Flutter基礎概念與實作】 Day11-Flutter Bloc 套件介紹 (1) Events、States和Transitions](https://ithelp.ithome.com.tw/articles/10219357)
- [Managing State in Flutter - Introducing Flutter - YouTube](https://www.youtube.com/watch?v=vU9xDLdEZtU)