Skip to main content
flutterMobile Application

สร้างแอปแรกด้วย Flutter

Developer Team
BorntoDev Co., Ltd.

Flutter Web Pageจากชื่อบทความในครั้งนี้ก็น่าจะรู้กันแล้วว่าเราจะมาสร้างแอปด้วย Flutter กัน โดยเจ้า Flutter นั้นเป็นเครื่องมือสร้าง UI จาก Google ที่ compile ไปใช้ได้ทั้ง mobile, web และ desktop จากโค้ดเพียงชุดเดียว ซึ่งครั้งนี้เรามาสร้างแอป Android ง่ายๆด้วยภาษา Dart เป็นเกมทายตัวเลขที่จะสุ่มขึ้นมา และแสดงผลว่าทายถูกหรือผิด เรามาเริ่มทำไปทีละขั้นตอนกันเลย

ติดตั้ง Flutter

ในเว็บของ Flutter ที่ https://flutter.dev/docs/get-started/install จะมีขั้นตอนการติดตั้งให้ทั้ง Windoes, macOS และ Linux แต่ในครั้งนี้จะมาลองดูใน Windows 10 กัน

  1. ไปที่ https://flutter.dev/docs/get-started/install/windows ดาวน์โหลดไฟล์ flutter_windows_1.17.5-stable.zip (เลขเวอร์ชันอาจจะไม่ตรงกับในตัวอย่างโหลดใช้ได้เหมือนกัน)get Flutter SDK
  2. ได้ไฟล์ zip มาแล้วเปิดเข้าไปจะเจอกับโฟลเดอร์ flutter ให้แตกไฟล์ออกมาแล้วเอาไปไว้ในที่ที่ต้องการ เช่น C:src\flutter
    Flutter save path
  3. ค้นหาในช่องค้นหาของ Windows ว่า env แล้วเลือก Edit environment variables for your account หลังจากเปิดขึ้นมาในส่วนของ User variables ที่อยู่ครึ่งบน ให้หาตัวที่ชื่อว่า Path ถ้าไม่มีให้กด New… เพื่อสร้างใหม่ ถ้ามีแล้วก็กด Edit… เข้าไปแก้ไขได้เลย โดยเพิ่ม path ไปยังที่ที่เก็บไฟล์ flutter เอาไว้ อย่างในที่นี่ก็คือ C:\src\flutter\bin แล้วกด OK
    add Flutter to environment variable
  4. ในครั้งนี้เราจะทำแอปเพื่อลองรันใน Android เลยต้องติดตั้ง Android Studio เพื่อความง่ายในการใช้งานเครื่องมือต่างๆที่รวมอยู่ใน Android Studio โดยไปโหลดได้ที่ https://developer.android.com/studio/ แล้วก็ทำการติดตั้งให้เรียบร้อย
    Download Android Studio

สร้างโปรเจ็กต์ใน VS Code

  1. ก่อนอื่นติดตั้ง Extension ใน VS Code คือ Flutter และ Dart ให้เรียบร้อยflutter extensiondart extension
  2. กด ctrl + shift + P แล้วพิมพ์ว่า Flutter แล้วเลือก Flutter: New Project ตั้งชื่อ เลือกที่เซฟโปรเจ็กต์ และรอจนไฟล์ต่างๆสร้างเสร็จ
    Flutter new project
  3. ทดสอบด้วยการลองกด F5 และเลือก Create Android emulator รอสักพักจน Emulator เปิดขึ้นมาพร้อมกับแสดงแอปตัวอย่าง
    create android emulator
  4. หน้าตาของแอปตัวอย่างที่แสดงจำนวนครั้งที่กดปุ่ม + ในแอป

    flutter demo app

    แอปจากโค้ดตัวอย่าง


    flutter demo app work

    ตัวเลขแสดงจำนวนครั้งที่กดปุ่ม +

ลองดูโค้ดตัวอย่างที่ได้มากันก่อน

ตอนนี้เรามีโปรเจ็กต์ตัวอย่างที่สามารถรันขึ้นมาเป็นแอปได้แล้ว เรามาลองดูคร่าวๆกันทีละส่วนว่าตรงไหนทำงานอะไรบ้าง โดยจะดูกันที่ไฟล์ main.dartdemo appส่วนที่เราสนใจคือส่วนนี้ที่เป็นส่วนแสดงผลหน้าตาของแอปของเรา

Flutter build contextซึ่งภายในจะแบ่งเป็น 3 ส่วน

  • ส่วนที่ 1 คือ AppBar แสดงผลด้านบน
    app barapp bar code
  • ส่วนที่ 2 คือส่วน body (ไม่รวมปุ่มกด)
    app body code
    จากโค้ดเราจะเห็น property ที่ชื่อ children ที่เก็บ array ของ widget ป้ายแสดงข้อความ และตัวเลขที่เปลี่ยนไปตามจำนวนครั้งที่กดตามตัวแปร _counter นั่นเอง
    Flutter counter text
  • ส่วนที่ 3 คือส่วนที่แสดงเฉพาะปุ่มกดที่ลอยอยู่
    flutter_floating_button
    เราจะเห็นว่าที่ปุ่มกดมี property ชื่อ onPressed ซึ่งเป็นตัวระบุว่าเมื่อกดปุ่มแล้วจะทำอะไรต่อซึ่งในที่นี้คือไปเรียก function ชื่อ  _incrementCounter
    count functionเมื่อดูที่ 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

body property

ดูที่ 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 ออกมาแล้ว

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,
            ),
          ]

guess number

ปุ่มกดส่งคำตอบ

แอปทายเลขที่สุ่มของเรามีการทำงานคือเมื่อกดปุ่มจะทำการเปรียบเทียบค่าที่ผู้ใช้กรอกเข้าไปกับเลขที่ทำการสุ่มเก็บไว้อยู่แล้ว ดังนั้นเราจะต้องสร้างตัวแปรที่เก็บค่าสุ่มเอาไว้ก่อน โดยเราจะต้อง 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),
      )

เท่านี้ก็ได้แอปที่เราต้องการไว้เล่นแล้ว

finished app

โค้ดทั้งหมด

https://github.com/BorntoDev/Flutter-First-Time

ส่วนที่เป็นปุ่มถ้าเราไม่อยากได้ icon เป็นเครื่องหมายบวก เราสามารถไปหา icon อื่นได้ด้วยนะจากลิงค์นี้ https://api.flutter.dev/flutter/material/Icons-class.html เช่น

floatingActionButton: FloatingActionButton(
        onPressed: _guess_number,
        child: Icon(Icons.directions_boat),
      )

button 1

หรืออยากเปลี่ยนสีปุ่มก็เพิ่ม property backgroundColor ได้เลย

floatingActionButton: FloatingActionButton(
        onPressed: _guess_number,
        child: Icon(Icons.directions_boat),
        backgroundColor: Colors.pink,
      )

style button 2

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Developer

Author Developer

More posts by Developer

Leave a Reply

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า