Intro screen in Flutter

วันนี้มาทำ Intro screen แบบพิเศษใส่ไข่กันดีกว่า

Intro screen ที่เห็นตามเน็ตส่วนใหญ่จะประมาณนี้…

Joseph Ajayi

ถ้าเกิด indicator มันไปอยู่ตรงกลางระหว่างรูปกับเนื้อหาแบบนี้ละ

Design by Puri New

เริ่มสงสัยกันแล้วใช่ไหมล้า..ว่าทำยังไง แต่ถ้าผู้อ่านมีวิธีที่สะดวกกว่านี้สามารถบอกได้เลยนะเรียนรู้ไปด้วยกันครับ 😉

Let’s start…

Step #1 : สร้าง flutter project. หรือมือใหม่คลิก

Step #2: Download รูปที่ต้องการในแต่ละหน้าหรือจะใช้รูปใน git [images/] ที่ผมทำเดโม่ก็ได้ครับ

Step #3: เปิด pubspec.yaml และใส่ลิ้งไฟล์รูปเพื่อทำให้ flutter ทราบตำแหน่งของรูปก่อน

assets:
   - images/wonderland1.png
   - images/wonderland2.png
   - images/wonderland3.png

*อย่าลืมกด Get dependencies เพื่อ Sync และระวังเรื่องการเว้นบรรทัดด้วยนะครับ

Step #4 : สร้างไฟล์ intro_item.Dart ขึ้นมาสำหรับจัดการข้อมูลในแต่ละหน้า

List IntroPage = [
  {
    "header": "WELCOME",
    "description": "Patiphan wonderland that just a simple wonderland",
    "image": "images/wonderland1.png",
    "background": "images/bg1.png"
  },
  {...},
];

Step #5: สร้าง Stateful widget ขึ้นมาเพราะว่าเราจะใช้ setState เพื่อ rerender widget ในอนาคตครับ

class Intro extends StatefulWidget { 
 @override _IntroState createState() => _IntroState();
}
class _IntroState extends State<Intro> {
 @override
 Widget build(BuildContext context) {
   return Scaffold();
 }
}

Step #6 : import items.dart

import 'package:intropage/intro_page.dart';

Step #7 : วนลูปสร้างข้อมูลในแต่ละหน้าแล้วเก็บไว้ใน List slides

Step #8 : เตรียม Controller ของ pageView

double currentPage = 0.0;
final _pageViewController = new PageController();

Step #9 : สร้าง indicator หรือ Dots บอกต่ำแหน่ง

Step #10 : นำ slides ที่เราเตรียมใน Step #7 มายัดใส่ pageview โดย itemCount คือจำนวนหน้าที่ต้องการจะสร้าง return หน้าแรกหลังจาก user เลื่อนหน้าไปหน้าต่างๆจะทำการ setState เพื่อ rerender widget ซึ่งก็คือ indicator นั้นเอง

Step #11 : ให้วางโค้ดนี้ต่อจาก PageView.builder และอยู่ภายใต้ Stack นะครับเพราะว่าความสามารถของ stack นั้นจะทำให้ widget ทับซ้อนกันได้และผู้อ่านสามารถกำหนดตำแหน่งด้วย Alignment ได้เลยครับ

Conclusion : จริงๆแล้วหน้า intro page ที่ผมเขียนก็ไม่ได้เรียกว่าพิเศษอะไรหรอกครับแต่ต้องอาศัยการแบ่งที่เผื่อไว้ให้ Indicator, button, skip ดีๆนะครับ

สามารถดูโค้ดเต็มๆที่ Github ได้เลยครับ

PhatipanSuwanich/Intro_flutter

Ref: Joseph Ajayi