Day24-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่3
สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days)
วันนี้จะมาเขียนในส่วนที่เมื่อผู้ใช้เลือก Category แล้วให้ทำการแสดงหัวข้อข่าวใน Category นั้นๆ และเนื่องจากตัวหัวข้อข่าวเราสามารถเลือกได้จากหลายประเทศในการแสดงผล ดังนั้นจึงทำการเพิ่มตัวแปร เพื่อเก็บตัวประเทศที่เราอยากจะเลือกไว้ในตัวแปร xcountry ซึ่งเราจะประกาศตัวแปรนี้ไว้นอก stateful class โดยจะมีค่าเริ่มต้นเป็น ‘us’
เราจะทำการสร้างไฟล์ categorynews.dart และสร้าง stateful widget class ชื่อ CategoryNews ซึ่งไฟล์นี้จะมีลักษณะเหมือนกับไฟล์ home.dart แต่ใน state class จะต่างกันตรงที่ method ในการส่งไปเพื่อเรียกหัวข้อข่าวจากตัว API จะเป็นการส่งตัว category พร้อมกับตัวแปรที่ระบุประเทศชื่อ countryไปแทน ใน initState() เราจะตั้งค่า country=xcountry และทำการเรียก getCategoryNews() method ซึ่งเราจะสร้างขึ้น ดังรูป
ในส่วนของไฟล์ news.dart ให้เราทำการแก้ไขในส่วนของการรับค่า String ทั้งใน getNews(String country) และ getCategoryNews(String category, String country) และเปลี่ยนใช้ค่าตัวแปร country และ category เพิ่มใน url ที่ทำการเรียกตัวAPI ดังรูป
จากนั้นในไฟล์ home.dart ในส่วนของ CategoryTitle ที่เป็น stateless widget class ในส่วน build method ให้เพิ่ม GestureDectector()widget เข้าไปโดยใน onTap: Property เมื่อผู้เลือกทำการเลือก category จะทำการเรียก Navigator widget โดยจะส่งค่า categoryName เรียกไปยัง CategoryNews() widget เพื่อไปทำการเรียกตัวหัวข้อข่าวตาม category ที่เลือก
จากนั้นเราจะทำการเพิ่มเมนูในการเลือกประเทศที่จะเรียกดูหัวข้อข่าวในส่วนของ appBar Property โดยจะใส่ actions: Property เพื่อสร้างเมนูจาก PopupMenuButton widget และเมื่อผู้ใช้ทำการเลือก ให้ตรวจสอบเงื่อนไขจาก onSelected: Property และทำการเรียก getCategoryNews พร้อมคืนค่า category และประเทศที่ผู้ใช้เลือกเพื่อทำการเรียกหัวข้อข่าวใหม่อีกครั้ง
เมื่อผู้ใช้ทำการเลือกหัวข้อข่าว ก็จะเป็นการแสดงผลหน้าเว็บข่าวนั้นๆ โดยเราจะเรียกใช้ package ที่ชื่อ webview_flutter ซึ่งให้เราทำการติดตั้งตัว package นี้ จากนั้นให้สร้างไฟล์ articleview.dart และสร้าง stateful widget class ชื่อ ArticleView และทำการ import package ที่เกี่ยวข้อง โดยในส่วนของ state class จะ return ตัว Scaffold widget ที่มี appBar: Property เหมือนกับในไฟล์ ้home.dart และ categorynews.dart
ในส่วน body: Property เรียก WebView widget โดยใช้ค่า initialUrl: Property จากตัวแปร blogUrl ที่ส่งมาจากการใช้ Navigator widget ตอน return ตัว GestureDetector ใน BlogTitle widget
เมื่อทำการรันโปรแกรมเราก็สามารถจะเลือกดูหัวข้อข่าวและเว็บลิงค์ไปยังตัวข่าวนั้นๆได้จาก category ที่ระบุไว้และสามารถเลือกประเทศของหัวข้อข่าวได้ ดังรูป
สุดท้ายจะขอสรุปภาพให้เห็นถึงไฟล์ต่างๆที่สร้างขึ้นรวมถึง Widget และ Class ต่างๆที่ใช้ใน app นี้ดังรูป ก็นับว่าเป็นโปรเจคที่มีความซับซ้อนประมาณนึง แต่ก็ได้เรียนรู้ถึงการจัดการรูปแบบของไฟล์ Widget และ class ต่างๆทำให้มองเห็นภาพรวมของการเขียน 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 ให้กับไอคอนและเก็บค่าสถานะ