Flutter
Flutter สำหรับทำ Web
ในบทเรียนรู้นี้มาทำ Web โดยใช้ Flutter นะครับ ก่อนอื่น Flutter สำหรับ Web ยังไม่ Stable นะครับ ให้เลือก channel ที่เป็น beta ก่อนนะครับ โดยใช้คำสั่งนี้ flutter channel beta flutter upgrade flutter config --enable-web จากนั้นสร้าง Project ด้วยคำสั่ง flutter create myweb จากนั้...
สร้าง Mobile Application ด้วย Flutter Workshop : แอปติดตามรถไฟไทย (Train Tracker)
เตรียมเครื่องมือ การสร้าง Flutter Project : Train Tracker การปรับแต่ง Theme Color สำหรับ Application การสร้างหน้าหลัก Home Page การสร้างการเชื่อมต่อ API การสร้างหน้าเพื่อแสดงผลข้อมูลจาก API การ Signed APK การ Upload ขึ้น Play Store การ Upgrade Version Application ใน Play...
การสร้าง Splash Screen ใน Flutter
Splash Screen เป็นหน้า page เมื่อเรียกใช้งาน App ครั้งแรก โดยใช้ package splashscreen โดยเปิดไฟล์ pubspec.yaml แล้วเพิ่ม splashscreen: any dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class f...
สร้าง API Provider สำหรับการเรียกใช้งาน API ใน Flutter
สำหรับบทเรียนรู้นี้เป็นการสร้าง API Provider สำหรับการเรียก API เพื่อนำข้อมูลมาแสดงที่ List View สำหรับตัวอย่างการใช้งาน แต่ก่อนอื่นให้ทำการติดตั้ง package เพิ่มเติมก่อนคือ http: any intl: any html2md: any flutter_markdown: any โดยเปิดไฟล์ pubspec.yaml จากนั้นเพิ่ม package ล...
สร้าง Project Flutter ใหม่
การสร้าง Project Flutter ใหม่ สามารถใช้ terminal โดยการพิมพ์คำสั่ง flutter create project_name ในที่นี้จะสร้าง project ชื่อ example flutter create example จะพบหน้าจอดังนี้ จากนั้นพิมพ์คำสั่ง cd example และสั่ง flutter run จะพบหน้าจอดังนี้
Switch ในภาษา Dart
เรียนรู้การเขียน switch statement ในภาษา Dart void main() { printError(NetworkError.badURL); } enum NetworkError { badURL, timeout, resourceNotAvilable } void printError(NetworkError error) { switch (error) { case NetworkError.badURL: print('bad url');...
Enum ในภาษา Dart
Enumeration เปรียบเสมือนการ fix ค่าไว้ใช้งาน ซึ่งเป็นการกำหนดค่าไว้ล่วงหน้า ตัวอย่าง void main() { printError(NetworkError.badURL); } enum NetworkError { badURL, timeout, resourceNotAvilable } void printError(NetworkError error) { if(error == NetworkError.badURL){...
Fold method ในภาษา Dart
fold เป็น function ที่ไม่มีชื่อ fold(ค่าเริ่มต้น, (parameter) => function body); void main() { final s = [ 1, 2, 3, 4 ]; print(sum(s)); } int sum(List<int> val) { return val.fold(0, (result, val) => result + val); } ผลลัพท์ 10 ดูเพิ่มเติม
For Loop ในภาษา Dart
เรียนรู้การเขียน for loop void main() { final s = [ 1, 2, 3, 4 ]; print(sum(s)); } int sum(List<int> val) { int i = 0; int result = 0; for(int i = 0; i < val.length; i++) { result += val[i]; } return result; } ผลลัพท์ 10 เราสามารถเขี...
While Loop ในภาษา Dart
เรียนรู้การใช้งาน while loop ในภาษา Dart void main() { final s = [ 1, 2, 3, 4 ]; print(sum(s)); } int sum(List<int> val) { int i = 0; int result = 0; while(i < val.length) { result += val[i]; i++; } return result; } ผลลัพท์ 10 ...
If และ Else ในภาษา Dart
การเขียน control flow ในลักษณะ if else ดังนี้ if(condition){ // condition true }else{ // condition false } ตัวอย่าง void main() { printOddEven(4); } void printOddEven(int val) { if(val % 2 == 0){ print('$val is even'); } else { print('$val is odd'); }...
การกำหนด Type annotations
การกำหนด Type annotations ให้กับ list และ map ช่วยทำให้โปรแกรมมีความถูกต้องสมบูรณ์มากขึ้น ด้วยการกำหนด <type> ตัวอย่างเช่น void main() { var primeNumbers = List<int>(); var person = <String, dynamic>{ 'name': 'Manop Kongoon', 'age': 37, 'height': 1.76...
การใช้ Map
Map คือ การ collection ระหว่าง ket/value โดยเรียนรู้จากตัวอย่างง่ายๆ ดังนี้ void main() { var person = { 'name': 'Manop Kongoon', 'age': 37, 'height': 1.76 }; print(person['name']); } ผลลัพท์ Manop Kongoon แต่หากไม่มี key นั้น compiler จะ return ค่า n...
การใช้ List
จริงๆ แล้ว List นั้นคล้ายกับ Array ใน PHP โดยจะมี function เข้ามาทำงานร่วม ตัวอย่างการใช้งาน List ดังนี้ void main() { var primeNumers = [2, 3, 5, 7]; primeNumers.addAll([11, 13, 17, 19]); primeNumers.add(23); print(primeNumers); } ผลลัพท์ [2, 3, 5, 7, 11, 13, 17, 19, 2...
การใช้ Mixin
ตัวอย่างการใช้งาน Mixin เป็นการรวม Class เพื่อให้สามารถเรียกใช้งาน properties และ method ได้ ตัวอย่างเช่น mixin BMI { double calBMI(double weight, double height) { return weight / (height * height); } } class Person with BMI{ Person({this.name, this.age, this.height, this.we...
Abstract Class ในภาษา Dart
Abstract Class เป็น Class ที่กำหนด method ไว้เพื่อให้ทำ interface void main() { final square = Square(side: 20.0); print(square.area()); } abstract class Shape { double area(); } class Square implements Shape { Square({this.side}); final double side; dou...
การสืบทอด (Inheritance) ในภาษา Dart
เรียนรู้การสืบทอดจาก Base Class ไปยัง Sub Class โดยใช้คุณสมบัติการสืบทอดหรือ Inheritance void main() { final person = Person(name: 'Manop Kongoon', age: 37, height: 1.75); print(person.getMe()); final employee = Employee(taxCode: 'TAX123', salary: 50000); } class Person {...
การเรียกใช้ Method ของ Instance ใน Dart
ตัวอย่างการเรียกใช้ method getMe() ของ instance ในภาษา dart void main() { final person = Person(name: 'Manop Kongoon', age: 37, height: 1.75); print(person.getMe()); } class Person { Person({this.name, this.age, this.height}); final String name; final int age; final do...
Class ในภาษา Dart
เรียนรู้การเขียน Class ในภาษา Dart ซึ่ง Class นั้นประกอบไปด้วย data และ logic (variable และ function) void main() { final person = Person(); } class Person { String name; int age; double height; } การเข้าถึง data member สามารถใช้ . แล้วตามด้วย data member ลักษณะดังนี้...
Function ในภาษา Dart แบบ return ค่า
ตัวอย่างนี้มาเขียน function แบบ return ค่า โดยในที่นี้จะให้ return type เป็น String void main() { String name = 'Manop Kongoon'; int age = 37; double height = 1.75; final person1 = getMe(name, age, height); final person2 = getMe('Naphapat', 35, 1.67); print(person1...
Function ในภาษา Dart แบบไม่ return ค่า
เรียนรู้ Function ในภาษา Dart ในที่นี้จะเริ่มจาก function ที่ไม่ return ค่า นั่นคือ function ที่มี void ข้างหน้าชื่อ function นั่นเอง void main() { String name = 'Manop Kongoon'; int age = 37; double height = 1.75; getMe(name, age, height); // เรียก function getMe('Naphap...
ตัวแปรในภาษา Dart
ตัวอย่างตัวแปรในภาษา Dart void main() { var varname = 123; //ประกาศตัวแปร (อัตโนมัติ) String name = 'Manop Kongoon'; // ตัวแปรข้อความ int age = 37; // ตัวแปรจำนวนเต็ม double height = 1.75; // ตัวแปรแบบจุดทศนิยม final birthday = '2019-04-10'; // ตัวแปรคงที่ dynamic mood = '...
การติดตั้ง Flutter
สำหรับการติดตั้ง Flutter นั้นจะขอเริ่มต้นกับ macOS โดยสามารถดาวน์โหลดได้จาก flutter_macos_v1.5.4-hotfix.2-stable.zip จากนั้นแตก zip แล้ววางใน Folder ที่ต้องการในที่นี้คือ /Users/username/Developments/flutter จากนั้น set path ไปยัง folder flutter/bin เพื่อเรียก flutter tool โดยเปิดไฟ...
Flutter คืออะไร
Flutter คือ SDK สำหรับพัฒนา Application บน Mobile ซึ่งพัฒนาโดย Google โดย Flutter นั้นสามารถ build ไปยัง iOS และ Android ได้ด้วยการเขียนเพียงครั้งเดียว Flutter พัฒนาด้วยภาษา Dart ซึ่ง Google เคลมว่า Fast Development หรือสามารถพัฒนา Application ได้อย่างรวดเร็ว Expressive, beautyf...
แสดง HTML ใน Page แบบสวยๆ กับ Flutter
ปัญหาหนึ่งที่เจอ เนื่องจากใน API ฝั่ง Server เราไม่ได้เขียนให้ตัด HTML ทำให้การแสดงผลใน Page นั้นมีคำสั่ง HTML โผล่มา นั่นคงไม่ดีแน่ ดังนั้น เรามีวิธีจัดการแปลงคำสั่งเหล่านี้ให้แสดงผลให้ถูกต้องด้วย libary 2 ตัว นั่นคือ html2md flutter_html_view ไม่ระบุ version นะครับ ลองไปค้นดู เพราะ ve...
สังคมนักพัฒนาซอฟต์แวร์
117 M.9 Nongmueng Subdistrict, Muangsamsib District, Ubonratchathani Province 34140