# 初見 Flutter !!! --- ## 到底Flutter是啥米碗糕?? ---- 你應該已經知道的事情 : * Flutter可以做App * Flutter可以跨平台 * Flutter好猛好猛又好猛 但如果你是新手，可能還是不太懂它到底在幹嘛 ---- ## Flutter == 建立App的工具包 ---- ### 舉例 : 蓋房子 要蓋一棟房子，我們需要 : * 槌子? * 鋸子? * 板手? ---- 但是肯定不會重頭製作這些工具吧? Flutter也是，而這些工具就叫做`Widgets` --- ## Widget的使用 ---- 1. 在 Flutter 中，一切都是Widget。(UI、佈局...) 2. 所使用的 Widget 也是由其他Widget所建立。 ---- 一本書的元素是...?  ---- Widget 也是喔 !!  --- ## 簡單的開始 ---- Flutter App的開始，就如同其他語言一樣 : 1. 引入library 2. main function ---- ```import 'package:flutter/material.dart';``` 這個library涵蓋大部分需要的Widget，以及Flutter需要用到的東西。 ---- 程式的起點 : ```dart= void main() { runApp(這裡要放一個Widget); } ``` * runApp 是一個頂級函式。 * runApp 會接收一個Widget作為Widget Root 但是塞在一起好像不好維護? --- ## 創造自己的Widget - 廢話篇 ---- 官方已經定義好啥是Widget了，所以創造Widget的方法，就是透過class的繼承特性實現 等等，痾...，啊什麼是`class` ---- ### Flutter 中可能會用到的class觀念 1. class 類別 2. constructor 建構子 3. methods 方法 4. extends 繼承 5. override 覆寫 ---- ### class 類別 `class`就是一個模板/藍圖 以汽車作為class比喻 => 定義甚麼是汽車 一台「汽車」有品牌、顏色、速度等屬性，並且可以加速或煞車。 ---- ### constructer 建構子 車子落地時的初始狀態(由參數決定) * 顏色 : 紅色 * 品牌 : BMW ---- ### method 方法 車子的能力 * 加速 * 減速 * 按喇叭 ---- ### extends 繼承 電動車是車子 ---- ### override 覆寫 電動車 跟 車 有`類似`的功能延伸 : * 不能無限制加速 * 按喇叭有奇怪的音樂? ---- ### 另一個不得不提的玩意兒 ~ State 簡單來說，State 就是在任一時間點更新UI所需的任合資料。 ---- 舉個小栗子  ---- ## 1. 電源控制 ---- ## 2. 消失的蛋糕  https://www.youtube.com/shorts/0d0Ea0a1XDE --- 好像講了一堆東西? 需要消化一下嗎? (`10 分鐘`)  有問題都可以問幹部喔~ --- ## 創造自己的Widget - 正題篇 ---- 官方定義的主要父類Widget : 1. StatelessWidget 2. StatefulWidget 既然官方已經定義好了，我們繼承他們就對了 ---- 起手式 : ```dart= class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context){ return MaterialApp( title: 'My First Flutter App', home: MyHomePage(), ); } } ``` ---- MyHomePage Widget ```dart= class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: const Text("Here is AppBar"), backgroundColor: Colors.blue, ), body: TestWidget(), ); } } ``` ---- 先將 TestWidget 設為 Stateless ```dart= class TestWidget extends StatelessWidget { TestWidget({super.key}); @override Widget build(BuildContext context){ return ; } } ``` ---- 設定 TestWidget 的模板 ```dart= Column( children: [ Row( children: [ Checkbox(value: value1, onChanged: (bool? newValue){} ), Text("第一項清單"), ], ), Row( children: [ Checkbox(value: value2, onChanged: (bool? newValue){} ), Text("第二項清單"), ], ), ], ) ``` ---- 增加需要的變數 ```dart= var value1 = false; var value2 = false; ``` 跑跑看吧(存檔或者是按閃電符號)! ---- 你應該要看到的東西 :  --- 實作時間~ 試著寫看看吧 `10 分鐘`  --- 有沒有發現哪裡怪怪的? 對，按鈕不能點 是甚麼原因呢 ? ---- 啊 ~ 一定是因為我們沒有重新附值啦 ~ 讓我們改一下 ```dart= Checkbox(value: value1, onChanged: (bool? newValue) { value1 = newValue!; }) ``` ---- 如果你比較心急，已經嘗試過了，你會發現一件事 ---- 是的  還是不能勾選 ---- ### State 快速切換方式 將滑鼠游標移動到 TestWidget ， 點選 Show Context Action ，轉換成StatefulWidget  ---- 使用 setState 刷新數據 ```dart= setState(() { checkVal1 = newValue!; }); ``` 再試看看吧! --- ## StatelessWidget ## vs ## StatefulWidget ---- 前面已經講過 State 的觀念了，觀察一下兩邊的寫法有何不同? ---- ### StatelessWidget ```dart= class MyWidget extends StatelessWidget { const MyWidget({super.key}); @override Widget build(BuildContext context) { return const Placeholder(); } } ``` StatefulWidget呢? ---- ### 改變了甚麼 ? 1. 標籤 2. 建構方法位置 讓我們看一下程式碼 ---- ```dart= class MyWidget extends StatefulWidget { const MyWidget({super.key}); @override State<MyWidget> createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { @override Widget build(BuildContext context) { return const Placeholder(); } } ``` 眼尖的你或許注意到了，`建構方法` 位於`State` 物件 ---- 因此，只需要呼叫`setState`就可以刷新對應的UI，而不需要重新 run app ----