[Flutter] Getting Started.

ใน blog นี้เราจะมาเปิดเรื่องใหม่ไปพร้อม ๆ กัน หรือ ก็คือเรียนรู้ไปด้วยกัน จริง ๆ ชั่งใจอยู่นานว่าจะทำเรื่องนี้ดีไหม เพราะว่าตัวผมก็ไม่ใช่สายทำ Mobile แล้วตั้งแต่เรียนจบทำบ้างเล็กน้อยตอนทำงานช่วงแรก ๆ อาจจะมีเขียนไม่กี่ content แต่ไหน ๆ ก็มาแล้วก็ลุยเลยละกัน เรื่องที่ว่าก็คือ Flutter นั้นเอง

Flutter คืออะไร

Flutter เรียกได้ว่าเป็น Framework ที่ใช้สำหรับพัฒนา Mobile application ที่เป็น Cross platform ในความหมายก็คือสามารถทำงานได้ทั้ง iOS และ Android และใช้ภาษา Dart ในการพัฒนา ตรงส่วนนี้หาอ่านที่ไหนก็คงจะได้ละมั้ง ก็คงจะเขียนเหมือน ๆ กันหมด

Installation

สิ่งที่จำเป็นต้องมีสำหรับการเริ่มต้น Flutter เลยก็คงจะไม่พ้น

1. Flutter ขาดตัวนี้ไม่ได้แน่นอนหัวเรื่องก็บอกอยู่ขาดไปก็แย่แล้ว LINK
2. Android Studio แน่นอน เราทำ mobile application จะขาดตัวเจ้าตัวเขียน Android นี้ไปได้ยังไง เอามาใช้จัดการ Application ฝั่ง android
3. XCode สำหรับตัวนี้คนที่ใช้ Mac OS ก็ต้องโหลดลงมาด้วยเพื่อจัดการ application ฝั่ง IOS

และสำหรับ Editor อันนี้ค่อนข้างเป็น Optional จะเลือกใช้ VSCode หรือ IntelliJ ก็ได้ ส่วนตัวผมเลือกใช้ IntelliJ IDEA Community Edition (เนื่องจากไม่ชอบ Android studio ฮ่าๆๆ)

ผมจะไม่พา Install step by step นะ เนื่องจากมันไม่ได้ซับซ้อนอะไร ยิ่งถ้าใช้ IntelliJ หรือ Android Studio มันก็สามารถ download plug-in flutter ได้อยู่แล้วก็ไม่ต้องไปโหลด Flutter SDK จากเว็บมาตรงๆ เลยก็ได้

Create a sample

เรามาเริ่มสร้างตัวอย่างกัน ง่าย ๆ เลยก็ File -> New -> Project

รูปที่ 1 แสดงการเรียก New Project

แน่นอนเลือก Flutter แล้ว Next จากนั้นก็ให้ตั้งชื่อ Project ให้เป็นตามที่ต้องการ และอย่าลืมติ้ก generate sample content เพื่อให้มันสร้างตัวอย่างให้เรา จากนั้นก็ Finish ไปเลยครับ

รูปที่ 2 แสดงการเรียก New Project ขั้นตอนที่ 2

รูปที่ 3 แสดงตัวอย่างโค้ดเริ่มต้น

ได้ตัวอย่างมาแล้ว ทีนี้ ก่อนที่เราจะมาอธิบายตัวอย่าง เราต้องเข้าใจพื้นฐานบางอย่างของ Flutter ก่อน อย่างแรกๆ เลยก็คือ Flutter มันทำทุกอย่างให้เป็น Widget ไม่ว่าจะเป็นปุ่ม, Textbox หรือ Tab ซึ่งทำให้ ใน 1 application จะมี 1 root widget เสมอ

แล้วทำไมถึงบอกว่าเป็น Root widget ละ ก็อย่างที่บอกไป มันทำทุกอย่างให้เป็น Widget นั้นหมายความว่า ในหน้า 1 หน้าก็ เป็น Widget และใน หน้านั้นก็จะมี Text box อื่นๆ นู่น นี่ นั้น ซ้อนกันอยู่ในนั้น จนเป็น Widget tree

หลังจากอธิบายไปด้านบนแล้วอาจจะทำให้สามารถเข้าใจโค้ดตัวอย่างที่ generate ขึ้นมาได้ง่ายขึ้น มา! เริ่ม!

How it work

ก่อนอื่นต้องอธิบายที่ MyApp ก่อน จะเห็นว่ามีการ Extend StatelessWidget มา เพื่อที่ class MyApp จะสามารถถูกใช้เป็น Widget ได้ (มี StatefulWidget ให้ใช้ด้วยนะ) แต่การจะทำให้เป็น Widget ได้สมบูรณ์นั้นต้องมี Method build (ถ้าไม่มีมันจะขึ้น Warning ตรง MyApp)

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for material.AppBar.actions',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStatelessWidget(),
    );
  }
}

และใน Method build ต้องการค่า return เป็น Widget เนื่องจาก Widget นี้จะเป็นตัวหลักที่จะครอบ application ทั้งหมด จึงใช้ MaterialApp เจ้าตัวนี้จะมีความสามารถในการที่เราจะ Set theme ของ application หรือ รวมไปถึงการ add navigator เข้าไปเพื่อสลับไปหน้าต่าง ๆ

จะเห็นว่าภายใน MaterialApp มีการ Set title, theme และ home แต่ใน home นั้นเรียกไปที่ class MyStatelessWidget

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            tooltip: 'Open shopping cart',
            onPressed: () {
              // ...
            },
          ),
        ],
      ),
    );
  }
}

ที่บรรทัดแรกของ MyStatelessWidget นั้นเป็น Constructor ที่ทำการ pass ค่า key ลงมาจากตัวหลัก และ build ของ MyStatelessWidget มีการ return Widget ชื่อ Scaffold ความสามารถของมันก็คือสร้างหน้าใหม่ที่มีความสามารถที่จะ add appbar เข้าไปได้

AppBar ภายใน Scaffold มีการตั้ง title ว่า Hello World จาก text widget (Text()) ส่วน actions นั้นคือ ตัวสร้าง list ของ widget ที่จะเอาไว้ต่อท้ายจาก title บน AppBar

void main() => runApp(MyApp());

ท้ายที่สุดนี้จะขาดไปไม่ได้เลยก็คือ Method main ซึ่งเป็น Method ที่โปรแกรมจะสิ่งเข้ามาเป็นตัวแรก ซึ่งเราได้สั่ง runApp เอาไว้สั่งไปที่ Method MyApp ว่าให้ทำงานที่ Method นี้

รูปที่ 4 Hello world

เท่านี้เราก็ได้ Sample application และเข้าใจมันอย่างง่ายดาย