ฝึกเขียน Flutter วันแรก

เริ่มฝึกเขียน Flutter วันแรก เพราะได้ยินว่าสามารถ build ได้ทั้ง Android และ iOS Application ซึ่งนักเขียนโปรแกรมสามารถเขียนเพียง Code เดียว ด้วยภาษา Dart

import 'package:flutter/material.dart';

ต่อไปให้เราพิมพ์คำว่า st จะมี state ให้เลือกก็คือ stful (Stateful)และ stless (Stateless) ซึ่งมีการใช้งานต่างกัน

สำหรับ stful ย่อมาจาก stateful จะใช้กับอะไรที่ต้องอัพเดทบ่อยๆ ส่วน stless ที่ย่อมาจาก stateless นั้นจะใช้กับไฟล์ main.dart ซึ่งนิยมใช้เป็นหน้าแรกสำหรับแสดงข้อมูลอย่างเดียว ส่วนที่มีการอัพเดทบ่อยๆ จะถูกแยกออกไปไฟล์อื่น เพื่อไม่ทำให้ main.dart ยาวและรกเกินไป

ดังนั้นหน้าแรก เราจะเลือกเป็น Stateless ซึ่ง flutter จะเว้นช่องว่างระหว่าง class กับ extends

ให้ตั้งชื่อ ในกรณีนี้จะตั้งชื่อว่า MyFirstApp และสั่งให้ runApp ที่ชื่อ MyFirstApp เสมอด้วยคำสั่ง void main() => runApp(MyApp()); และนำไปวางก่อน Class

import 'package:flutter/material.dart';

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

class MyFirstApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

ใน Flutter มองทุกอย่างเป็น Widget และสามารถเขียนคำสั่งอยู่ในส่วนการ return ค่า โดยเบื้องต้นให้เปลี่ยน Container() เป็น Scraffold() เพื่อเพิ่มส่วนข้อมูลเข้าไปใน App ส่วนการประกาศค่าที่เป็น Global จะกำหนดอยู่เหนือ @override

ตัวอย่าง Code การเขียนหาค่า BMI

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyFirstApp extends StatelessWidget {
  String firstname = "Nattaphong";
  String address = """
  Hello
  I'm here
  nice to meet you!
  """;
  int age = 40;
  double weight = 95.0;
  int height = 176;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My First App",
      home: Scaffold(
        appBar: AppBar(title: Text("My First Application")),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              print(firstname);
              print(address);
              print("==========");
              double bmi = weight / pow(2, (height / 100));
              print("BMO : , $bmi");
            },
            color: Colors.red,
            textColor: Colors.white,
            child: Text("Click Me!"),
          ),
        ),
      ),
    );
  }
}