Flutter 學習筆記

介紹

Google 在 2017 年發表 Flutter。
使用 Dart 語言的原因：Hot Reload 功能。

變數

var 根據內容自動決定型態
dynamic 可以儲存任何型態
const 宣告後不可再改，
final 宣告後不可再改，
string 可以用 ‘ 或 “

Windows 環境建置

Git
WinRAR
Flutter SDK：安裝在 C:\flutter → 編輯系統環境變數 (Path – C:\flutter\bin)。
Android Studio：安裝 Flutter 插件 (Font: 18、Flutter – Format code on save)。
JDK 11
【Google Drive 備份】

DEBUG

debugShowCheckedModeBanner: false,

Scaffold

    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('My App')),
        body: const Text('Hello World'),
      ), // Scaffold
    ), // MaterialApp

AppBar

centerTitle: true,

AssetImage

1. 在 Project 下創建 images 資料夾，放圖片進去。
2. pubspec.yaml：assets: – images/。
3. Packages get。

Image(image: AssetImage('')),

App Icon

右鍵 Project → Flutter → Open Android module → New Window → 右鍵 res → New → Image Asset。

Hot Reload

stless → MyApp。

Container

as big as possible.
SafeArea：Alt+Enter → Wrap with widget → widget 命名改成 SafeArea。

Margin(外邊距)/Padding(內邊距)

EdgeInsets.all(10.0),
EdgeInsets.symmetric(vertical: 50.0, horizontal: 10.0),
EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),
EdgeInsets.only(left: 10.0),

Column/Row

Column(children: [],),
mainAxisSize: MainAxisSize.min,
verticalDirection: VerticalDirection.up,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch, //Expanded

SizedBox

SizedBox(
  height: 10.0,
),

TextStyle

letterSpacing: 2.5,

Card with padding

Alt+Enter → Wrap with widget → Padding → padding: …

ListTile

icon + text.
leading: (icon)
title: (text)

Expanded

for Column or Row (child) (flex: 比例)

TextButton (old FlatButton)

default with padding (left: 16.0, right: 16.0)

onPressed: (){}, // setState
style: TextButton.styleFrom(padding: EdgeInsets.zero),

Stateful Widget

stful

setState(() {
  
});

Random

import 'dart:math';
Random().nextInt(max); // 0 ~ max-1

AudioPlayers

audioplayers: ^3.0.0
import 'package:audioplayers/audioplayers.dart';
final player = AudioPlayer();
player.play(AssetSource('note1.wav'));

Class & Constructor

create ___.dart at lib (sam with main.dart)

class Question {
  String questionText = 'Undefined question.';
  bool questionAnswer = true;
  // Question({required this.questionText, required this.questionAnswer});
  Question({required String q, required bool a}) {
    questionText = q;
    questionAnswer = a;
  }
}

Private

在前面加_
將所有地方的某個變數變成Private：對變數右鍵 → Refactor → Rename。

Inheritance

class B extends A

Polymorphism

@override same function (at A) when you extends from A
(can use “super.func()” to use old func in new func, even the name is same as func)

this

void main() {
  User andy = User(age: 18);
  print(andy.age);
}
class User {
  int age = 0;
  // User({required this.age});
  User({required int age}) {
    this.age = age;
  }
}

Set Background Image (BoxDecoration)

In a container.

decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/background.png'),
            fit: BoxFit.cover,
          ),
        ),

Visibility

Warp with widget, and rename to “Visibility”.
visible: bool(ture or false).

floatingActionButton

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
),

Theme

MaterialApp(
  theme: ThemeData.dark(),
);

目錄 Hide

介紹

變數