iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
2
Mobile Development

Flutter 從零開始,Android、iOS一次搞定。系列 第 3

[Day 3] Flutter 基礎架構介紹

Flutter 是基於 Material Design,由Google開發的設計語言。

基礎架構介紹

還記得我們昨天辛苦建置的環境嗎?
還有我們也開啟了我們第一個 Flutter 專案,今天就是要帶大家看一下第一個專案結構。

在 Flutter 我們所有的東西都叫做 Widget。
我們的 App 就像是一棵樹,不斷的長出新芽,形成我們的 App。
讓我們來看看昨天建立的專案有哪些 Widget 組成的吧!

從上圖就可以看出,我們的初始專案,是不是長得很像樹呢?

整體上一個簡單的 App 就大致上是如此。

我們也可以看到,MyApp 這個 Widget 繼承了 StatelessWidget,而 MyHomePage 繼承了 StatefulWidget,他們的差別在於 StatelessWidget 它不能存取狀態,而 StatefulWidget 可以,就這們簡單而已。

我們可以看到,在 MyHomePage 為了計算 count 所以使用了,StatefulWidget 來存取狀態。

StatelessWidget:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Visual Studio Code 快速打法: stl + [enter | tab]

StatelfulWidget:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Visual Studio Code 快速打法: stf + [enter | tab]


上一篇
[Day 2] Flutter 環境建置
系列文
Flutter 從零開始,Android、iOS一次搞定。3
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言