สำหรับนักพัฒนา Flutter

โปรเจกต์เดียวทั้งสองร้าน

TL;DR. แอป Flutter ส่งไปทั้ง App Store และ Play Store พร้อมกัน Mokbi ส่งออกขนาดที่จำเป็นของทั้งสองร้านจากงานดีไซน์เดียว: iPhone 6.9", iPad 13", Galaxy S25 Ultra และ Galaxy Tab S9 Ultra ใน ZIP เดียวต่อภาษา แล้วเผยแพร่ไปทั้งสองร้านค้าได้ทันที ไม่ต้องทำ workflow แยกสองชุด

จุดแข็งของ Flutter คือ "codebase เดียวสองร้าน" แต่ screenshot generators ส่วนใหญ่ไม่ได้ยึดแนวคิดนั้นทำให้ต้องสร้างงานดีไซน์สองครั้งครั้งหนึ่งสำหรับสัดส่วน iPhone และอีกครั้งสำหรับ Android Mokbi ถูกออกแบบมาสำหรับความเป็นจริง multi-platform: เลือกอุปกรณ์ที่ต้องการออกแบบครั้งเดียวด้วยตัวจัดวางหลายพาเนลส่งออก ZIP ที่จัดระเบียบตาม platform → device → ภาษา

Flutter screenshot workflow

  1. รันแอปบนอุปกรณ์จริงหรือ simulator ถ่ายพาเนลที่ต้องการ: ภาพหลักฟีเจอร์สำคัญ use case ที่โดดเด่น flutter screenshot ทำงานได้จาก command line
  2. เปิด Mokbi ลากภาพหน้าจอ PNG ลงฟีเจอร์ auto-fit จับคู่สัดส่วนของภาพกับกรอบอุปกรณ์ที่เลือกโดยไม่มี letterbox
  3. สร้างคารูเซล 3-5 พาเนลพร้อมคำบรรยายเลเยอร์ครอบคลุม (แถบ gradient เป็นต้น) ทำงานข้ามพาเนลได้
  4. เลือกอุปกรณ์สำหรับทั้งสองร้าน iPhone 16 Pro Max (App Store 6.9") และ Galaxy S25 Ultra (Play Store) เพิ่ม iPad 13" และ Galaxy Tab S9 Ultra สำหรับแท็บเล็ต
  5. แปลเป็นทุกภาษาที่เกี่ยวข้อง แอป Flutter มักมีเป้าหมายครบ 50 ภาษา App Store + ตลาด Play ทั่วโลก
  6. ส่งออกหรือเผยแพร่ ดาวน์โหลด ZIP เดียว (6.9"/, iPad 13"/, Galaxy/ แต่ละส่วนมีโฟลเดอร์ย่อยตามภาษา) หรือเผยแพร่หน้าร้านค้าทั้งหมดไปทั้งสองร้านค้าได้ทันที

ทางเลือกใน Flutter ecosystem

แพ็คเกจ screenshot บน pub ถ่ายภาพ widget ดิบจากแอปที่รันอยู่มีประโยชน์สำหรับถ่ายภาพต้นฉบับแต่ไม่เพิ่ม marketing overlays เหมือน trade-off เดียวกับ Fastlane snapshot บนฝั่ง iOS: ถ่ายจากแอปจริงกับออกแบบเป็น marketing carousel

ส่วนผสมที่ทีม Flutter ส่วนใหญ่ใช้: flutter screenshot หรือแพ็คเกจ screenshot บน pub สำหรับถ่ายพาเนลจากแอปจริงจากนั้นใช้ Mokbi สำหรับการจัดองค์ประกอบ marketing และส่งออกพร้อมภาษา

จัดการ design conventions iOS กับ Android

ภาพหน้าจอแอปเดียวกันดูต่างกันใน iPhone frame กับ Pixel frame เพราะความหนาของ bezel รูปทรง notch และ Android nav-bar conventions Mokbi แสดงผลทั้งสองแบบถูกต้องคุณสามารถสลับ status bar บน iOS (convention 9:41) และตั้งค่ามุมเอียงต่อ device class เพื่อให้คารูเซลสอดคล้องกันทั้งสองร้าน

เรียนรู้: ฟีเจอร์ · คู่มือ · ราคา

เปิดเครื่องมือแก้ไข →