Flutter for a very beginner

更新 發佈閱讀 5 分鐘

Introduction

Flutter is a powerful framework for developing the app for different platforms without redevelopment.

Although I still want to use Vue and Django as the main skill in my full-stack career, I think it’s a good idea to learn Flutter as my secondary skill due to the main idea of Flutter being quite attractive.

Set up for windows desktop app development

To concentrate learn Flutter, I convinced my team to develop a windows desktop app. Therefore, I can learn Flutter at work.

The set-up is quite simple, just follow the “Get started” of the document.

raw-image

main.dart

main.dart is the entry point of your app, which is located at your-project/lib.

material is the default UI component library for Flutter. Basically, we would import ‘package:flutter/material.dart’; in every dart file.

The runApp in main() is to decide how to run this app. We create MyApp for example. We should return a MaterialApp in it to create an app.

route

routing map

Let’s add the routing settings for this app.

Add routes in MaterialApp , and define the URL to which page. I prefer to write the different pages in each dart file. For example, I define the HomePage() in home.dart and import it from above. Then set the URL for it in routes .

initialRoute is which page would show when this app is opened.

pushNamed

In home.dart

we could use Navigator.pushNamed to go to another URL.

MaterialAPP & Scaffold

To build an app, we need to build a MaterialAPP . To write a page, we need to write it in a Scaffold .

That’s what I learn so far. Maybe what I write above is not perfect, but I think it’s still useful for a beginner.

留言
avatar-img
留言分享你的想法!
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2023/01/09
最近想把我的 Switch OLED 帶出門,在挑什麼 Switch 攜帶包比較好,看很多人都推薦 tomtoc,感覺評價挺不錯的,最後決定入手 tomtoc 的玩家首選旅行包 以 Switch OLED 來說有三種選擇...... https://zjzhang.org/post/nintendo
2023/01/09
最近想把我的 Switch OLED 帶出門,在挑什麼 Switch 攜帶包比較好,看很多人都推薦 tomtoc,感覺評價挺不錯的,最後決定入手 tomtoc 的玩家首選旅行包 以 Switch OLED 來說有三種選擇...... https://zjzhang.org/post/nintendo
2022/12/14
Cache categories There are two kinds of cache, one is the read-only cache, and the other one is the read-and-write cache.
2022/12/14
Cache categories There are two kinds of cache, one is the read-only cache, and the other one is the read-and-write cache.
2022/10/13
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
2022/10/13
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
看更多
你可能也想看
Thumbnail
本課程介紹了如何建立第一個 Flutter 應用程式。學習內容包括匯入 Flutter 套件、定義主函數、建立無狀態的 Widget 類別 MainApp,以及使用 Scaffold 和 Center 來組織 UI 元件。最終,學員能夠編譯並執行一個顯示「HKT 線上教室」的簡單應用程式。
Thumbnail
本課程介紹了如何建立第一個 Flutter 應用程式。學習內容包括匯入 Flutter 套件、定義主函數、建立無狀態的 Widget 類別 MainApp,以及使用 Scaffold 和 Center 來組織 UI 元件。最終,學員能夠編譯並執行一個顯示「HKT 線上教室」的簡單應用程式。
Thumbnail
本文介紹建立第一個 Flutter 應用程式的方法。包括打開 Visual Studio Code 建立專案,在 iOS、Android 模擬器及真實設備、Web 和桌面環境運行的步驟。成功建立是重要里程碑,可探索更多功能,持續練習提升技能。
Thumbnail
本文介紹建立第一個 Flutter 應用程式的方法。包括打開 Visual Studio Code 建立專案,在 iOS、Android 模擬器及真實設備、Web 和桌面環境運行的步驟。成功建立是重要里程碑,可探索更多功能,持續練習提升技能。
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
前言 當今時代,遊戲已經不再只是單純的娛樂,更成為人們生活中不可或缺的一部分。隨著技術的發展,遊戲也從單機遊戲轉變成網路遊戲、手機遊戲、虛擬實境(VR)遊戲等多種形式。Flutter 作為一種跨平台的開發框架,正逐漸成為開發遊戲的一個重要工具。本系列文章將以「輕鬆入門 Flutter 遊戲開發」為題
Thumbnail
前言 當今時代,遊戲已經不再只是單純的娛樂,更成為人們生活中不可或缺的一部分。隨著技術的發展,遊戲也從單機遊戲轉變成網路遊戲、手機遊戲、虛擬實境(VR)遊戲等多種形式。Flutter 作為一種跨平台的開發框架,正逐漸成為開發遊戲的一個重要工具。本系列文章將以「輕鬆入門 Flutter 遊戲開發」為題
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專案中的流程與執行畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News