

[筆記資源](https://niiuu.notion.site/Flutter-e623d577622a4013916e42723e40fdcf)
---
裡頭整理了一些可學習的資源和我們的學習筆記

[DartPad](https://dartpad.dev/?)
---
網頁版的Dart編譯環境

[Flutter 介紹](https://flutter-onepiece.notion.site/1-1-Flutter-c16b807300f741eba9abbc485c4d5acb)
---
介紹Flutter的各種事

```dart=
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'GDSC Flutter App',
        theme: ThemeData(
          useMaterial3: true,
        ),
        home: const Resume());
  }
}

class Resume extends StatelessWidget {
  const Resume({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.lightBlue,
        foregroundColor: Colors.grey.shade200,
        title: const Text(
          'Information',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 72.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 50),
            const Center(
              child: CircleAvatar(
                backgroundColor: Colors.black38,
                radius: 83,
                child: CircleAvatar(
                  backgroundImage: NetworkImage(
                    'https://i.imgur.com/sAipZnI.jpg',
                  ),
                  radius: 80,
                ),
              ),
            ),
            const SizedBox(
              height: 50,
            ),
            Text(
              'Name',
              style: TextStyle(
                  color: Colors.grey.shade600,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ),
            Text(
              'GDSC',
              style: TextStyle(
                  color: Colors.yellow.shade800,
                  fontSize: 28,
                  fontWeight: FontWeight.bold),
            ),
            const SizedBox(
              height: 50,
            ),
            Text(
              'Website',
              style: TextStyle(
                  color: Colors.grey.shade600,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ),
            Text(
              'Gdsc.Ilan.com',
              style: TextStyle(
                  color: Colors.yellow.shade800,
                  fontSize: 28,
                  fontWeight: FontWeight.bold),
            ),
            const SizedBox(
              height: 50,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Icon(
                  Icons.email,
                  size: 30,
                  color: Colors.grey.shade700,
                ),
                const SizedBox(
                  width: 8,
                ),
                const Text(
                  'gdsc.niu@gmail.com',
                  style: TextStyle(
                      color: Colors.black45,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      letterSpacing: 1),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

```

以下開放共筆
---
### 結果幫我貼到這下面
範例
![](https://i.imgur.com/5Fza164.png)
![](https://i.imgur.com/LtC8Qh7.png)
![](https://i.imgur.com/MckVNQt.png)
![](https://i.imgur.com/hWgbzvm.png)
![](https://i.imgur.com/pjP7xek.png)
![](https://i.imgur.com/XM1k3kU.png)
![](https://i.imgur.com/9wFeigT.png)
![](https://i.imgur.com/N9bODMy.png)






















































&lt;style&gt;
    .navbar-brand:before {
        content: 'GDSC NIU × ' !important;
        padding-left: 2em;
        background-image: url(https://logogen.dscasu.com/logos/gdsc-logo.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .navbar-brand &gt; .fa-file-text {
        display: none;
    }
    .red{
        color:#F00;
        font-weight: bold;
    }
&lt;/style&gt;

由社群成員一同整理的 Flutter 學習資源。

Flutter 學習資源



[筆記資源](https://niiuu.notion.site/Flutter-e623d577622a4013916e42723e40fdcf)
---

## UI / UX
**UI：USER INTERFACE 使用者介面
UX：USER EXPERIENCE 使用者體驗**

看的到的是UI，像是介面設計，抱括按鈕、圖示、排版、間距等設計。
體驗到的是UX，像是功能使用上的互動，能不能有良好的體驗。


兩者皆需要註冊帳號
[Figma官網](https://www.figma.com/)
[Flutter Flow 官網](https://flutterflow.io/)

[沒有好或壞的UI](https://hahow.in/contents/articles/60643d6526c9ad7b36be286a)
[Figma好處](https://hahow.in/contents/articles/609232fc4dd9f8ab3c4f1bc7)


## OOP
[codelabs](https://developers.google.com/codelabs/from-java-to-dart?index=..%2F..index#1)
**物件導向**是一種在設計程式的一種方式
但不是每一種程式語言都有這種概念
像是**C語言**就沒有，但在這之上的
**C++、Objective-C**就有物件導向
其他如 **Java**以及等等要介紹的 **Dart**

最容易判斷是不是物件導向只要認得
**Class 類別**這個概念

[DartPad](https://dartpad.dev/) 使用線上編譯器來學習吧
![](https://i.imgur.com/EgyME96.png)

![](https://i.imgur.com/ZHfa4jM.png)


Dart 沒有 Private 屬性
要設定唯獨變數要在變數名稱前面加底線`_`
例如 `String _name;`

在呼叫類別的時候，建構子引數可以直接使用 `this`
快速指定變數到類別中

在實力化物件的時候可以省略 `new` 關鍵字

[其他更詳細的介紹](https://ithelp.ithome.com.tw/articles/10265940)

## ROUTE
路由有兩種，一種是直接呼叫介面；另一種是幫每一頁命名

### 步驟

1. 創建兩個頁面，分別為 'first_screen.dart' 與 'second_screen.dart'，參考下方的程式，建立Widget的基本架構
![](https://i.imgur.com/lZpJN4z.png)

#### 第一個頁面

```dar=
import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
          //TODO
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}
```

### [這個筆記裡有BTN的介紹](https://niiuu.notion.site/Lesson-3-2c0a93ef7a664614b979a8d2f55908e1)

#### 第二個頁面

```dar=
import 'package:flutter/material.dart';

// 第二個頁面
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  //TODO

    return Scaffold(
        appBar: AppBar(
          title: const Text('Second Screen'),
        ),
        body: Column(
          children: [
            //TODO
            Center(
              child: ElevatedButton(
                onPressed: () {
                  //TODO
                },
                child: const Text('Go back!'),
              ),
            ),
          ],
        ));
  }
}
```
**`標記TODO的地方，請暫時忽略它，稍後將繼續完善裡面的程式`**

**以下方法是定義路由名稱跳轉的方式**

2. 在 'main.dart' 中定義路由
![](https://i.imgur.com/T9BmViH.png)
3. 在 'first_screen.dart' 中的 **onPressed** 使用 **Navigator.pushNamed()** 跳轉到頁面二
![](https://i.imgur.com/y74nsy6.png)
4. 在 'second_screen.dart' 中的 **onPressed** 使用 **Navigator.pop()** 返回頁面一
![](https://i.imgur.com/oP3nmPI.png)

5. 讓我開始頁面間傳送一些參數，我們想要傳送三個東西分別為 ID, Title, Imgurl 到第二個頁面，我們需要在頁面一 'first_screen.dart' 中定義要傳入的參數
![](https://i.imgur.com/2mneT9X.png)

6. 在第二個頁面 'second_screen.dart' 定義這些要傳入的參數
![](https://i.imgur.com/8hBintY.png)

7. 我們可以使用這些參數了，我們用 Text 與 Image 配合 Column 來顯示傳進來的內容
```dar=
import 'package:flutter/material.dart';

// 第二個頁面
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final routeArgs =
        ModalRoute.of(context)?.settings.arguments as Map&lt;String, String&gt;;
    final categoryTitle = routeArgs['title'];
    final categoryId = routeArgs['id'];
    final categoryImg = routeArgs['imgUrl'];

    return Scaffold(
        appBar: AppBar(
          title: const Text('Second Screen'),
        ),
        body: Column(
          children: [
            Text(categoryTitle ?? 'Nothing from the screen one'),
            Text(categoryId ?? '?'),
            Image.network(categoryImg ?? ''),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  // 通過從堆疊弹出當前路由
                  Navigator.of(context).pop();
                },
                child: const Text('Go back!'),
              ),
            ),
          ],
        ));
  }
}
```
`🧠 Text、Image、Column 的用法，上次已經介紹過，忘記的請參考之前的筆記`

### 完整程式 [DartPad 可以直接點這裡看](https://dartpad.dev/?id=42073ff6d86dc88cc243f2049e0d65de)

1. first_screen.dart
```dart=
// import 'package:flutter/material.dart';
// 在AndroidStudio中記得要 import material(上面這行)

// 第一個頁面
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用命名路由跳轉到第二個界面
            Navigator.of(context).pushNamed(
              '/second', // 第二頁名稱
              arguments: {
                'id': 'Krabby Patty',
                'title': 'From Screen One',
                'imgUrl': 'https://i.imgur.com/sbOoRM2.gif',
              }, // 傳參數到下一頁
            );
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}
```
2. second_screen.dart
```dart=
// import 'package:flutter/material.dart';
// 在AndroidStudio中記得要 import material(上面這行)

// 第二個頁面
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final routeArgs =
        ModalRoute.of(context)?.settings.arguments as Map&lt;String, String&gt;;
    final categoryTitle = routeArgs['title'];
    final categoryId = routeArgs['id'];
    final categoryImg = routeArgs['imgUrl'];

    return Scaffold(
        appBar: AppBar(
          title: const Text('Second Screen'),
        ),
        body: Column(
          children: [
            Text(categoryTitle ?? 'Nothing from the screen one'),
            Text(categoryId ?? '?'),
            Image.network(categoryImg ?? ''),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  // 通過從堆疊弹出當前路由
                  Navigator.of(context).pop();
                },
                child: const Text('Go back!'),
              ),
            ),
          ],
        ));
  }
}
```

3. main.dart
```dart=
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',

      // 使用“/”命名路由来啟動程式
      // 在這裡，程式將從 FirstScreen Widget 啟動
      initialRoute: '/',

      //'***名稱***': (context) =&gt; const ***頁面 Widget 名稱***
      routes: {
        '/': (context) =&gt; const FirstScreen(),
        '/second': (context) =&gt; const SecondScreen(),
      },
    );
  }
}
```

`print(A ?? B)`=&gt; 
if A == NULL print(B)
else print(A)
[影片詳細教學](https://www.youtube.com/watch?v=Lq4yBH7fATI)


[导航到对应名称的 routes 里 | Flutter 中文文档 | Flutter 中文开发者网站](https://flutter.cn/docs/cookbook/navigation/named-routes) 
（更多跳轉參數）

[Flutter中管理路由栈的方法和应用 - 知乎](https://zhuanlan.zhihu.com/p/56289929)

[路由管理 | 《Flutter实战·第二版》](https://book.flutterchina.club/chapter2/flutter_router.html#_2-4-1-%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%A4%BA%E4%BE%8B)

---
`main.dart`
```dart=
import 'package:flutter/material.dart';
import 'package:route/second_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: {
        '/': (context) =&gt; const FirstPage(),
        '/second': (context) =&gt; const SecondPage()
      },
      theme: ThemeData(   // 設定不同的主題讓UI更好看
          primarySwatch: Colors.blue,
          appBarTheme: const AppBarTheme(color: Colors.amber),
          useMaterial3: true),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blueAccent,
              foregroundColor: Colors.white),
          onPressed: () {
            // 使用 MaterialPageRoute 跳轉頁面
            // Navigator.of(context)
            //     .push(MaterialPageRoute(builder: (context) =&gt; SecondPage()));

            // 使用命名規則跳轉 並傳入 List argument
            Navigator.of(context).pushNamed('/second',
                arguments: ['青麥香', '彩虹堂', '金香堡', '莫尼', '緣來', '尼好']);
          },
          child: const Text('Go To Second Page'),
        ),
      ),
    );
  }
}

```

`second_page.dart`
```dart=
import 'dart:math';

import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  State&lt;SecondPage&gt; createState() =&gt; _SecondPageState();
}

class _SecondPageState extends State&lt;SecondPage&gt; {
  int random = 0; // 定義 random index 變數

  @override
  Widget build(BuildContext context) {
    // 接收傳入的變數 指定為 List 型態
    final routeArgs = ModalRoute.of(context)!.settings.arguments as List;

    return Scaffold(
      appBar: AppBar(
        title: const Text('早餐吃什麼？'),
      ),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
              border: Border.all(width: 5, color: Colors.black87),
              borderRadius: BorderRadius.circular(24)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // Column 置中參數設定
            children: [
              Text(
                routeArgs[random]!,
                style:
                    const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 24,
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    backgroundColor: Colors.purple,
                    foregroundColor: Colors.white),
                onPressed: () {
                  // Navigator.of(context).pop(); // 關閉 SecondPage()
                  setState(() {
                    random = Random().nextInt(routeArgs.length);
                  });
                },
                child: const Text('Random', style: TextStyle(fontSize: 18),),
              ),
              Text('BXXXXXXX GDSC NIU')
            ],
          ),
        ),
      ),
    );
  }
}
```
---

## 成果幫我截圖放這裡！！
範例
![](https://i.imgur.com/uKbuJ05.png)




![](https://i.imgur.com/uS49Bp8.png)
![](https://i.imgur.com/doSH0Nf.png)
![](https://i.imgur.com/cw2B1O8.png)
![](https://i.imgur.com/8GAazLW.png)



Flutter 中的物件導向和路由



## 構建APP
先來簡單說明一下，在手機APP開發中，會選擇的幾種開發方式

第一種是Native原生開發
大家都知道手機有分IOS與Android兩大平台，平台會分別推出自己的開發工具使用不同的語言開發，而且各自有自己的生態環境。

第二種是使用製作網頁的方式
把需要的功能打包好成一個APP，透過內置的瀏覽器在手機上呈現，那網頁會用甚麼語言撰寫呢？網頁開發是競爭非常激烈的領域，除了基礎的HTML/CSS/JS外，會搭配各種前端框架，加速開發的過程。

第三種
是使用專門為跨平台開發而生的框架，都各自有自己完整的系統，Flutter使用Dart語言而React Native用JS開發。

## 跨平台
對於小型的開發專案，要維護兩套程式，是不太可能的任務，想要快速的完成專案，選擇跨平台框架是最好的選擇，對於網頁開發與JS非常熟悉的人React Native是個好選擇，其開發的流程與網頁相似，如果你從沒接觸過網頁，那我推薦你試試Flutter。

## 為什麼選擇 Flutter
為什麼會選擇Flutter呢？除了他跨平台能力強、性能優惠、文檔豐富外，對於剛接觸手機開發來說，他是目前最熱門app開發框架之一，所以無倫是中文與英文都能找到，最新且系統性的教學資源，以原生Android開發為例，他出現的時間很長，在不同版本之間的差異很大，在學習初期找資料的時候，很難去分辨哪些用法是過時的，對於想開發一個小型應用的新人來說，這樣的環境很不友善，容易造成學習的無力感。

## Flutter 學習門檻
Dart 既保有像 Java 一樣注重型別安全且保有相似的物件導向特性，但語法卻JavaScript 與 Python 一樣簡潔直觀，對於學過 Java、JavaScript、Python 的人來說，你一定能快速上手。

如果你從沒學過程式語言，從零開始本來就不是一件簡單的事，但選擇 Dart 作為你的入門磚，我覺得是一項很好的決定，Dart 規範的語法方式，可以幫助你熟悉物件導向等重要的程式觀念，這些知識一旦掌握，未來想學其他語言，你會更輕鬆。

## Material Design
說了這麼多特性，大家一定很好奇，用 Flutter 寫出來的 APP 會長怎樣呢? 每款 APP 都會有自己的 UI 風格，如果你對於設計不太擅長，也不排斥原生 Android 的設計樣式，你可以採用 Material Design 這套設計標準作為你 UI 的主要風格 Material Design 為 Google 在設計上的一種規範，注重卡片式的設計與強烈的色彩對比，區分訊息間的邏輯，許多主流的APP都採用這種設計風格，如果你使用 Flutter 開發，所有的 UI 組件預設就是 Material 的風格，只要在排版與顏色上用心
，就可以設計出外觀專業的帶有現代感的APP。

## 我要如何開始
如果你有開發經驗透過官方的文檔與我們整理的資源(我會把資源分享在Discord)，你會知道該如何開始。

對於無開發經驗的夥伴，不用擔心除了自學外，我們安排了幾次關於分享Flutter技術的讀書會，將帶領大家實作一些小作品，在學習上有任何問題，都歡迎在Discord上發問，我們一直都在。

https://niiuu.notion.site/niiuu/Flutter-e623d577622a4013916e42723e40fdcf


Flutter 跨平台能力強、性能優惠、文檔豐富外，是目前最熱門app開發框架之一。

關於 Flutter


日期：8/27 (六)
時間：20:00
地點：[Google Meet](https://meet.google.com/txw-sdeb-njk)
聯絡我們：[Instagram](https://www.instagram.com/gdsc.niu/)、[Facebook](https://www.facebook.com/gdsc.niu/)、[Discord](https://discord.com/invite/rWNg2fbH)
表單連結：[點此](https://linktr.ee/gdscniu)

## 什麼是 GDSC？
GDSC 全名 Google Developer Student Clubs，是由 Google 所支援，並鼓勵學生在校園建立社群，一同開發、推廣相關技術 (Google)，成為彼此學習、交流的一個管道，同時提供相關資源和幫助。
[GDSC官方網站](https://developers.google.com/community/gdsc)

## 我適合參加嗎？
我們預計招募幾位社群成員，只要是對學習新技術抱有熱忱，都非常歡迎加入。就算完全沒有開發經驗也可以，不用擔心自己能力會比別人差，我們也是從零開始，慢慢學習的人。這裡都是一群有著相同興趣的人，彼此交流、學習，互相砥礪成長。或是你不想寫程式但對經營社群感興趣，對設計、排版、美宣有些想法的話，我們也非常需要這樣的人。

## 社群如何運作？
目前規劃的活動有**讀書會**、**工作坊**、**課程**。
**讀書會**：自發性自主學習的小聚會。
**工作坊**：動手完成作品、專案製作。
**課程**：Google技術人員、講師授課。

期間也會有其他 Google 舉辦的活動，
像是：Google Summer boot camp, Annual GDSC Solution Challenge, etc...

## 我需要做什麼？
社群內每周會舉辦一次讀書會，學習自己感興趣的主題，並根據感興趣的主題分組，讓學習更有效率，每組可以將學習成果製作成一個專案，並舉辦工作坊，教導完全不會的人學會這項技術，更能確定自己是否透徹這項技術。

當然，如果你對社群經營有想法，或是有任何天馬行空的意見，都歡迎提出來，社群成員沒有什麼上下關係，要如何舉辦活動和運作社群都是可以大家一起討論的。

    參加 GDSC 的成員需確保未來一年不會中途退出。
    積極地參加社群活動，參與讀書會，和伙伴們討論、交流。
    
## 福利
- 免費 Google 講師、教材及資源
- 可以得到 Google 相關紀念品
- Google Summer boot camp 報名資格
- 增廣見識，和其他學校的 GDSC 交流

## Q&amp;A
&gt; Q: 活動時間？
&gt; A: 一整個學期

&gt; Q: 我不會寫程式怎麼辦？
&gt; A: 就算你完全不會也可以加入，這裡就是讓你學習的地方，我們也很樂意提供幫助。

&gt; Q: 加入後有什麼要求？
&gt; A: 我們只要求加入後一年內不中途離開，但鼓勵每個人至少舉辦一次工作坊。

&gt; Q: 為什麼沒在學校系統看到這個社團？
&gt; A: 我們位在學校申請社團，所以只能算是地下社團。

&gt; Q: 不參加社群可以參加工作坊嗎？
&gt; A: 可以。社群是提供大家討論、交流的地方。工作坊則可以另外參加。

&gt; Q: 

## 學習新技能

軟實力
&gt; 團隊合作的溝通

程式能力
&gt; C/C++
&gt; Python
&gt; Javascript
&gt; Dart
&gt; C#/unity
&gt;&gt; 資料結構、演算法
&gt;&gt; 熟悉基礎語法if for...
&gt;&gt; 有物件導向的概念
&gt;&gt; git使用
&gt;&gt; ide 選擇

Flutter
&gt; 與Native的差異
&gt; 跨平台開發
&gt; 社群的成果
&gt; 宜大學生app、枕頭山
&gt; 宜大地圖(Android java)

Web開發
&gt; css html js

前端
&gt; VUE, React
&gt; 
後端
| 框架 | 語言 |
| -------- | --------
| Django | Python
| Express | Javascript

AI
&gt; data mining
&gt; ML, DL
&gt; scikitlearn
&gt;&gt; Tensorflow
&gt;&gt;  使用預訓練模型
&gt;&gt;  可應用的領域
&gt;&gt;  影像辨識 肢體動作 NLP語言處理 資料預測...
&gt;&gt;  水果大王

雲端運算：GCP

Defi, blockchain, Web3, NFT

資訊安全...

籌備工作坊
&gt; 我的個人履歷 - WEB
&gt; 美食大挑戰 - APP
&gt; 跟著我動一動 - Google MediaPipe




一同開發、推廣相關技術 (Google)，成為彼此學習、交流的一個管道，同時提供相關資源和幫助。

All Posts