Flutter เริ่มต้นโครงสร้างพื้นฐาน EP.1

โครงสร้างหลัก มีประมาณนี้ (เรียบเรียงจาก ที่ อบรม fluuter อ.เอ นะครับ)
ปล.เป็นบันทึกทำความเข้าใจนะครับ อาจจะไม่ถูกทั้งหมด

จะมีการ import ตัว package ของ material จาก flutter

import 'package:flutter/material.dart';  //นำเข้า

ประกาศ main ว่าจะเปิด class ชื่ออะไร

void main() {
  runApp(MyApp());
}

ส่วนของ class ที่เราได้สร้างไว้ เช่น

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App demo arm',
      home:Scaffold(    
       appBar: AppBar(
        title: Text('My App I"m ARM'),
      ),
      body: Center(
        child: Text(
          'สวัสดี I m ARM ',
        )),
      ),
    );
  }
}

เวลารัน ก็จะได้

อธิบาย แต่ละตัวคือ
class ชื่อ MyApp   แต่จะมีรายละเอียด อยู่ภายใน

คือค่าที่จะ return  จะต้องเป็น MaterialApp()
และภายใน MaterialApp ก็จะเป็นส่วนขยายอีกที จะมีหลักๆคือ
title คือประกาศ title app เวลาเรากด View app ที่รันอยู่ทั้งหมด
home คือ ส่วนของหน้าแรกที่จะให้เปิดหน้าไหน หรือ object อะไร เช่น
Scaffold()

และส่วนของ Scaffold() ก็มีส่วนขยาย ภายในอีก คือ appBar  กับ body

ซึ่งส่วนใหญ่จะแยกออกไปสร้างอีกไฟล์ แยกเป็น หน้าๆ หรือ page นั้นๆที่จะให้เปิดอีกที ไม่รวมไว้ใน  หน้า main.dart  เพราะถ้าร่วมไว้หน้าเดียว จะจัดการยาก

เวลาจะเพิ่มหน้าใหม่ ควรสร้างโฟรเดอร์แยกไว้






แล้วค่อย สร้างไฟล์ Dart File เพื่อเอาไว้แยกหน้า main page อีกที

ตั้งชื่อไฟล์ อะไรก็ได้ ยกตัวอย่างเช่น main_page.dart
แล้วค่อยเขียน โครงสร้าง ของภาษา dart เข้าไปเหมือนกับฟอร์มหลัก

เพิ่ม import  material เข้าไป ก็จะได้

import 'package:flutter/material.dart';

เพื่อที่จะสามารถใช้งาน ส่วนขยายของ flutter ได้

ต่อมาก็สร้าง StatefulWidget โดยพิมพ์ stf  แล้วจะมีเมนูให้เลือก
ตามรูปนี้

กด enter ก็จะได้โครงสร้างของ StatefulWidget  ให้ จะได้ไม่ต้องพิมพ์เยอะ

จากนั้นใส่ชื่อ class ของหน้านี้ เช่น MainPage  ตัว class ย่อยๆก็จะเปลี่ยนตาม

ที่นี้ก็ย้าย Scaffold มาใส่ในหน้าแยกนี้แทน  ตรงตำแหน่ง return

ส่วนหน้า main.dart ก็จะกำหนดแค่ class ของหน้า main_page  มาใส่แทน ก็จะได้

สังเกตุที่  home := MainPage()  ซึ่งจะต้อง import ไฟล์ main_page.dart มาก่อน สังเกตุที่แถวที่ 2  หลังจาก import ตัว material.dart แล้วนะครับ

ส่วนการกำหนดค่าตัวแปร ก็มีเหมือนกับ java script แต่ก็จะมีข้อแตกต่างอยู่เช่น  จะกำหนดรูปแบบก่อน ยกตัวอย่าง
String name = ‘panu pakdeesan’;    ประกาศตัวแปร name เก็บค่า string
แต่กรณีเป็น object เช่น
Map sex = {‘name’:’panu pakdeesan’,’Lang’:’TH, ENG’,’age’: ’33’}; ดูๆเหมือนรูปแบบของ json นั้นเอง
ส่วนกรณี ตัวแปรแบบ array ยกตัวอย่าง
List<String> fruits = [‘apple’,banana’];  จะเป็นตัวแปรแบบ array แต่ค่าที่อยู่ใน array นี้เป็น string นั้นเอง

ต่อมา มาดูวิธีการสร้าง iconbutton
ไปที่ไฟล์ main_page.dart ไฟล์แยกหน้า นะครับ (ต่อ)

การสร้าง IconButton  จะใส่ไว้ในส่วนของ appBar  หลัง title
โดยพิมพ์  actions เข้าไป จะอยู่ในรูปแบบ Widget นะครับ

ตามรูปเลย  ส่วนของ IconButton จะเพิ่มเข้ามาในส่วน actions โดยมีเครื่อง [] อยู่ภายใน
รูปแบบคือ

IconButton(
    icon: Icon(Icons.person_pin),
    onPressed: () {
      print('Hello 1');
    }),

โดยจะมี Icons.  กดจุด แล้วจะมีตัวเลือกให้  ว่าจะใช้ icon  รูปแบบอะไร






เราสามารถเลือกได้
หากเป็น Icons.person_pin ก็จะได้ตามรูปนี้นะครับ.

เป็นรูปคน โดยมีรูปวงกลม ให้รูปคนอยู่ภายใน

และกรณีเลือก  ​Icons.my_location จะเป็นรูปของ GPS ให้ตามรูปนี้

เป็นส่วนช่วยให้เราทำงานง่ายขึ้น
ต่อมาเราก็มาเขียน onPressed สำหรับกรณี event ของการกดปุ่มนี้ หรือ หลังจากทัส ของปุ่มนี้ จะเกิดอะไรขึ้น

ยกตัวอย่าง ถ้ากดปุ่มนี้ให้ ส่งค่ามายัง console ด้วยคำสั่ง printf() ก็ได้
รูปแบบ  print(‘My Location’);

เวลารัน แล้วไปกด ก็จะได้ค่า มาแสดงที่หน้าจอ Console

เอาไว้ตรวจสอบการทำงาน ว่าทำงานถูกหรือไม่ ก็จะช่วยให้เรา ทราบและเขียนต่อได้ง่ายขึ้นครับ

ต่อมา มาทำเมนูบา ด้านล่าง
ต้องการทำเมนูบา แบบใหม่ ให้ floatingActionButtonLocation มาแสดงตรงกลาง แต่ให้เมนูบา ด้านล่าง มีรอยแหวงตรงกลาง ตามรูปนี้

กรณีนี้ต้องสร้างตัวแปร แบบ object สร้างมาต่างหาก แล้วกำหนดค่าภายใน object นี้ ยกตัวอย่าง  ชื่อตัวแปร

BottomAppBar bottomAppBar = BottomAppBar()

เราก็สามารถกำหนดคุณสมบัติภายในก่อน แล้วค่อย สั่งให้

bottomNavigationBar

ชี้ไปหาตัวแปร bottomAppBar ก็ได้เช่นกัน   ตามตัวอย่างโค้ดนี้

BottomAppBar bottomAppBar = BottomAppBar(
  color: Color(0xff232f34),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Row(
        children: <Widget>[
          IconButton(
              icon: Icon(
                Icons.home,
                color: Colors.white,
              ),
              onPressed: () {}),
          IconButton(
              icon: Icon(
                Icons.mode_edit,
                color: Colors.white,
              ),
              onPressed: () {}),
        ],
      ),
      IconButton(
          icon: Icon(
            Icons.search,
            color: Colors.white,
          ),
          onPressed: () {}),
    ],
  ),
);

ได้แล้วก็ไปกำหนด ที่  bottonNavigationBar: bottomAppBar,






สังเกตุที่ ข้อความที่ comment สีน้ำเงินไว้นะครับ

โดยเราสามารถกำหนด  Row  ให้ IconButton อยู่กลุ่มเดียวกันได้

คือปุ่ม home กับปุ่ม mode_edit จะอยู่ด้านซ้าย ด้วยกัน ส่วน ปุ่ม search จะอยู่อีกด้าน นั้นเอง ตามรูปนี้

ต่อมา….เดี่ยวมาต่อ ใน EP.2