Day 10-การทำ Bar Graph จากค่าสุ่มอย่างง่ายๆ

3 min readJan 10, 2021

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

เนื่องจากเมื่อวานทำเรื่อง Animated Bar Graph แล้วรู้สึกว่าน่าจะมีวิธีอื่นที่เข้าใจได้ง่ายกว่าในการสร้างกราฟขึ้นมาเลยไปลองหาวิธีต่างๆมาได้หลายวิธี โดยในวันนี้จะลองทำตามจาก youtube นี้

ซึ่งไม่ต้องใช้ Package เสริมอะไรเลยมีแค่ import ‘math.dart’ เข้ามาเท่านั้น โดยโครงสร้างโค๊ดก็จะเริ่มจาก stateless widget ที่ return ตัว MaterialApp() widget และค่าhome: Property ก็จะเรียก stateful widget ที่ชื่อ MyBarGraphApp()

ใน state class widget จะมีการประกาศตัวแปรสำหรับสร้างค่าสุ่มตัวเลข ซึ่งอันนี้เอามาจากตัวอย่างของ Day 09 และประกาศค่าตัวแปร dataSet ขึ้นมา8 ค่าเพื่อเก็บค่าที่สุ่มขึ้นมาทั้ง 8 ค่าโดยการสุ่มจะอยู่ในช่วง0–100และตั้งค่าเริ่มต้นไว้ที่50 โดยจะทำการสร้าง method ชื่อ changeData() เพื่อ setState เริ่มต้น

ในส่วนของ build method ก็จะเป็นการจัดวางตำแหน่งของกราฟและข้อความที่จะแสดงบนหน้าจอ โดยจะreturn ตัว Scaffold widget ที่มี appBar และ body: Property ซึ่งในส่วนของ Container widget ที่เป็นตัวใส่รูปของกราฟจะไปเรียกฟังก์ชัน _progress() โดยจะใส่พารามิเตอร์ที่เป็นค่า dataSet แต่ละตัว และก็จะมีการสร้างปุ่มกด floatingActionButton เมื่อผู้ใช้ทำการกดก็จะไปเรียก method ในการสุ่มค่าตัวเลข

ในฟังก์ชั่น_progress() จะทำการreturn LayoutBuilder widget ที่มี builder: Property ในการสร้าง Container widget แทนรูปกราฟโดยส่วนที่เป็นกราฟชุดแรกจะเป็นสีเทาจางๆเป็นพื้นหลังและทำการซ้อนด้วย Container widget แทนกราฟที่กำหนดเป็นสีฟ้า โดยกำหนดความสูงของกราฟจากค่าตัวเลขที่สุ่มมา

เมื่อทำการรันโปรแกรม กราฟจะแสดงค่าเริ่มต้นเท่ากับ50 เมื่อผู้ใช้กดปุ่มรีเฟรช กราฟก็จะเปลี่ยนความสูงไปตามค่าที่สุ่มได้ดังรูป

เนื่องจากวิธีการสร้างกราฟวิธีนี้ไม่ได้ใช้ widget ในการระบายภาพเหมือนอย่างใน Day09 เลยยังไม่แน่ใจว่าถ้าจะทำให้มันมี Animation เหมือนกับตัวอย่างใน Day09 จะต้องทำอย่างไร ไว้จะพยายามลองหาข้อมูลต่อไป แต่อย่างน้อยก็ได้กราฟแบบง่ายๆมาใส่ในapp ของเราแล้ว

Support me at:

Ko-fi :https://ko-fi.com/bitesizestory

Buy me a coffee :https://www.buymeacoffee.com/bitesizestory

ติดตามบทความ สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days) ทั้งหมดได้จากลิงค์ด้านล่าง

Day25-สร้าง app สำหรับอัพเดทยอดผู้ติดเชื้อโควิด19 ทั่วโลก

Day24-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่3

Day23-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่2

Day22-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่1

Day21-ใช้ WebView ในการแสดงผลไฟล์ html5 ด้วย webview_flutter_plus package

Day20-ใช้ GridView และการเปลี่ยน interface แนวตั้งและแนวนอน

Day19-ทำ Flip Card ด้วย flip_card package

Day18-สร้าง ListView จากไฟล์ json