ceeyu / Not3_Project

flutter系列

tags: flutter

壹、flutter相關鐵人賽

• iOS Developer Learning Flutter
• 30 Days of Flutter (Day1): 學習如何在 Macbook Air M1 上安裝 Flutter
• Flutter---Google推出的跨平台框架，Android、iOS一起搞定
• Flutter 30: from start to store
• 從零開始的Flutter世界
• Dart 語言 - 開啟 Flutter 的鑰匙
• 「Google Flutter」學習筆記
• 30天手滑用Google Flutter解鎖Hybrid App成就

貳、flutter Tutorial

• 《Flutter实战·第二版》

• Flutter Formosa

參、Widget相關

• Flutter Samples

• Basic widgets

Widget Catalog

• 可以看到更大框架的layout或套件種類

Widget catalog

• Widget Tree

input label

input label

List

List view.builder 是給"大量"垂直資料的 Day 24：ListView 列表元件

Listile

• 用"leading: "可以加icon

• 參考資料: Listile Tutorial

Drawer 參考

• Menu選單-Drawer & Routes

  • Github

• GeeksForGeeksAdvanced範例

Flutter – CircleAvatar Widget

• 參考Docs: CircleAvatar

CupertinoSwitch

• 參考Docs:CupertinoSwitch
• 自己Github的官方CupertinoSwitch Demo Code實踐

「對齊」相關

flutter layout concepts

Basic Flutter layout concepts

Align

• 針對一個Widget的對齊

How to align single widgets in Flutter?

Spacer()

• 類似網頁設計的< br >

FLUTTER | Right Align not working

• 呈現效果

Wrap()

• 可設定固定間隔的space

FLUTTER | Right Align not working

Padding

• Flutter – Padding Widget，會將物件的周圍留空白

肆、線上編譯器"Dartpad"

伍、Package

• pub.dev

dropdown_search 5.0.6

1. 新增dependency
2. 輸入import 'package:dropdown_search/dropdown_search.dart'

• dropdown_search 5.0.6

Dio

1. 輸入: dart pub add dio，在dependency新增latest version

2. 在專案中新增import 'package:dio/dio.dart';

• Dio Dropdown Github

陸、實機執行

• 如何將 flutter 執行在模擬器與實機上

• Where in Settings can I allow apps from a developer (myself)

柒、學習紀錄

位置相關

• leading: 左上角，在Appbar()裡面

• action: 右上角，在Appbar()裡面

• drawer: 左上角，且在appbar()外面

Cookbook範例Cookbook

• Snackbar: Display a snackbar

• TapBars Demo: Work with tabs

屬性相關

• elevation: 陰影(0:無陰影~100:很深陰影)

玖、意外設定

載package

• 開發人員模式: 在載"google_fonts"時更改
  • google_fonts: Package頁面
  • Export fonts from a package: Cookbook教學使用
  • Goole Fonts頁面

• 直接用指令開啟並由UI介面按下開發人員專用的方式

• yaml裡面的更動

  • (1)先去google font載想要的fonts
  • (2)將檔案放到project的yaml裡面(目前自己叫awesome_project)
  • (3)在需要的檔案裏面import
  • (4)使用fonts

• Downloads頁面

• 載完family畫面

• yaml圖片

• import頁面

• 使用畫面

拾、Samples

• Web Sockets Sample文件

拾壹、動畫系列(Animation and motion)

• 參自Animation and motion widgets

Animated Align

動動前	按一下動動後

• Animation Alignment Widgets(線性動動) Docs
• 自己Github的官方Animation Alignment Demo Code實踐

AnimatedBuilder

• AnimatedBuilder (旋轉動動) Docs
• 自己Github的官方AnimatedBuilder Demo Code實踐

AnimatedContainer

動動前	按一下動動後

• AnimatedContainer (Container動動) Docs
• 自己Github的官方AnimatedContainer Demo Code實踐

拾貳、Asynchonous相關

參自Async widgets

FutureBuilder

等待前	等待後

• FutureBuilder 官方Docs
• 自己Github的官方FutureBuilder Demo Code實踐

StreamBuilder

等待	第一型	第二型

• StreamBuilder 官方Docs
• 自己Github的官方StreamBuilder Demo Code實踐

拾貳、官方範例running

github flutter/website/examples/layout/

• running範例

• 結束後再修改lib內的文件到對應example

flutter gallery

• 特色

• 安裝步驟:

  1. flutter channel master
  2. flutter upgrade
  3. cd gallery-main
  4. flutter pub get
  5. flutter run

• 安裝完畫面

Github: flutter gallery