Developer Team
BorntoDev Co., Ltd.
จากชื่อบทความในครั้งนี้ก็น่าจะรู้กันแล้วว่าเราจะมาสร้างแอปด้วย Flutter กัน โดยเจ้า Flutter นั้นเป็นเครื่องมือสร้าง UI จาก Google ที่ compile ไปใช้ได้ทั้ง mobile, web และ desktop จากโค้ดเพียงชุดเดียว ซึ่งครั้งนี้เรามาสร้างแอป Android ง่ายๆด้วยภาษา Dart เป็นเกมทายตัวเลขที่จะสุ่มขึ้นมา และแสดงผลว่าทายถูกหรือผิด เรามาเริ่มทำไปทีละขั้นตอนกันเลย
ติดตั้ง Flutter
ในเว็บของ Flutter ที่ https://flutter.dev/docs/get-started/install จะมีขั้นตอนการติดตั้งให้ทั้ง Windoes, macOS และ Linux แต่ในครั้งนี้จะมาลองดูใน Windows 10 กัน
- ไปที่ https://flutter.dev/docs/get-started/install/windows ดาวน์โหลดไฟล์ flutter_windows_1.17.5-stable.zip (เลขเวอร์ชันอาจจะไม่ตรงกับในตัวอย่างโหลดใช้ได้เหมือนกัน)
- ได้ไฟล์ zip มาแล้วเปิดเข้าไปจะเจอกับโฟลเดอร์ flutter ให้แตกไฟล์ออกมาแล้วเอาไปไว้ในที่ที่ต้องการ เช่น C:src\flutter
- ค้นหาในช่องค้นหาของ Windows ว่า env แล้วเลือก Edit environment variables for your account หลังจากเปิดขึ้นมาในส่วนของ User variables ที่อยู่ครึ่งบน ให้หาตัวที่ชื่อว่า Path ถ้าไม่มีให้กด New… เพื่อสร้างใหม่ ถ้ามีแล้วก็กด Edit… เข้าไปแก้ไขได้เลย โดยเพิ่ม path ไปยังที่ที่เก็บไฟล์ flutter เอาไว้ อย่างในที่นี่ก็คือ C:\src\flutter\bin แล้วกด OK
- ในครั้งนี้เราจะทำแอปเพื่อลองรันใน Android เลยต้องติดตั้ง Android Studio เพื่อความง่ายในการใช้งานเครื่องมือต่างๆที่รวมอยู่ใน Android Studio โดยไปโหลดได้ที่ https://developer.android.com/studio/ แล้วก็ทำการติดตั้งให้เรียบร้อย
สร้างโปรเจ็กต์ใน VS Code
- ก่อนอื่นติดตั้ง Extension ใน VS Code คือ Flutter และ Dart ให้เรียบร้อย
- กด ctrl + shift + P แล้วพิมพ์ว่า Flutter แล้วเลือก Flutter: New Project ตั้งชื่อ เลือกที่เซฟโปรเจ็กต์ และรอจนไฟล์ต่างๆสร้างเสร็จ
- ทดสอบด้วยการลองกด F5 และเลือก Create Android emulator รอสักพักจน Emulator เปิดขึ้นมาพร้อมกับแสดงแอปตัวอย่าง
- หน้าตาของแอปตัวอย่างที่แสดงจำนวนครั้งที่กดปุ่ม + ในแอป
ลองดูโค้ดตัวอย่างที่ได้มากันก่อน
ตอนนี้เรามีโปรเจ็กต์ตัวอย่างที่สามารถรันขึ้นมาเป็นแอปได้แล้ว เรามาลองดูคร่าวๆกันทีละส่วนว่าตรงไหนทำงานอะไรบ้าง โดยจะดูกันที่ไฟล์ main.dartส่วนที่เราสนใจคือส่วนนี้ที่เป็นส่วนแสดงผลหน้าตาของแอปของเรา
- ส่วนที่ 1 คือ AppBar แสดงผลด้านบน
- ส่วนที่ 2 คือส่วน body (ไม่รวมปุ่มกด)
จากโค้ดเราจะเห็น property ที่ชื่อ children ที่เก็บ array ของ widget ป้ายแสดงข้อความ และตัวเลขที่เปลี่ยนไปตามจำนวนครั้งที่กดตามตัวแปร _counter นั่นเอง
- ส่วนที่ 3 คือส่วนที่แสดงเฉพาะปุ่มกดที่ลอยอยู่
เราจะเห็นว่าที่ปุ่มกดมี property ชื่อ onPressed ซึ่งเป็นตัวระบุว่าเมื่อกดปุ่มแล้วจะทำอะไรต่อซึ่งในที่นี้คือไปเรียก function ชื่อ _incrementCounter
เมื่อดูที่ function _incrementCounter จะเห็นว่าเมื่อเรียกแล้วมันจะทำการเรียก function setState() ที่เมื่อเรียกแล้วจะทำการบอก flutter framework ว่าต่อไปจะมีการเปลี่ยนแปลงหน้าตา widget ของเรา ให้ทำการ render ใหม่เมื่อจบการทำงานคำสั่งภายใน ซึ่งก็คือ + ค่า _counter ที่นำไปแสดงบน widget เพิ่ม 1 นั่นเอง ถึงขึ้นตอนนี้แล้วเราก็เข้าใจถึงโค้ดตัวอย่างเบื้องต้นแล้ว ต่อไปเราจะมาลองทำแอปกันเลย
ลงมือสร้างแอปแรกด้วย Flutter กันเลย
สิ่งที่เราต้องมีในการแสดงผลของแอปเราคือช่องกรอกข้อความ (text field) ข้อความสำหรับแสดงคำตอบ และปุ่มสำหรับส่งคำตอบ
ช่องกรอกข้อความ
สำหรับ text field เราจะต้องสร้าง controller สำหรับ text field ขึ้นมาก่อน โดยจะสร้างไว้ที่ชั้นเดียวกับตัวแปร _counter
class _MyHomePageState extends State<MyHomePage> { final textFieldController = TextEditingController(); int _counter = 0;
จากนั้นให้เรามาดูที่ส่วน property ของ body
ดูที่ property children ที่เก็บ array ของ <Widget> ซึ่งเราสามารถเพิ่ม widget ที่เราต้องการให้แสดงบน body ของ app เรานั่นเอง ให้เราเปลี่ยนตัวแรกให้เป็น text field ที่เราประกาศ controller ขึ้นมาแบบนี้
children: <Widget>[ TextField( controller: textFieldController, ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ]
เราก็จะได้ text field ออกมาแล้ว
ข้อความ
ต่อไปเป็นส่วนแสดงผลว่าถูกหรือไม่ซึ่งส่วนนี้จะเปลี่ยนไปตามผลลัพธ์ของเลขที่เราใส่เข้าไป ดังนั้นเราจะให้มันแสดงผลตามตัวแปร _result ซึ่งจะต้องประกาศในชั้นเดียวกับ controller
class _MyHomePageState extends State<MyHomePage> { final textFieldController = TextEditingController(); String _result = "เดาตัวเลข"; int _counter = 0;
ต่อไปให้เราเปลี่ยน widget text ที่รับตัวแปร _counter ให้เป็น _result ให้ไปแสดงผลแทน
children: <Widget>[ TextField( controller: textFieldController, ), Text( '$_result', style: Theme.of(context).textTheme.headline4, ), ]
ปุ่มกดส่งคำตอบ
แอปทายเลขที่สุ่มของเรามีการทำงานคือเมื่อกดปุ่มจะทำการเปรียบเทียบค่าที่ผู้ใช้กรอกเข้าไปกับเลขที่ทำการสุ่มเก็บไว้อยู่แล้ว ดังนั้นเราจะต้องสร้างตัวแปรที่เก็บค่าสุ่มเอาไว้ก่อน โดยเราจะต้อง import dart:math มาก่อนเพื่อใช้ function random
import 'package:flutter/material.dart'; import 'dart:math';
จากนั้นสร้างตัวแปรที่เก็บค่า random ชื่อ _answer ที่ชั้นเดียวกับ controller โดยเราจะสร้างตัวเลขที่สุ่มโดย function ที่สร้างขึ้นมา โดยจะ return ค่าเป็น String และเลขที่สุ่มมาจะมีแค่ 2 หลักเท่านั้น เพื่อให้สะดวกในการเปรียบเทียบค่า
String random_number() { var rng = new Random(); String num = rng.nextInt(100).toString(); return num; } class _MyHomePageState extends State<MyHomePage> { final textFieldController = TextEditingController(); String _result = "เดาตัวเลข"; String _answer = random_number(); int _counter = 0;
จากนั้นสร้าง function ที่ปุ่มของเราจะมาเรียกให้ชื่อว่า _guess_number ไว้ในคลาส _MyHomePageState โดยเราจะเอาตัวแปร _answer ซึ่งเป็นตัวเลขที่สุ่มไว้ มาเทียบกับค่าใน text field โดยใช้ controller ที่เราสร้างไว้ด้วยคำสั่ง textFieldController.text และให้เปลี่ยนคำในข้อความตามผลลัพธ์การเปรียบเทียบที่ออกมา โดยจาก function setState() เมื่อทำการเปรียบเทียบและเปลี่ยนค่าในตัวแปร _result แอปจะทำการ render ใหม่ทำให้ข้อความเปลี่ยนไป
void _guess_number() { setState(() { if (_answer == textFieldController.text) { _result = "สุดยอด!"; } else { _result = "ผิด! คำตอบคือ:" + _answer; } }); }
เมื่อเตรียมการเสร็จแล้วให้เราเปลี่ยนฟังก์ชันที่ปุ่มเดิมไปเรียกให้มาเรียก function _guess_number ที่เราสร้างขึ้นมาใหม่แบบนี้
floatingActionButton: FloatingActionButton( onPressed: _guess_number, child: Icon(Icons.add), )
เท่านี้ก็ได้แอปที่เราต้องการไว้เล่นแล้ว
ส่วนที่เป็นปุ่มถ้าเราไม่อยากได้ icon เป็นเครื่องหมายบวก เราสามารถไปหา icon อื่นได้ด้วยนะจากลิงค์นี้ https://api.flutter.dev/flutter/material/Icons-class.html เช่น
floatingActionButton: FloatingActionButton( onPressed: _guess_number, child: Icon(Icons.directions_boat), )
หรืออยากเปลี่ยนสีปุ่มก็เพิ่ม property backgroundColor ได้เลย
floatingActionButton: FloatingActionButton( onPressed: _guess_number, child: Icon(Icons.directions_boat), backgroundColor: Colors.pink, )