web analytics

Flutter Project : สร้างแอปเครื่องคิดเลขง่ายๆด้วย Flutter

cove

สวัสดีครับ บล็อกนี้เป็นบล็อกที่ทำค้างไว้นาน เป็นเรื่องเกี่ยกวับการทำแอปเครื่องคิดเลขแบบง่ายๆ ผมเขียนไว้ตอนหัดเขียน Flutter ใหม่ๆ แต่ไหนๆก็เขียนแล้วก็เลยมาต่อให้จบ ซึ่งแอปเครื่องคิดเลขมักจะเป็นโจทย์ classic สำหรับตอนเราหัดเขียนโปรแรกม จะว่าไปแล้วผมเองก็เขียนแอปเครื่องคิดเลขนี้มาหลายครั้งอยู่เหมือนกัน เขียนใน Windows Form , Windows 10 App , Android แล้วก็มา Flutter

 

เริ่มต้น

ประเด็นหลักคือ เรียนรู้เกี่ยวกับการทำ layout ใน Flutter เลยจะไม่เน้นเรื่องของฟังชันก์นะ
โดยจะลอกหน้าตา แอปเครื่องคิดเลขใน Windows 10 แบบนี้

1

 

New Flutter Project กันเลย

 

ทำส่วนแสดงคำตอบ เป็นช่องว่างด้านบน

3

 

ทำส่วนปุ่มตัวเลข ลองทำแค่แถวเดียวก่อน

 

เพิ่ม NumPad ต่อจากช่องคำตอบ

4

 

ทำแถวของปุ่มตัวเลขเพิ่ม

5

 

เพิ่มปุ่ม บวกลบคูณหารและปุ่มสัญลักษณ์พิเศษต่างๆ

b1

 

ใส่สีของปุ่มให้แตกต่างกัน ถ้าเป้นปุ่มตัวเลขจะพืนหลังต่างจากปุ่มอื่นๆ

b2

 

ต่อมาทำให้ปุ่มสามารถกดตัวเลขแล้วไปแสดงที่หน้าจอคำตอบได้
ก็ประกาศตัวแปรใน state

 

เอาค่าไปใส่ที่ Text

 

ที่ปุ่มตัวเลข เพิ่ม parameter เพื่อรับ function ว่ากดแล้วให้ทำอะไร

 

เพิ่ม onTap ให้ปุ่ม ปุ่มกดแล้วให้เพิ่มเลขที่ไปช่องคำตอบ

 

ที่ method สำหรับกดตัวเลขก็เช็คเงื่อนไขเล็กน้อย เช่น ถ้ามีค่าเป็น 0 จะ 0 ซ้อนกันไม่ได้

a2

 

จากนั้นก็เพิ่ม method อื่นๆ ให้ครบ ซึ่งไม่น่าจะแยกแล้ว เช่น ปุ่ม backspace ลบตัวเลขตัวสุดท้ายออก

 

a3

 

ปรับแต่งให้สวยงาม

b3

 

โค้ดแบบเต็มๆ ดูกันที่ Github เลย

https://github.com/benznest/calculator-app-flutter