เริ่มต้นสร้าง App แรกด้วย Flutter กับความเข้าใจเบื้องต้น

02 December 2019 By Ninenik Narkdee
scaffold first app flutter material materialapp

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ scaffold first app flutter material materialapp



ตอนที่แล้วเราได้รู้จักโครงสร้าง ของโปรเจ็ค flutter
ที่เป็น Demo ไปแล้ว รวมถึงได้รู้ลำดับการพัฒนา App เบื่องต้น
สามารถทบทวนเนื้อหาได้ที่บทความ
    ทดสอบรันโปรเจ็ค Demo ของ Flutter ใน Android Studio http://niik.in/952 
    https://www.ninenik.com/content.php?arti_id=952 via @ninenik
 
    ในเนื้อหาตอนต่อไปนี้ เราจะมาสร้าง App แรกหรือจะเรียกว่า First App ซึ่ง
คุ้นเคยกับดีกับคำว่า Hello World สามารถสร้าง Flutter โปรเจ็คใหม่ขึ้นมา หรือจะใช้
ตัว Demo จากตอนที่แล้วก็ได้ แต่ในที่นี้จะใช้ตัว Demo จากตอนที่แล้ว โดยจะทำการ
ลบโค้ดเก่าในไฟล์ main.dart ออกให้หมด รวมถึงลบไฟล์ widget_test.dart ในโฟลเดอร์
test ออกไปก่อน แล้วเริ่มต้นสร้าง แต่ละองค์ประกอบ เพื่อ ทำความเข้าใจหลักการทำงาน
 

เริ่มสร้าง Hello World App

    เมื่อเริ่มตันพัฒนา App ใดๆ เรามักคุ้นเคยกับการใช้งานรูปแบบ print("Hello World") หรือการแสดงข้อความออกทาง console เพื่อ
เตรียมความพร้อมสำหรับการเขียนโปรแกรม ซี่ง Flutter ก็เช่นกัน เนื่องจาก Flutter ใช้ภาษา Dart ในการพัฒนาโปรแกรม รูปแบบเริ่มต้น
ก็จะเป็น 
 
void main(){
  print("Hello World");
}
 
 

    การใช้งาน Center และ Text widget

    ตัวอย่างด้านบน เป็นการ print ข้อความ "Hello World" ออกทาง console แต่การใช้งาน Flutter Framework เกือบทั้งหมดจะเป็น widget ดังนั้น เราจะ
ใช้งาน Center widget และ Text widget สำหรับ แสดงข้อความอยู่กึ่งกลางของหน้าจอ โดยเรียกใช้งานคำสั่ง runApp() ของ Flutter 
ในรูปแบบดังนี้
 
import 'package:flutter/material.dart';

void main(){
    runApp(
        Center(
            child: Text(
                'Hello World',
                textDirection: TextDirection.ltr,
            ),
        )
    );
}
    เมื่อเรามีการเรียกใช้งาน Center widget ซึ่งเป็น widget ใน Material library ก็จะมีการ import package มาให้อัตโนมัติ หรือเรา
สามารถจะกำหนดเองเข้าไปก็ได้  ทดสอบรัน App ดูผลลัพธฺ์ที่ได้ 
 
 

 
 
    การกำหนดข้อความด้วย Text widget ข้างต้น มีการใช้งาน textDirection เราสามารถดู parameter อื่นๆ ที่เป็น options ของ widget
ได้โดยทำการกดปุ่ม Ctrl แล้วคลิกที่ชื่อ widget ที่ต้องการ ไฟล์ widget นามสกุล dart นั้นๆ ก็จะแสดงขึ้นมา ให้เราสามารถดูค่า parameter
ที่ต้องการได้ เช่นต้องการดูในส่วนของ Text widget ก็จะได้เป็น
 
 

 
 
    ไฟล์ text.dart ก็จะแสดงข้อมูลดังรูป
 
 

 

 

    การใช้งาน MaterialApp และ Material widget

    อย่างไรก็ตาม หากเรามีการใช้งาน MaterialApp widget ซึ่งมีค่า default ของภาษาเป้น American English และเป็นข้อความจาก 
ซ้ายไปขวา หรือ left-to-right เราก็ไม่จำเป็นต้องกำหนด textDirection ที่เป็น ltr ให้กับ Text widget อีก ซึ่ง App ภาษาไทยก็ใช้รูปแบบ
เดียวกัน ดังนั้น เราจะเพิ่มการใช้งาน MaterialApp และ Material widget เข้ามาใช้งาน ดังนี้
 
    runApp(
        MaterialApp(
            title: 'First Flutter App',
            home: Material(
                color: Colors.lightGreen,
                child: Center(
                    child: Text(
                        'Hello World',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0
                        )
                    )
                )
            )
        )
    );
    ตอนนี้เราไม่จำเป็นต้องกำหนด textDirection ให้กับ Text widget ที่ใช้งาน MaterialApp widget แล้ว โดยกำหนด style ให้กับข้อความ
แทน โดยกำหนดสี เป็นสีขาว และกำหนดขนาดเป็น 20.0 เพราะ fontSize เป็น double  สำหรับ MaterialApp เรากำหนด parameter สองค่า
คือ title ค่านี้จะแสดงเมื่อเรากดย่อหน้า App เพื่อดู Recent App หรือ App ที่กำลังใช้งานอยู่ ก็จะแสดงชื่อ title ค่านี้  ต่อด้วย home ซึ่งก็
คือค่าที่จะกำหนด widget แรกของหน้าหลักหรือหน้าแรกของเรา โดยเราใช้ Material widget หรือชิ้นย่อยๆ ของ widget ที่เราสามารถกำหนด
คุณสมบัติต่างๆ เพิ่มเติมได้ เช่นในนี้เรากำหนดสี เป็นสีเขียวอ่อน ใช้ lightGreen และกำหนด child เป็น ส่วนที่เหลือเดิมทั้งหมด พอรันแล้ว
ก็ได้ผลลัพธฺ์ดังรูปด้านล่าง
 
 

 
 
 

    การใช้งาน Scaffold widget

    การใช้งาน Material wiget เพื่อใช้เป้นหน้า home ช่วยให้เราสามารถแสดงเนื้อหาได้เต็มพื้นที่ แต่โดยทั่วไปแล้ว และโดยส่วนใหญ่ มักมีการ
แสดงข้อมูลหัวข้อในหน้าแรก ดังนั้นเราจะใช้งาน Scaffold widget มากำหนดในส่วนของ home แทน Material widget โดย Scaffold จะรอง
รับการกำหนด app bar, title และ body เหมือนกับการแยกเป็นส่วนๆ อีกที จากนั้นเราก็กำหนด Material ไว้ในส่วนของ body จะได้เป็นดังนี้
 
    runApp(
        MaterialApp(
            title: 'First Flutter App',
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Welcome to Flutter'),
                    backgroundColor: Colors.green
                ),
                body: Material(
                    color: Colors.lightGreen,
                    child: Center(
                        child: Text(
                            'Hello World',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 20.0
                            )
                        )
                    )
                )
            )
        )
    );
    ในการใช้งาน Scaffold ทำให้เราเพิ่มและจัดการในส่วนของ appBar ได้ ในที่นี้เรากำหนด title และสีพื้นหลัวเป้นสีเขียว ให้ตัดกับสีเขียว
อ่อนในส่วนของ Material widget ทดสอบรัน จะได้ผลลัพธ์เป็นดังนี้
 
 

 
 
    ถ้าเรามองลักษณะการโค้ดโปรแกรมข้างต้นจะเห็นว่า เป็นการวาง widget ซ้อนๆ กันเป็นโครงสร้างรูปแบบที่ต้องการ ดังนั้นถ้า App ของ
เรายิ่งมีความซับซ้อน หรือมีองค์ประกอบของ widget มากขึ้นเรื่อยๆ จำนวนบรรทัดของโค้ดในส่วนของ main() ฟังก์ชั่นก็จะมากขึ้นตามไป
ด้วย ในลำดับต่อไป เราจะทำการย้ายโค้ดในส่วนของ การใช้งาน widget โดยตรงในฟังก์ชั่น main() มาสร้างเป้น class ใหม่ โดยจะทำการ
สืบทอดมาจาก StatelessWidget และ StatefulWidget ตามลำดับ จะขออธิบายในตอนหน้า
 
    ทบทวนเล็กน้อยก่อนจบเนื้อหาในตอนนี้
    - ในตัวอย่างเราทำการสร้าง Material App โดย Material คือภาษาสำหรับออกแบบรูปแบบการแสดง ที่ใช้เป็นมาตรฐานทั้งในแบบ 
mobile และ web โดย Flutter จะมี Material widget จำนวนมากให้ใช้งาน
    - Scaffold widget เป็น widget จาก Material library ที่ใช้สำหรับกำหนด app bar, title และ body ที่รวมโครงสร้างของ widget สำหรับ
หน้า home  โดย widget ที่เป็นโครงสร้างย่อย สามารถมีรูปแบบการกำหนดที่ซับซ้อนหรือมีหลายระดับได้ ตามต้องการ และตามความ
เหมาะสมของการใช้งาน เข้าใจอย่างง่ายก็คือ เหมือนการจัดเรียงโครงสร้าง html ของหน้าเว็บเพจ ที่มี DOM Element ต่างๆ ประกอบรวม
กันขึ้นรูปร่างหรือโครงสร้างตามต้องการ
    - ส่วนของ body จะประกอบด้วย Center widget และมี Text widget อยู่ด้านในอีกที  ตัว Center widget ใช้สำหรับจัดเรียง child หรือ 
widget ที่อยู่ด้านในตัวมัน ให้เรียงอยู่กึ่งกลางของหน้าจอ


เพียงกด Like หรือ Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: material materialapp scaffold flutter first app







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ