การใช้งาน Drawing Tiger in Native GUI ในภาษา Dart แบบง่ายๆ

ในฐานะที่เราอยู่ในยุคของการพัฒนาแอปพลิเคชันที่มีความสวยงามและตอบสนองต่อผู้ใช้ได้อย่างมีประสิทธิภาพ ภาษา Dart ถือว่าเป็นหนึ่งในภาษาที่น่าสนใจสำหรับนักพัฒนา โดยเฉพาะอย่างยิ่งเมื่อใช้งานควบคู่กับ Flutter ซึ่งเป็นเฟรมเวิร์กที่ช่วยในการพัฒนาแอปพลิเคชันที่มีผู้ใช้หลายแพลตฟอร์ม และยังสนับสนุนการสร้าง GUI (Graphical User Interface) อย่างมีประสิทธิภาพ ในบทความนี้เราจะพูดถึงการวาดรูปเสือ (Tiger) ด้วยศาสตร์การเขียนโปรแกรมในภาษา Dart ที่สามารถเริ่มต้นได้ง่าย ๆ

ทำความรู้จักกับ Dart และ Flutter

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

ทำไมเราถึงต้องเรียนรู้การใช้ Dart?

การวาดรูปเสือใน GUI

การวาดภาพใน GUI นั้นมีหลายวิธี แต่ที่เราจะกล่าวถึงกันในวันนี้คือการใช้ Canvas ใน Flutter ซึ่งมีฟังก์ชันการวาดหลายอย่างที่เราสามารถนำมาประยุกต์ใช้ได้

โค้ดตัวอย่าง

มาลองเขียนโค้ดง่าย ๆ สำหรับการวาดภาพเสือกัน โดยเราจะสร้างแอปพลิเคชัน Flutter แล้วใช้งาน Widget `CustomPaint` เพื่อวาดรูปเสือ

 import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Draw Tiger',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Drawing Tiger'),
      ),
      body: Center(child: TigerPainter()),
    ),
  ));
}

class TigerPainter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(300, 300),
      painter: TigerCustomPainter(),
    );
  }
}

class TigerCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.fill;

    // วาดตัวเสือ
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 100, paint);

    // วาดลายเสือ
    paint.color = Colors.black;
    paint.strokeWidth = 10;

    // วาดลายขีด
    canvas.drawLine(Offset(size.width / 2 - 30, size.height / 2 - 20), Offset(size.width / 2 + 30, size.height / 2 + 20), paint);
    canvas.drawLine(Offset(size.width / 2 + 30, size.height / 2 - 20), Offset(size.width / 2 - 30, size.height / 2 + 20), paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

อธิบายการทำงานของโค้ด

- โค้ดเริ่มต้นด้วยการเรียกใช้ `runApp()` เพื่อเริ่มปฏิบัติการ และส่งคืน MaterialApp ที่มี AppBar.

- เราสร้าง StatelessWidget ที่ชื่อ `TigerPainter` ซึ่งทำหน้าที่สร้าง Widget `CustomPaint` ที่มี painter เป็น `TigerCustomPainter`.

- ในคาสสของเราจะมีการ override เมธอด `paint` เพื่อวาดตัวเสือด้วย `Canvas`.

- เราจะใช้ `Paint` เพื่อกำหนดสีและรูปแบบการวาด

- ใช้ `drawCircle()` เพื่อวาดตัวเสือ และใช้ `drawLine()` เพื่อวาดลายบนตัวเสือ

Use Case ในโลกจริง

การวาดกราฟิกในแอปพลิเคชันมีใช้ประโยชน์มากมาย เช่น:

ชวนเรียนรู้กับ EPT

ในโลกที่การโปรแกรมเป็นสิ่งสำคัญอย่างมาก เราเชื่อว่าการเรียนรู้ไม่ควรหยุดนิ่ง หากคุณต้องการพัฒนาเองและมีรายได้จากการใช้ทักษะการเขียนโปรแกรมที่คุณมีอยู่ EPT (Expert Programming Tutor) คือตัวเลือกที่ดีที่สุดสำหรับคุณ!

เราเสนอโครงการเรียนรู้ที่เป็นประโยชน์และตอบสนองความต้องการของนักเรียน ขอเชิญคุณมาเป็นส่วนหนึ่งของเรา เริ่มต้นกับการเขียนโปรแกรมในภาษา Dart และ Flutter พร้อมเป็นมืออาชีพในสายงานนี้!

บทความนี้เป็นเพียงก้าวแรกในการเริ่มต้นวาดรูปใน Dart อย่างที่เราทำได้ ขอให้ใช้เวลาแลกเปลี่ยนและเรียนรู้ไปตลอดเส้นทางการเขียนโปรแกรมของคุณ!

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