Home

Install Flutter on Mac OS

Flutter คือ อะไร ? ลองไปดูที่นี่ครับ https://flutter.io

แปลง่ายๆ มันคือ Hybrid Native App เขียนครั้งเดียว ได้ทั้งแอนดรอย์ และ iOS แล้ว ดีกว่า Hybrid อย่างไร ? ไม่ได้ใช้ WebView แบบ Ionic, Cordova, Phonegap นะ จะใช้ การ Compile Object คล้ายๆ java , Objective C , Kotlin หรือ Swift และ เอา ไบน่ารีโค้ดไปรันใน Device ครับ แน่นอน Perferment ใกล้ Native ข้อเสีย ละ ? Curve การเรียนรู้สู้ เพราะเขียนด้วน ภาษา Dart 

ลงได้ทั้ง 3 Platform วันนี่ มาสเตอร์ ลงด้วย mac OS

Read more: Install Flutter on Mac OS

Redraw Design UI form Xd adobe to xml Layout Android

หลังจากที่เราได้ Export รูปภาพ จาก การออกแบบ Xd ของ adobe ได้แล้ว

 มาสเตอร์ Copy 

ใน res และ Paste ทั้งหมดที่ได้ไปที่นี่ครับ

Paste ให้ครบทุกไฟร์

เรามาโค้ด บนแอนดรอยด์ กัน มาสเตอร์ สร้าง xml เปล่าๆ แบบนี้

และ โค้ด แบบนี่ ไปที่ ไฟร์ fragment_main.xml

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/logo" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/email"
            android:hint="@string/email"
            android:inputType="textEmailAddress" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/password"
            android:hint="@string/password"
            android:inputType="textPassword" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/button_white"
            android:text="Login"
            android:textColor="@color/colorWhite"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:text="New Register"
            android:textColor="@color/colorAccent"
            android:textSize="18sp"
            android:textStyle="bold" />


    </LinearLayout>

</RelativeLayout>

 

 

ส่วนของ  Wallpaper มาสเตอร์ จะแปะไว้ที่ activity_main.xml

ลบ TextView ออกและ ใสโค้ดพวกนี่ครับ

 

ต่อไป มาสเตอร์ สร้าง คลาส สำหรับ Fragment โดยการ สร้าง package ก่อน

และ คลาส MainFragment.java

 

ตั่งชื่อแบบนี่เลย

ได้มาละ Class ของเรา

เอาคลาสเปล่าๆ ของเราไป extends Fragment เลือก Support Library นะครับ และ Override onCreateView พิมพ์ View ที่มาจาก fragment_main

กลับมาที่ คลาสหลัก MainActivity.java

มาสเตอร์ Replace Fragment

ทดสอบในเครื่องจริง

เย้ ได้มาละ ไม่ยากนะครับ ขอบคุณ ภาพจาก คอร์สสอนแอนดรอย์ ส่วนตัวครับ