สวัสดีเพื่อนๆ ผู้อ่านครับ ช่วงนี้ flutter มีของเล่นใหม่หลายอย่าง เพียบเลยจริงๆ หนึ่งในนั้นคือ Flutter for Desktop ที่รันได้ทั้งบน Windows , MacOS , Linux โดยตัวผมเองนั้นก็เคยเขียน Windows Form มาก่อน และ UWP มาบ้าง ทำให้นึกถึงวันเก่าๆ ที่ตอนนี้จะสามารถเขียน Flutter แล้ว ทำโปรแกรมแบบเดิมได้ ในบล็อกนี้จะพามาลองเล่น Flutter for Desktop ครับ ในตัวอย่างนี้จะรันบน Windows10 ครับ ซึ่งในขณะที่เขียนบล็อกนี้อยู่นั้น Flutter for Desktop ยังเป็น Technical Preview อยู่นะ

เริ่มต้น

เริ่มจาก clone repository ของโปรเจค flutter desktop
https://github.com/google/flutter-desktop-embedding

ด้วยคำสั่ง

$ git clone https://github.com/google/flutter-desktop-embedding.git

ให้โฟลเดอร์ของ flutter desktop อยู่ในโฟลเดอร์เดียวกับ flutter sdk เดิม

ย้ายไปยัง Channel master

Flutter Desktop ยังเป็น Technical preview ดังนั้นให้เรา cd ไปที่ Flutter SDK foler แล้วย้าย channel ไปยัง master ด้วยคำสั่ง

$ flutter channel master

จากนั้น แน่ใจว่า flutter ของเราล่าสุดให้รันคำสั่งอัพเกรด

$ flutter upgrade

เปิด Windows Developer Mode

จากนั้นเปิด developer mode โดยไปที่ setting แล้วพิมพ์หาว่า developer

ดาวน์โหลด Visual Studio 2019

สำหรับใน Windows จะต้องลง Visual Studio และ sdk ต่างๆ ซึ่งสามารถใช้ได้ทั้ง ของปี 2017 และ 2019 ในตัวอย่างนี้ผมใช้ VS 2019 Community

หลังจากดาวน์โหลด installer มาแล้ว เปิดโปรแกรม VS2019 Installer เข้ามา จะมีหัวข้อต่างๆให้เราเลือกดาวน์โหลด ที่แท็บ Individual component จากนั้นให้เราเลือก C++ v141 Support buildtool , v141 C++ x64x86 และ Windows 10 SDK 10.0.1.17134.0 หรือให้เลือกๆไปก่อนก็ได้เดี๋ยวตอนรันมันจะบอกเองว่าขาดอะไร

เพิ่ม Environment Variable

หลังจากติดตั้ง VS 2019 แล้วให้เราเพิ่ม path ของ MSBuild ใน Environment Variable ซึ่งจะอยู่ที่

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin

แล้วก็เพิ่ม variable ที่ชื่อว่า ENABLE_FLUTTER_DESKTOP มีค่าเป็น true

การรันแอป

เท่านี้เราจะสามารถรันแอปได้แล้ว โดยจะต้องเข้าไปที่โฟลเดอร์โปรเจค ที่ชื่อว่า testbed (ก่อนหน้านี้ใช้ชื่อว่า example) จากนั้นรันคำสั่ง

$ flutter run -v

หากมี error เกิดขึ้น ให้ลองอ่าน รายละเอียดู เช่น หาไฟล์ vcvars64.bat ไม่เจอ ซึ่งไฟล์นี้เราจะได้ตอนติดตั้ง VC++ 141 อันไหนสักอันนี่แหละ

หลังจากแก้ไขแล้ว ก็จะรันโปรแกรมขึ้นมาสำเร็จ

ลองรันโปรเจค เกม 2048

ทีนี้ผมจะลองนำเกม 2048 ที่ผมเคยเขียนเอาไว้ใน Flutter มารันใน Flutter Desktop ครับ

ลองเปิดโปรเจค example ใน android studio ครับ จะเห็นปุ่มรัน ด้านข้างก็จะขึ้นว่า Windows ทำให้เราสามารถกดรันในนี้ได้เลย นั่นเอง

ก่อนอื่นเลย เปลียนชื่อโปรแกรมที่แสดง title ด้านบน และขนาด Window ตอนเริ่มต้นได้ที่ไฟล์ windows/flutter_embedder_example.cpp

  // Start the engine.
  if (!flutter_controller.CreateWindow(800, 600, "2048 Game",
                                       assets_path, arguments)) {
    return EXIT_FAILURE;
  }

ตัวโปรเจคเดิมผมเขียนส่วน responsive ไว้แล้ว (มั้ง) แต่ว่าตัวเกมการเล่นต้องเปลี่ยนนิดหน่อย เพราะไม่ได้เล่นในมือถือแล้ว การเล่นจะใช้การกดปุ่มลูกศรบน keyboard แทน

ผมก็ copy โค้ดเดิมทั้งหมดมา แล้วเพิ่มส่วนของการใช้จับ event ของ keyboard โดยใช้ RawKeyboardListener

  Widget build(BuildContext context) {
    FocusScope.of(context).requestFocus(focusnode);
    return Scaffold(
      body: RawKeyboardListener(
          focusNode: focusnode,
          onKey: (RawKeyEvent event) {
            print("Key code = ${event.logicalKey.keyId}");
            if (event.runtimeType == RawKeyDownEvent) {
              if (event.logicalKey.keyId == KeyCode.ARROW_LEFT) {
                moveBlock(DIRECTION_LEFT);
              } else if (event.logicalKey.keyId == KeyCode.ARROW_RIGHT) {
                moveBlock(DIRECTION_RIGHT);
              } else if (event.logicalKey.keyId == KeyCode.ARROW_UP) {
                moveBlock(DIRECTION_UP);
              } else if (event.logicalKey.keyId == KeyCode.ARROW_DOWN) {
                moveBlock(DIRECTION_DOWN);
              }
            }
          },

ซึ่งตัว log ก็ขึ้นตามปกติ

เท่านี้ก็ได้เกม 2048 ของผม รันบน Windows ได้แล้ว แทบไม่ได้แก้อะไรเลย

สรุป

Flutter desktop ช่วยให้เราสามารถสร้าง Desktop App ได้จาก code base เดิมของ Flutter มันสมการรอคอยของผมจริงๆ แม้ว่าตอนนี้จะยัง preview อยู่ ในอนาคตเราจะสามารถเขียน desktop app ใน android studio แน่ๆ

เพิ่มเติม
https://github.com/google/flutter-desktop-embedding
https://github.com/google/flutter-desktop-embedding/tree/master/example