HackMD
  • New!
    New!  “Bookmark” and save your note
    Find a note that's worth keeping or want reading it later? “Bookmark” it to your personal reading list.
    Got it
      • Create new note
      • Create a note from template
    • New!  “Bookmark” and save your note
      New!  “Bookmark” and save your note
      Find a note that's worth keeping or want reading it later? “Bookmark” it to your personal reading list.
      Got it
      • Options
      • Versions and GitHub Sync
      • Transfer ownership
      • Delete this note
      • Template
      • Save as template
      • Insert from template
      • Export
      • Dropbox
      • Google Drive
      • Gist
      • Import
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
      • Download
      • Markdown
      • HTML
      • Raw HTML
      • ODF (Beta)
      • Sharing Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Note Permission
      • Read
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • Write
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • More (Comment, Invitee)
      • Publishing
        Everyone on the web can find and read all notes of this public team.
        After the note is published, everyone on the web can find and read this note.
        See all published notes on profile page.
      • Commenting Enable
        Disabled Forbidden Owners Signed-in users Everyone
      • Permission
        • Forbidden
        • Owners
        • Signed-in users
        • Everyone
      • Invitee
      • No invitee
    Menu Sharing Create Help
    Create Create new note Create a note from template
    Menu
    Options
    Versions and GitHub Sync Transfer ownership Delete this note
    Export
    Dropbox Google Drive Gist
    Import
    Dropbox Google Drive Gist Clipboard
    Download
    Markdown HTML Raw HTML ODF (Beta)
    Back
    Sharing
    Sharing Link copied
    /edit
    View mode
    • Edit mode
    • View mode
    • Book mode
    • Slide mode
    Edit mode View mode Book mode Slide mode
    Note Permission
    Read
    Owners
    • Owners
    • Signed-in users
    • Everyone
    Owners Signed-in users Everyone
    Write
    Owners
    • Owners
    • Signed-in users
    • Everyone
    Owners Signed-in users Everyone
    More (Comment, Invitee)
    Publishing
    Everyone on the web can find and read all notes of this public team.
    After the note is published, everyone on the web can find and read this note.
    See all published notes on profile page.
    More (Comment, Invitee)
    Commenting Enable
    Disabled Forbidden Owners Signed-in users Everyone
    Permission
    Owners
    • Forbidden
    • Owners
    • Signed-in users
    • Everyone
    Invitee
    No invitee
       owned this note    owned this note    
    Published Linked with
    Like BookmarkBookmarked
    Subscribed
    • Any changes
      Be notified of any changes
    • Mention me
      Be notified of mention me
    • Unsubscribe
    Subscribe
    目錄 === ![](https://i.imgur.com/MfVomzS.png) 【Flutter 程式設計入門實戰 30 天】[線上教學課程目錄](https://tw-hkt.blogspot.com/2019/11/2019-flutter-30-1117.html) 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。 Flutter 程式設計入門實戰 30 天 === 學習 Flutter 程式語言最佳指南,Flutter 程式語言基礎入門課程 ## 課程說明 Flutter 是由 Google 主導的 Dart 程式語言研發出來的開源跨平台軟體框架 (Framework),可開發 Android、iOS APP 行動應用程式、Web 網頁服務、Windows、macOS、Linux 和下一世代神秘 Fuchsia 作業系統桌面應用程式。且具有相當高效率 120FPS 的渲染性能,豐富的UI元件,媲美 Native 原生效能體驗。眾多優勢之下使得 Flutter 成為今年最熱門的新技術。看得出來 Google 未來將透過 Flutter 一統江山。只需要用一套程式語言就可以在多平台上任遊運行。 這門課程完全適合初學者,無須任何編寫過程式碼經驗,我們將從零基礎開始介紹,編寫程式語言需具備的基礎知識。完全從零開始,初學者無痛上手,將會了解如何使用 Dart 程式語言,由淺入深,快速掌握開發 Flutter 精髓與技巧。幫助您輕鬆快速建立 Flutter 開發基礎,早日順利邁向成為專家級一流開發人才。 ### 網路自學 Flutter 最常見的三大痛 1. 學習資訊東拼西湊,無法有系統很完整性的學習 2. 英文資料看得霧煞煞,一頭霧水 3. 觀念混淆,挫折感超重 ![](https://i.imgur.com/P88WwLx.png =200x) ### 課程特色 1. 由淺入深,無痛學習 Flutter 的程式開發技巧 2. 一次掌握 Flutter 最常用的核心關鍵知識 3. 繁體中文教材,系統化的課綱編排,HKT (侯光燦) 講師影片教學 ![](https://i.imgur.com/AJEiTT7.png) Flutter 先修班 === 若還不熟悉 Dart 程式語言,可以參考:【從零開始學 Dart 程式設計】[線上教學課程目錄](https://tw-hkt.blogspot.com/2019/08/2019-dart-83.html) Flutter 先修班 , Dart 程式語言基礎入門課程。 ![](https://i.imgur.com/ke0QCaA.png =500x) 課程目錄 === ## Flutter 程式設計入門實戰 30 天計: [課程限時優惠連結](http://bit.ly/2t1SjBu) ## Go 準備開始 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | 為什麼要用 Flutter ? | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-1-flutter.html) | | 2 | 安裝 Flutter 開發環境 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-2-flutter.html) | | 3 | 建立第一個 Flutter 應用程式專案 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-3-flutter.html) | 4 | 第一支 Flutter 應用程式 - Hello World | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-4-flutter-hello-world.html) | |5| 起手式程式碼| [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-5.html) | ## 基礎容器元件 | No. | 課程名稱 | 影片 | 講義 | | --- | ------------- | -------- | -------- | | 1 | Container 大大容器 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-6container.html) | | 2 | 水平 Row 和垂直 Column 容器 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-7-row-column.html) | | 3 | Center 置中容器| [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-8center.html) | ## 基本常用元件 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | Text 文字標籤元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-9text.html) | | 2 | Button 按鈕元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-10button.html) | | 3 | Image 圖片元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-11image.html) | | 4 | TextField 文字輸入框元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-12textfield.html) | ## 跳頁&資料傳遞介紹 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | 簡單跳頁 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-13.html) | | 2 | 從A頁跳到B頁,並傳遞資料 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-14.html) | | 3 | 從B頁返回A頁並傳回資料 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-15.html) | | 4 | 傳遞整包資料 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-16.html) | ## 按鈕和提示元件 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | FloatingActionButton 漂浮按鈕 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-17floatingactionbutton.html) | | 2 | SnackBar 提示元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-18snackbar.html) | | 3 | 訊息對話框視窗 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-19.html) | ## 頁面導航元件 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | BottomNavigationBar 底部頁面導航元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-20bottomnavigationbar.html) | | 2 | TabBar 選項卡頁面導航元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-21tabbar.html) | | 3 | Drawer 抽屜面導航元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-22drawer.html) | ## 容器佈局相關元件 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | Stack 堆疊元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-23stack.html) | ## 列表佈局相關元件 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | ListView 列表元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-24listview.html) | | 2 | GridView 網格元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-25gridview.html) | | 3 | Table 表格元件 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-26table.html) | ## 資料儲存 | No. | 課程名稱 | 影片 | 講義 | | -------- | -------- | -------- | -------- | | 1 | SharedPreferences 資料存取 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2019/11/flutter-30-day-27sharedpreferences.html) | | 2 | SQLite 資料庫介紹 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2020/02/flutter-30-day-28sqlite.html) | | 3 | Sqflite 資料庫存取 | [連結](http://bit.ly/2t1SjBu) | [連結](https://tw-hkt.blogspot.com/2020/02/flutter-30-day-29sqflite.html) | 著作聲明 === 「Flutter 程式設計入門實戰 30 天」中提供所有的圖文、程式碼與影片教學,以下簡稱「本資料」。「本資料」,允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須註明出處。教學影片內容,為 HKT 線上教室製作,HKT. 侯光燦 主講。 ![](https://i.imgur.com/ePThGuF.png) 商標內容聲明 「本資料」,其中所引用之各商標及產品名稱分屬其合法公司所有,「本資料」,部分採用開放源始碼、圖文與影音等多媒體,引用自於網路,皆屬於其原作者之所有,「本資料」引用純屬介紹之用,並無任何侵權之意,特此聲明,其中內容若有不妥,或是侵犯了您的合法權益,請麻煩通知我們,我們將會迅速協助將侵權的部分移除,謝謝! *有任何問題,麻煩聯繫,謝謝。 活動演講、贊助、公益等相關商業合作邀約,聯絡請洽:粉絲團訊息 or 來信 thishkt@gmail.com ![](https://imgur.com/syT1otC.gif =200x) 贊助我們 === 創作不易,知識無價,免費線上教學就像顆種子,希望藉由您的支持與贊助,能夠無後顧之憂的日漸茁壯,努力前行堅持下去。不論捐贈金額的大小,我們都由衷的感謝每位贊助者,都是我們推廣知識、開放共享平台最大的動力! 您的捐贈將用於:請作者喝杯咖啡,鼓勵繼續創作,持續上傳教學影片與更多新技術文章。 ## Line Pay 打賞 ![](https://i.imgur.com/XJvAnoP.jpg =300x) (由 Line Pay 支付平台,提供一卡通轉帳服務) ## 街口打賞 ![](https://i.imgur.com/Yf8Asa3.png =50x) ![](https://i.imgur.com/bSFnKcl.png =300x) (由街口行動支付平台,提供轉帳服務) ## 超商代碼繳費打賞 <a href="https://p.ecpay.com.tw/F973D"><img src="https://i.imgur.com/luTrPi4.png" /></a> (由綠界科技支付平台,提供超商繳費代碼) ## 銀行轉帳打賞 銀行名稱 :玉山銀行-泰山分行 (銀行代碼808) 銀行帳號: 0602-979-092040 帳戶名稱 :侯光燦 相關連結 === ▶ HKT 線上教室 https://hkt.teachable.com/ ▶ YouTube 頻道 https://goo.gl/3f2pJi ▶ KT 線上教室 臉書粉絲團 https://goo.gl/27H9Li ▶ 贊助我們 https://goo.gl/FiKXAu

    Import from clipboard

    Advanced permission required

    Your current role can only read. Ask the system administrator to acquire write and comment permission.

    This team is disabled

    Sorry, this team is disabled. You can't edit this note.

    This note is locked

    Sorry, only owner can edit this note.

    Reach the limit

    Sorry, you've reached the max length this note can be.
    Please reduce the content or divide it to more notes, thank you!

    Import from Gist

    Import from Snippet

    or

    Export to Snippet

    Are you sure?

    Do you really want to delete this note?
    All users will lost their connection.

    Create a note from template

    Create a note from template

    Oops...
    This template is not available.
    All
    • All
    • Team
    No template found.

    Create a template

    Delete template

    Do you really want to delete this template?

    This page need refresh

    You have an incompatible client version.
    Refresh to update.
    New version available!
    See releases notes here
    Refresh to enjoy new features.
    Your user state has changed.
    Refresh to load new user state.

    Sign in

    Forgot password

    or

    By clicking below, you agree to our terms of service.

    Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in via Google

    New to HackMD? Sign up

    Help

    Documents

    Tutorials
    YAML Metadata
    Slide Example
    Book Example

    Contacts

    Talk to us
    Report an issue
    Send us email

    Cheatsheet

    Example Syntax
    Header # Header
    • Unordered List
    - Unordered List
    1. Ordered List
    1. Ordered List
    • Todo List
    - [ ] Todo List
    Blockquote
    > Blockquote
    Bold font **Bold font**
    Italics font *Italics font*
    Strikethrough ~~Strikethrough~~
    19th 19^th^
    H2O H~2~O
    Inserted text ++Inserted text++
    Marked text ==Marked text==
    Link [link text](https:// "title")
    Image ![image alt](https:// "title")
    Code `Code`
    var i = 0;
    ```javascript
    var i = 0;
    ```
    :smile: :smile:
    Externals {%youtube youtube_id %}
    LaTeX $L^aT_eX$

    This is a alert area.

    :::info
    This is a alert area.
    :::

    Versions

    Versions and GitHub Sync

    Sign in to link this note to GitHub Learn more
    This note is not linked with GitHub Learn more
     
    Add badge Pull Push GitHub Link Settings

    Version named by    

    More Less
    • Edit
    • Delete

    Note content is identical to the latest version.
    Compare with
      Choose a version
      No search result
      Version not found

    Feedback

    Submission failed, please try again

    Thanks for your support.

    On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

    Please give us some advice and help us improve HackMD.

     

    Thanks for your feedback

    Remove version name

    Do you want to remove this version name and description?

    Transfer ownership

    Transfer to
      Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

        Link with GitHub

        Please authorize HackMD on GitHub

        Please sign in to GitHub and install the HackMD app on your GitHub repo. Learn more

         Sign in to GitHub

        HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.

        Push the note to GitHub Push to GitHub Pull a file from GitHub

          Authorize again
         

        Choose which file to push to

        Select repo
        Refresh Authorize more repos
        Select branch
        Select file
        Select branch
        Choose version(s) to push
        • Save a new version and push
        • Choose from existing versions

        Pull from GitHub

         
        File from GitHub
        File from HackMD

        GitHub Link Settings

        File linked

        Linked by
        File path
        Last synced branch

        Danger Zone

        Unlink
        You will no longer receive notification when GitHub file changes after unlink.

        Syncing

        Push failed

        Push successfully