Day 09-สร้าง Animationให้ Bar Graph

3 min readJan 9, 2021

สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days)

วันที่9 จะเป็นการทดลองเขียนการสุ่มค่าตัวเลขขึ้นมา เพื่อนำมาเขียนเป็น Bar Graph และลองทำ animation ให้กราฟขยับเวลาเปลี่ยนค่า ซึ่งก็อ้างอิงวิธีการจาก

ูZero to One with Flutter

It was late summer 2016, and my first task as a new hire at the Google office in Aarhus, Denmark was to implement…

medium.com

แต่ว่าจะไม่ได้ทำตามทั้งหมด เพราะอ่านแล้วยังรู้สึกงง เนื่องจากตอนหลังๆ อธิบายแล้วภาพและโค๊ดประกอบมันแปลกๆ แต่เดี๋ยวไว้มีโอกาสจะต้องมาลองแกะโค๊ดเพื่อศึกษาอย่างละเอียดอีกที เพราะบางอย่างอาจจะเป็นเพราะยังมือใหม่เลยยังไม่ค่อยเข้าใจเท่าที่ควร ก็เอาเป็นว่าเอาเท่าที่พอเข้าใจและทำตามได้ก่อนแล้วกัน

ตัวโครงสร้างโค๊ดหลักๆก็จะเป็นการ import ตัว package เพิ่มเติมเข้ามาคือ ‘dart:math’ และ ‘animation.dart’ ในโปรแกรม main ก็จะเป็นการ return ตัว MaterialApp widget โดย home: Property จะเรียกใช้ stateful widget class ชื่อ ChartPage() ดังนั้นเราก็จะต้องสร้าง stateful widget และ state class เพื่อให้รองรับสถานะของตัวกราฟและตัวเลขที่เปลี่ยนแปลงเมื่อผู้ใช้กดปุ่มรีเฟรช และใน state class นี้จะไปเรียก widget class ที่ชื่อ BarChartPainter เพื่อทำการวาดกราฟอีกที

ใน State class จะเป็นการสร้างตัวแปรชื่อ random เพื่อสุ่มค่าตัวเลขขึ้นมา ตัวแปร dataSet เพื่อเก็บค่าเริ่มต้น ตัวแปร animation เพื่อใช้ในการควบคุมการแสดง Animation และตัวแปร tween เพื่อทำการ interpolate ค่าในการเล่น Animation

และจะมี method ที่ชื่อ initState() สำหรับกำหนดสถานะเริ่มต้น โดยกำหนดค่าระยะเวลาในการเล่น Animation ประมาณ 300 มิลลิวินาที กำหนดค่า tween และค่า animation ให้เล่นแบบไปข้างหน้า

dispose() สำหรับคืนค่าทรัพยากรที่ใช้ในการเล่น Animation

และ changeData() สำหรับการ set ค่า state และสุ่มค่าตัวเลขให้อยู่ในช่วง 0 ถึง 100

จากนั้นในส่วน build method จะ return Scaffold widget โดยมีการเรียกใช้ widget class ที่ชื่อ CustomPaint() สำหรับในการสร้างภาพกราฟ โดยจะทำการเรียก widget class ที่ชื่อ BarChartPainterในการกำหนดขนาดรูปร่างและสีของกราฟ และมี Text widget สำหรับแสดงค่าตัวเลขที่สุ่มขึ้นมาด้วย

นอกจากนี้ก็จะมีการสร้างปุ่มสำหรับให้ผู้ใช้กดเพื่อรีเฟรชโดยการไปเรียก method changeData เพื่อเปลี่ยนค่าตัวเลขใหม่

ใน widget class ที่ชื่อ BarChartPainter ก็จะมีการกำหนดตัวแปร barWidth เพื่อกำหนดความกว้างของแท่งกราฟ และจะสร้าง method ชื่อ paint() สำหรับสร้างตัวกราฟด้วย Rect class ที่จะทำการสร้างรูปสี่เหลี่ยมจากการกำหนดขอบด้านซ้าย ขอบด้านบน และค่าความกว้างความสูง