Cover image

Flutter EP.1 ทําความรู้จักกับ Flutter

27 May 2020

Share to:

สวัสดีครับ วันนี้เราจะมาเริ่มต้นทําความรู้จักกับ Flutter กันนะครับ สําหรับบทความนี้เป็น EP.1 จะมีเนื้อหาเกี่ยวกับ Flutter คืออะไร, การ Install Flutter และการเริ่มต้น Project แรก (Getting Start)

Flutter คืออะไร

Flutter เป็น Google UI toolkit ที่ใช้สําหรับพัฒนา Native mobile application ทั้งฝั่ง IOS และ Android ด้วยภาษา Dart พูดง่ายๆก็คือสามารถเขียน Mobile application ด้วยภาษา Dart ครั้งเดียวแต่ Build ออกมาได้ทั้ง IOS และ Android ซึ่ง Flutter มี Feature หลักๆดังนี้

  • build-in UI ทั้ง Cupertino (IOS style), Material Design ทําให้สร้าง Appliction ได้ง่าย และสวยงาม
  • สามารถเปิดใช้งาน Native Code ทั้ง java, swift และ obj-C ร่วมกับ Flutter ได้
  • hot reload ทําให้ develop ได้เร็วขึ้น

Install Flutter

ในบทความนี้จะเป็นตัวอย่างการ Install Flutter สําหรับ macOS นะครับ OS อื่นๆดูวิธีติดตั้งได้จาก installation ทําตามได้ไม่ยากครับ

Setp1: Clone Flutter

สร้าง Folder สําหรับเก็บ Flutter ที่เราจะ Clone มา

$ mkdir ~/development
$ cd ~/development

Clone Flutter ลงมาบนเครื่องเรา โดยใช้คําสั่ง

$ git clone https://github.com/flutter/flutter.git

Setp2: Setting PATH

ตั้งค่า PATH ให้ชี้ไปยัง Folder ที่เรา Clone มา

$ export PATH="$PATH:`pwd`/flutter/bin"

สําหรับคําสั่งด้านบนจะมีผลกับ Terminal ที่กําลังใช้อยู่เท่านั้น เมื่อเปิด Terminal ขึ้นมาใหม่จะต้องตั้งค่า PATH ทุกครั้ง

ถ้าต้องการจะให้การตั้งค่า PATH คงอยู่ตลอดไป ให้แก้ไขไฟล์ “/.bash_profile” หรือ “/.bashrc” กรณีใช้ Z shell โดยเพิ่ม Code นี้เข้าไป

ซึ่ง [PATH_TO_FLUTTER_GIT_DIRECTORY] เป็นที่อยู่ที่เรา Clone Flutter มาครับ

$ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

Setp3: Install Flutter VSCode Extension

1 กดที่เมนู Extension

2 Search คําว่า “Flutter”

3 กดที่ Extension “Flutter”

4 กด Install ได้เลยครับ

Image

Setp4: ตรวจสอบ Flutter dependencies

ใช้คําสั่ง เพื่อตรวจสอบ dependencies ที่ Flutter จําเป็นต้องใช้

$ flutter docter

ถ้าไม่มีข้อไหน Error เลย ก็แสดงว่า Flutter เราพร้อมใช้งานแล้วครับ แต่ถ้า มี Error ข้อไหนก็ให้ไปติดตั้งตามคําแนะนําให้เรียบร้อยครับ

Getting Start

Setp1: Create Flutter Project

Create Flutter Project ด้วยคําสั้งนี้

$ flutter create hello_flutter

Setp2: Run Project

เปิด simulater IOS โดยไปที่ Xcode > open Developer Tool > Simulator

เมื่อเปิด simulater เรียบร้อยแล้ว สั่ง Run Project โดยไปที่ Run > Run Without Debugging

ก็จะได้หน้าตาประมาณนี้

Image

มาถึงจุดนี้เราก็สามารถสร้าง Flutter Project สําหรับสร้าง Mobile application ได้แล้ว

สําหรับ EP นี้ พอแค่นี้ก่อนครับ แล้วพบกัน EP หน้าครับ ขอบคุณครับ

Suggestion blogs

เหรียญ 1 บาท เนื่องในวันอาหารโลก

เหรียญ 1 บาท เนื่องในวันอาหารโลก พ.ศ.2525 องค์การอาหารและเกษตรแห่งสหประชาชาติขอความร่วมมือให้กรมธนารักษ์จัดทำเหรียญกษาปณ์ที่ระลึกเนื่องในวันอาหารโลก องค์การอาหารและเกษตรแห่งสหประชาชาติเป็นองค์การระหว่างประเทศที่ดำเนินการเกี่ยวกับการเพิ่มผลผลิตในการเกษตรให้มากยิ่งขึ้น เพื่อมิให้ประชากรของโลกขาดแคลนอาหาร และเนื่องด้วยวันที่ 16 ตุลาคม พ.ศ. 2524 เป็นวันฉลองการก่อตั้งองค์การอาหารและการเกษตรแห่งสหประชาชาติ ครบปีที่ 36 องค์การ ฯ จึงถือเอาวันที่

โดน Block Facebook จะทําไงให้เล่นได้

Imageตามหัวข้อเลยครับ ถ้าเราโดนBlock Facebook แต่ถ้าเรามีความจําเป็นจะต้องใช้งาน Facebook เราจะทําไง? คําตอบของคําถามนี้คือ ใช้ Tor ในการเปิดเว็บ Facebook ก่อนอื่น มาดูกันว่าเจ้า Tor มันคืออะไร

เรียนรู้ Extension Method

โดยปกติแล้ว Class ต่างๆจะมี Method เป็นของตัวเองอยู่แล้ว แต่ถ้าเราต้องการจะเขียน Method เพิ่มเติมเข้าไป ในกรณีที่เราเป็นเจ้าของ Source code เราสามารถแก้ไข Source code ของเราได้เลย แต่ถ้าในกรณีที่เราไม่ได้เป็นเจ้าของ Source code เรามีเพียงแค่ dll ไฟล์เท่านั้น เราจะทําอย่างไร? ใน .net 3.0 ขึ้นไป เราสามารถเพิ่ม Method เสริมให้กลับ Class ที่ถูกสร้างไว้แล้วได้ โดยจะเรียกว่า Extension Method


Copyright © 2019 - 2024 thiti.dev |  v1.34.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Youtube channel   Telegram   Email contact   วงแหวนเว็บ