วิธีการใช้ปุ่มแยกใน Flutter กับ Back4app

บทนำ ปุ่มแบบแบ่งกลุ่ม (segmented buttons) เป็นส่วนประกอบ ui ที่แนะนำใน material 3 ซึ่งช่วยให้ผู้ใช้สามารถเลือกได้จากสองถึงห้า ตัวเลือก โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการเสนอชุดตัวเลือกที่เป็นเอกสิทธิ์หรือไม่เป็นเอกสิทธิ์ในลักษณะที่สะอาดและเป็นระเบียบ ในบทเรียนนี้ เราจะสำรวจวิธีการใช้ปุ่มแบบแบ่งกลุ่มในแอป flutter โดยใช้ back4app เป็นแบ็กเอนด์ในการจัดเก็บและจัดการตัวเลือกที่เลือก ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณ หากคุณยังไม่ได้ตั้งค่า ให้ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ dart, วิดเจ็ต flutter และการใช้ back4app สำหรับบริการแบ็กเอนด์ ขั้นตอนที่ 1 – การตั้งค่าแบ็กเอนด์ back4app ของคุณ สร้างโปรเจกต์ back4app เข้าสู่ระบบบัญชี back4app https //www back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse สำหรับบทเรียนนี้ ให้สร้างคลาส parse ชื่อ userpreferences เพื่อจัดเก็บตัวเลือกที่เลือกจากปุ่มแบบแบ่งกลุ่ม ชื่อผู้ใช้ (string) ชื่อของผู้ใช้ ตัวเลือกที่เลือก (string) ตัวเลือกที่ผู้ใช้เลือก รับข้อมูลประจำตัว back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ของคุณเพื่อดึงหมายเลขประจำตัวแอปพลิเคชันและคีย์ลูกค้า ซึ่งคุณจะต้องเชื่อมต่อแอป flutter ของคุณกับ back4app ขั้นตอนที่ 2 – การตั้งค่าโปรเจกต์ flutter สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณและรัน flutter create segmented button example เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter latest version รัน flutter pub get เพื่อติดตั้ง dependencies เหล่านี้ เริ่มต้น parse ในแอปของคุณ ใน lib/main dart , เริ่มต้น sdk ของ parse import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home preferencescreen(), ); } } แทนที่ 'your back4app app id' และ 'your back4app client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 3 – การใช้งานปุ่มแบบแบ่งกลุ่ม สร้าง widget preferencescreen ใน lib/main dart , เพิ่ม widget ใหม่เพื่อแสดงและจัดการปุ่มแบบแบ่งกลุ่ม class preferencescreen extends statefulwidget { @override preferencescreenstate createstate() => preferencescreenstate(); } class preferencescreenstate extends state\<preferencescreen> { string? selectedoption; final list\<buttonsegment\<string>> options = \[ buttonsegment(value 'option 1', label text('option 1')), buttonsegment(value 'option 2', label text('option 2')), buttonsegment(value 'option 3', label text('option 3')), ]; @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('user preferences')), body padding( padding const edgeinsets all(16 0), child column( mainaxisalignment mainaxisalignment center, children \[ segmentedbutton\<string>( segments options, selected selectedoption == null ? {} { selectedoption!}, onselectionchanged (newselection) { setstate(() { selectedoption = newselection first; }); savepreference( selectedoption!); }, ), sizedbox(height 20), if ( selectedoption != null) text('selected $ selectedoption', style textstyle(fontsize 16)), ], ), ), ); } future\<void> savepreference(string selectedoption) async { final userpreference = parseobject('userpreferences') set('username', 'test user') // this would normally come from user data set('selectedoption', selectedoption); await userpreference save(); } } โค้ดนี้กำหนด ui ที่เรียบง่ายด้วยปุ่มแบบแบ่งกลุ่มที่อนุญาตให้ผู้ใช้เลือกจากสามตัวเลือก ตัวเลือกที่เลือกจะถูกเก็บไว้ใน back4app ทุกครั้งที่มีการเปลี่ยนแปลงการเลือก ขั้นตอนที่ 4 – การรันแอป รันแอปของคุณ โดยใช้ flutter run คุณควรเห็นปุ่มแบบแบ่งกลุ่มแสดงบนหน้าจอ การเลือกตัวเลือกจะอัปเดตสถานะและเก็บการเลือกใน back4app ตรวจสอบข้อมูลใน back4app โดยการเข้าสู่ระบบในแดชบอร์ด back4app ของคุณและตรวจสอบ userpreferences คลาส คุณควรเห็นรายการที่ตรงกับการเลือกของคุณจากแอป flutter บทสรุป ในบทเรียนนี้ เราได้สำรวจวิธีการใช้งานและใช้ปุ่มแบบแบ่งกลุ่มใน flutter เรายังได้แสดงวิธีการรวม flutter กับ back4app เพื่อเก็บความชอบของผู้ใช้ ปุ่มแบบแบ่งกลุ่มเสนอวิธีที่สะอาดและเข้าใจง่ายในการนำเสนอทางเลือกหลาย ๆ ทางให้กับผู้ใช้ และเมื่อรวมกับแบ็กเอนด์ที่ทรงพลังอย่าง back4app จะช่วยเพิ่มประสบการณ์การใช้งานแอปของคุณได้อย่างมาก สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิดเจ็ตของ flutter โปรดตรวจสอบที่ เอกสาร flutter https //flutter dev/docs , และสำหรับเคล็ดลับการรวมแบ็กเอนด์ โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs โค้ดให้สนุก!