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

3 min readJan 26, 2021

สอนตัวเองเขียน 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 ได้ดีขึ้นมากเลยทีเดียว