Day 13-สร้างหน้าจอ slideshow ด้วย carousel_slider package

3 min readJan 13, 2021

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

วันนี้จะมาลองทำโปรแกรมง่ายๆที่รันหน้าจอ slideshow รูปภาพที่กำหนด ก่อนอื่นเราก็ต้องไปติดตั้งตัว Package ที่ชื่อ carousel_slider ก่อน ถ้าเราติดตั้ง Pubspec assist เราก็สามารถใช้คีย์บอร์ดพิมพ์ shift+ctrl+p แล้วพิมพ์ pubspec จากนั้นเลือก Pubspec Assist: Add/update dependencies แล้วพิมพ์ carousel_slider ตัว vscode ก็จะทำการเพิ่ม package ให้ในไฟล์ pubspec.yaml อัตโนมัติ รายละเอียดในส่วนของค่าพารามิเตอร์ที่เป็น Option ต่างๆสามารถไปดูได้จากที่นี่

จากนั้นก็จะทำการสร้าง main โปรแกรมเหมือนเช่นเคย ด้วยการพิมพ์ mat แล้วเลือก MaterialApp โปรแกรมก็จะสร้างโค๊ดที่เป็น stateless widget class ให้ เราก็ตั้งชื่อเป็น MyCarousalApp จากนั้นให้เราเอา mouse วาง cursor ไว้ที่ตัวคำว่า Statefulwidget แล้วจะเห็นตัวหลอดไฟสีเหลืองตรงหน้าบรรทัดของโค๊ด ให้กดแล้วเลือกเปลี่ยนเป็น stateful widget ซึ่งเราก็จะได้ stateful class และ state class

ใน state class เราจะทำการประกาศตัวแปรเพื่อเก็บค่า string ชื่อไฟล์รูปภาพ โดยที่รูปภาพจะต้องทำการสร้างโฟล์เดอร์ชื่อ assets/images ที่ตัวโฟล์เดอร์หลักก่อนจากนั้นให้เตรียมรูปแล้วนำไปวางไว้ในโฟล์เดอร์ที่สร้างขึ้น จากนั้นให้ทำการตั้งค่า path ของรูปภาพที่ pubspec.ymal จากนั้นจึงทำการสร้าง List ที่เป็น String ที่ชื่อ _imgList เพื่อเก็บไดเร็กทอรี่ของภาพ

ในส่วน return MaterialApp ใน home: Property จะใช้ Scaffold widget ที่มี appBar และ body: Property โดยใน body: จะใส่ Container widget และใน child: Property ให้ไปทำการ copy code จาก หน้าเว็บ ของ carousel_slider Package ในส่วนหัวข้อ How to use ที่เขียนว่า Simply create a CarouselSlider…มา paste หลังจากchild: Property จากนั้นก็ให้ปรับค่า height: double.infinity ทำการเพิ่ม autoPlayAnimationDuration: Duration(milliseconds: 1000) เป็นการกำหนดระยะเวลาในการเล่น Animation ตั้งค่า aspectRatio: 1.873 ค่า viewportFraction:1.0 และค่า autoPlay: true จากนั้นในส่วน items: Property ให้ใส่ค่าตัวแปร String ที่เราสร้างขึ้นมาชื่อ _imgList ใส่ค่า fit: Property เป็น BoxFit.fill และตั้งค่าwidth: Property เป็น double.infinity

เมื่อทำการรันโปรแกรมจะได้ภาพ slideshow ดังรูป