Day 10-การทำ Bar Graph จากค่าสุ่มอย่างง่ายๆ
สอนตัวเองเขียน 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
Day17-ทำ Splash Screen ง่ายๆด้วย splashscreen package
Day16-สร้าง Bottom Navigation Bar
Day15-สร้าง Animated Container
Day14-สร้าง Page Navigation Animation ง่ายๆ
Day13-สร้างหน้าจอ slideshow ด้วย carousel_slider package
Day12-สร้างBar Graph ด้วย charts_flutter package
Day11-การทำ Animated Bar Graph จากค่าสุ่มอย่างง่ายๆ
Day10-การทำ Bar Graph จากค่าสุ่มอย่างง่ายๆ
Day09-สร้าง Animationให้ Bar Graph
Day08-ทำ OnBoarding Screen ด้วย Package introduction_screen
Day07-สร้างInteractionง่ายๆบน Page Layout
Day04-สร้าง Interaction ให้กับไอคอนและเก็บค่าสถานะ