Mobile Application

Development
Flutter & Dart
Week 2
Traditional Application
Windows Java C
Form VB# Request
ASP.N
Web
PH HTML,
ET Response
P CSS
Swi Objecti
Mobile
ft ve
Jav C
Kotli
a
Application n Database
Mobile Application Architecture
API

JSON

Front end Back end Database

Flutter
• Flutter เป็ น Framework สำหรับพัฒนา mobile application พัฒนา
โดย Google
• เป็ นชุดโปรแกรม (Framework) ที่เน้นการพัฒนาส่วนของหน้าตาของ
app (User Interface: UI)
• เขียนโปรแกรมด้วยภาษา Dart ในการสร้าง UI และสำหรับการควบคุม
การทำงาน เช่น
• การเข้าถึงและจัดการข้อมูล
• การเข้าถึงและการจัดการอุปกรณ์ กล้อง GPS และ เซนเซอร์ต่างๆ
• Flutter สามารถพัฒนา mobile app แบบ cross platform
• ฟรี
การติดตั้ง Flutter
• git
• https://git-scm.com/
• Visual Studio Code
• https://code.visualstudio.com/
• Android Studio (สำหรับพัฒนา app บน android)
• https://developer.android.com/studio/index.html
• Xcode (สำหรับพัฒนา app บน iOS) ติดตั้งที่ App Stroe
• Java JDK เวอร์ชัน 8
• https://www.oracle.com/technetwork/java/javase/downloads/jdk8-do
wnloads-2133151.html
• https://www.oracle.com/technetwork/java/javase/downloads/jre8-do
การตั้งค่า git (สำหรับ Windows)
• ตั้งค่า username และ email ให้ git

git config --global user.name

“your name"
git config --global user.email
“yourEmail@xxx.com"
Android Studio
ค้นหา Flutter กด Install
• หลังจากติดตั้ง Android Studio ให้ตั้งค่าดังนี้

Plugins
 SDK Platform เลือก Android 10.0 ขึ้
Android Studio Flutter รองรับ Android API Level 29 ขึ้นไป

• ตั้งค่า Android SDK

SDK Tools เลือกติดตั้งตามภาพด้าน

การติดตั้ง Flutter
• ดาวน์โหลด Flutter (เลือกระบบปฏิบัติการที่ใช้พัฒนา)
• https://flutter.dev/docs/get-started/install

ทำการแตก zip ลงบน fold

Download zip file for Windows
Download zip file for macOS
ชื่อ flutter
 การตั้งค่า path ให้กับ flutter
-->Path
• สำหรับ Windows
4

5
-->เพิ่ม Path ของ …Flutter\bin
1 -->Environment Variables
3
2
-->Advanced system settings
->Settings/System/About
6
การตั้งค่า path ให้กับ flutter
• สำหรับ macOS
• เปิ ด Terminal
• ใช้คำสั่งเพื่อเปิ ดไฟล์ .bash_profile
touch ~/.bash_profile; open ~/.bash_profile
• Text editor จะเปิ ดไฟล์ .bash_profile จากนั้นเพิ่มคำสั่ง
export PATH=$PATH:“[path]/flutter/bin”
• โดย [path] คือ path ที่เก็บ flutter
AVD Manager (for Android)
• เป็ นเครื่องมือจำลองอุปกรณ์ระบบปฏิบัติการ Android
• ให้ create virtual device เลือกชนิดอุปกรณ์ที่ต้องการสร้าง

• เลือก Android ที่มี API Level 29 ขึ้นไป ดังภาพ

AVD Manager (for Android)
Flutter
• flutter doctor
• เป็ นคำสั่งเพื่อตรวจสอบสภาพแวดล้อมสำหรับการพัฒนา
โปรแกรม
First App
• การสร้างโปรเจ็คใหม่
• ใช้คำสั่ง command line
flutter create firstapp
• เปิ ดโปรเจ็คใน Visual Studio Code (vscode)
• การ run โปรเจ็ค
• กด F5 --> Start Debugging
• เลือก Dart & Flutter
• ให้เปิ ด android emulator ไว้ด้วย
First App main.dart

build เป็ น
method ที่
มีการ
return วัตถุ
เป็ น
Widget

MyHomeP
age เป็ น
class แบบ
stateful
First App
_MyHomePageState เป็ น
class แบบ State สำหรับ
widget ที่มีการเปลี่ยน state
Callback function
_incrementCounter
เป็ น method ที่ใช้
setState() เปลี่ยน
state (เพิ่มค่า
_counter)
 build เป็ น
method ที่มีการ
return วัตถุเป็ น
Widget
Scraffold เป็ น Widget
แบบหนึ่งที่ให้แสดงผลหน้า
จอ โดยทั่วไปจะแบ่งเป็ น
1. appBar: เป็ นส่วนหัว
ของ app
2. body: เป็ นส่วนของ
เนื้อหา เป็ นส่วนหนึ่งของ
3. drawer:Scraffold
เป็ นส่วนของ
ใช้แสดงปุ่ม
การทำ menufloatingActionButton
 appBar: AppBar(
title:
Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Text(
floatingActionButton: 'You have pushed the button this
FloatingActionButton( many times:',
onPressed: ),
_incrementCounter, Text(
tooltip: 'Increment', '$_counter',
style:
child: Icon(Icons.add),
Theme.of(context).textTheme.headline4,
), ),
],
),