เริ่มต้นใช้งานแพ็คเกจ GetX ในแอพพลิเคชั่น Flutter

Flutter เป็นหนึ่งในวิธีที่เร็วที่สุดในการสร้างแอปพลิเคชันดั้งเดิมข้ามแพลตฟอร์มอย่างแท้จริง มันมีคุณสมบัติที่ช่วยให้นักพัฒนาสามารถสร้างประสบการณ์ UI ที่สวยงามอย่างแท้จริงสำหรับผู้ใช้ของพวกเขา

อย่างไรก็ตาม ส่วนใหญ่เพื่อให้บรรลุสิ่งต่าง ๆ เช่น การนำทางไปยังหน้าจอ การจัดการสถานะ และการแสดงการแจ้งเตือน จำเป็นต้องมีต้นแบบจำนวนมาก ต้นแบบเหล่านี้มักจะชะลอประสิทธิภาพการพัฒนาของนักพัฒนาที่พยายามสร้างคุณลักษณะและดำเนินการตามกำหนดเวลา

ตัวอย่างเช่น ต้นแบบที่จำเป็นสำหรับการนำทางไปยังหน้าจอในแอปพลิเคชัน Flutter สมมติว่าคุณต้องการนำทางไปยังหน้าจอที่ชื่อว่า AboutScreen คุณจะต้องเขียน:

 Navigator.push( context, MaterialPageRoute(builder: (context) => AboutScreen()), );

การดำเนินการต่อไปนี้จะมีประสิทธิภาพและเป็นมิตรกับนักพัฒนามากกว่า:

 Get.to(AboutScreen());

เมื่อคุณต้องการย้อนกลับไปยังหน้าก่อนหน้าใน Flutter คุณจะต้องเขียน:

 Navigator.pop(context);

คุณจะสังเกตเห็นว่าเรามักขึ้นอยู่กับคุณสมบัติบริบทสำหรับบางสิ่งที่เป็นเรื่องธรรมดาเหมือนกับการนำทางระหว่างหน้าจอ เกิดอะไรขึ้นถ้าเราสามารถทำสิ่งนี้แทน:

 Get.back();

ตัวอย่างข้างต้นเป็นวิธีการบางส่วนที่สามารถปรับปรุงการพัฒนาแอปพลิเคชันใน Flutter ให้ใช้งานง่ายขึ้นและมีประสิทธิภาพด้วยต้นแบบที่น้อยลง หากคุณชอบความเรียบง่ายและมีประสิทธิภาพในการสร้างคุณลักษณะและแนวคิด ใน Flutter แพ็คเกจ Get จะทำให้คุณสนใจ

GetX . คืออะไร

Get หรือ GetX เป็นเฟรมเวิร์กที่รวดเร็ว เสถียร และเบาเป็นพิเศษสำหรับการสร้างแอปพลิเคชัน Flutter

GetX นำออกจากกล่องด้วยการจัดการสถานะประสิทธิภาพสูง การฉีดการพึ่งพาอัจฉริยะ และการจัดการเส้นทางด้วยวิธีที่ง่ายและใช้งานได้จริง

GetX ตั้งเป้าที่จะย่อขนาดสำเร็จรูปในขณะที่ให้ไวยากรณ์ที่เรียบง่ายและใช้งานง่ายสำหรับนักพัฒนาที่จะใช้ในขณะที่สร้างแอปพลิเคชันของพวกเขา แก่นของ GetX คือหลักการ 3 ประการเหล่านี้:

• ผลงาน
  GetX มุ่งเน้นที่ประสิทธิภาพของแอปพลิเคชันของคุณโดยการใช้คุณลักษณะต่างๆ เพื่อใช้ทรัพยากรให้น้อยที่สุด
• ผลผลิต
  GetX ต้องการให้นักพัฒนาใช้คุณลักษณะของตนเพื่อให้เกิดประสิทธิผลโดยเร็วที่สุด ทำได้โดยใช้รูปแบบและการปฏิบัติที่จำง่าย ตัวอย่างเช่น โดยทั่วไปแล้ว นักพัฒนาซอฟต์แวร์ควรกังวลในการลบตัวควบคุมออกจากหน่วยความจำ แต่ GetX ที่พร้อมใช้งานทันทีมีการจัดการอัจฉริยะที่ตรวจสอบตัวควบคุมในแอปพลิเคชันของคุณและนำตัวควบคุมออกเมื่อไม่ได้ใช้งานโดยค่าเริ่มต้น
• องค์กร
  GetX อนุญาตให้แยกมุมมอง ตรรกะการนำเสนอ ตรรกะทางธุรกิจ การฉีดพึ่งพา และการนำทางในแอปพลิเคชัน Flutter ของคุณ คุณไม่จำเป็นต้องมีบริบทเพื่อนำทางระหว่างเส้นทาง ดังนั้นคุณจึงไม่ต้องพึ่งพาแผนผังวิดเจ็ตสำหรับการนำทาง คุณไม่จำเป็นต้องมีบริบทเพื่อเข้าถึงตัวควบคุม/บล็อกของคุณผ่าน inheritedWidget ดังนั้นคุณจึงสามารถแยกตรรกะการนำเสนอและตรรกะทางธุรกิจออกจากเลเยอร์มุมมองของคุณได้อย่างสมบูรณ์ คุณไม่จำเป็นต้องฉีดคลาส Controllers/Models/Blocs ลงในแผนผังวิดเจ็ตผ่านผู้ให้บริการหลายราย เพราะ GetX นี้ใช้คุณสมบัติการพึ่งพาอาศัยกันของตัวเอง ซึ่งจะแยก DI ออกจากมุมมองทั้งหมด

คุณสมบัติของ GetX

GetX มาพร้อมกับคุณสมบัติสองสามอย่างที่คุณต้องการในการพัฒนาแอพประจำวันของคุณใน Flutter ลองดูที่พวกเขา:

การจัดการของรัฐ

หนึ่งในคุณสมบัติเด่นของ GetX คือคุณสมบัติการจัดการสถานะที่ใช้งานง่าย การจัดการสถานะใน GetX สามารถทำได้โดยใช้ต้นแบบเพียงเล็กน้อยหรือไม่มีเลย

การจัดการเส้นทาง

GetX จัดเตรียม API สำหรับการนำทางภายในแอปพลิเคชัน Flutter API นี้เรียบง่ายและใช้โค้ดน้อยลง

การจัดการการพึ่งพา

GetX มอบวิธีที่ชาญฉลาดในการจัดการการพึ่งพาในแอปพลิเคชัน Flutter ของคุณ เช่น ตัวควบคุมมุมมอง GetX จะลบคอนโทรลเลอร์ที่ไม่ได้ใช้ในขณะนั้นออกจากหน่วยความจำ นี่เป็นงานที่คุณในฐานะนักพัฒนาจะต้องทำด้วยตนเอง แต่ GetX จะทำสิ่งนั้นให้คุณโดยอัตโนมัติเมื่อแกะกล่อง

การทำให้เป็นสากล

GetX มี i18n ที่พร้อมใช้งานทันที ช่วยให้คุณสามารถเขียนแอปพลิเคชันด้วยการสนับสนุนภาษาต่างๆ

การตรวจสอบความถูกต้อง

GetX มีวิธีการตรวจสอบสำหรับการตรวจสอบอินพุตในแอปพลิเคชัน Flutter ของคุณ ซึ่งสะดวกมากเพราะคุณไม่จำเป็นต้องติดตั้งแพ็คเกจตรวจสอบแยกต่างหาก

พื้นที่จัดเก็บ

GetX มอบคีย์-ค่าที่รวดเร็ว สว่างเป็นพิเศษ และซิงโครนัสในหน่วยความจำ ซึ่งจะสำรองข้อมูลไปยังดิสก์ในการดำเนินการแต่ละครั้ง มันเขียนด้วยภาษา Dart ทั้งหมดและรวมเข้ากับแพ็คเกจ GetX หลักได้อย่างง่ายดาย

เริ่มต้นกับ GetX

ตอนนี้คุณได้เห็นแล้วว่า GetX คืออะไรและมีคุณสมบัติและประโยชน์อะไรบ้าง มาดูวิธีตั้งค่าในแอปพลิเคชันของคุณกัน เราจะสร้างแอพสาธิตเพื่อดูคุณสมบัติส่วนใหญ่ที่เราได้กล่าวถึงในการใช้งานจริง มาเริ่มกันเลย.

สร้างแอพพลิเคชั่น Flutter ใหม่ล่าสุด

เราจะเริ่มต้นด้วยการสร้างแอปพลิเคชัน Flutter ใหม่ผ่าน Flutter CLI ฉันถือว่าเครื่องของคุณได้รับการตั้งค่าสำหรับการพัฒนาแอปพลิเคชันด้วย Flutter แล้ว ดังนั้นเราจึงดำเนินการ:

 flutter create getx_demo

สิ่งนี้จะสร้างรหัสพื้นฐานที่จำเป็นสำหรับแอปพลิเคชัน Flutter ถัดไป เปิดโปรเจ็กต์ที่คุณเพิ่งสร้างขึ้นในตัวแก้ไขที่คุณเลือก (เราจะใช้ VS Code สำหรับบทความนี้) จากนั้นเราจะเรียกใช้โครงการเพื่อให้แน่ใจว่าทำงานได้ดี (ตรวจสอบให้แน่ใจว่าคุณมีอุปกรณ์ที่เชื่อมต่ออยู่หรือโปรแกรมจำลองการทำงาน/โปรแกรมจำลองการทำงาน)

เมื่อแอปพลิเคชันทำงาน คุณจะเห็นแอปพลิเคชันตัวนับเริ่มต้นที่ Flutter ทำงานให้คุณเมื่อคุณสร้างแอปพลิเคชัน Flutter ใหม่ สิ่งที่เรากำลังจะทำคือการใช้แอปพลิเคชันตัวนับเดียวกัน แต่ด้วย GetX เพื่อจัดการสถานะของแอป (ซึ่งเป็นตัวแปรการนับ)

เราจะเริ่มต้นด้วยการล้าง main.dart และเหลือเพียงส่วนย่อยของรหัสนี้:

 # main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

ถึงตอนนี้ แอปพลิเคชันของเราจะใช้งานไม่ได้เนื่องจากไม่มีวิดเจ็ต MyHomePage อีกต่อไป มาแก้ไขกันเถอะ ด้วย GetX เราไม่ต้องการวิดเจ็ตที่เก็บสถานะ และยังสามารถแยก UI ของเราออกจากตรรกะทางธุรกิจของเราได้อย่างชัดเจน ดังนั้นเราจะสร้างสองไดเร็กทอรีภายใน lib/ ไดเร็กทอรีเหล่านี้คือ:

มาสร้างวิดเจ็ต MyHomePage ภายใน views/ ชื่อไฟล์จะเป็น my_home_page.dart หลังจากที่คุณสร้างแล้ว ให้เพิ่มข้อมูลโค้ดต่อไปนี้ลงไป:

 import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

ตอนนี้เรามีวิดเจ็ต MyHomePage แล้ว มานำเข้าใน main.dart กัน เพิ่มคำสั่งนำเข้าที่ด้านบนของ main.dart ด้านล่าง import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

ตอนนี้ไฟล์ main.dart ของคุณควรมีลักษณะดังนี้:

 import 'package:flutter/material.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

เมื่อคุณบันทึกแอปพลิเคชันของคุณตอนนี้ ข้อผิดพลาดทั้งหมดควรได้รับการแก้ไขและแอปจะทำงาน แต่คุณจะสังเกตได้ว่าเมื่อคลิกปุ่มอีกครั้ง ตัวนับจะไม่ได้รับการอัปเดต หากคุณดูที่โค้ด views/my_home_page.dart คุณจะเห็นว่าเราแค่ฮาร์ดโค้ด 0 เป็นค่าของวิดเจ็ต Text และส่ง null ไปยังตัวจัดการ onPressed ของปุ่ม มารวม GetX เข้าด้วยกันเพื่อให้แอปพลิเคชันทำงานได้อีกครั้ง

การติดตั้ง GetX

ตรงไปที่หน้าการติดตั้งสำหรับ GetX บน pub.dev แล้วคุณจะเห็นบรรทัดของโค้ดที่จะคัดลอกไปยังไฟล์ pubspec.yml ของคุณเพื่อติดตั้ง GetX ในขณะที่เขียนบทความนี้ GetX เวอร์ชันปัจจุบันคือ 3.23.1 ดังนั้นเราจะคัดลอกบรรทัด:

 get: ^3.23.1

จากนั้นวางลงในส่วนการ dependencies ของไฟล์ pubspec.yml ของเรา เมื่อคุณบันทึกไฟล์ get ควรติดตั้งให้คุณโดยอัตโนมัติ หรือคุณสามารถเรียกใช้ด้วยตนเองในเทอร์มินัลของคุณ

 flutter pub get

ส่วนการพึ่งพาของไฟล์ pubspec.yml ของคุณควรมีลักษณะดังนี้:

 dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

เราได้กล่าวว่า GetX อนุญาตให้คุณแยก UI ของแอปพลิเคชันของคุณออกจากตรรกะได้ ทำได้โดยจัดเตรียมคลาส GetxController ซึ่งคุณสามารถสืบทอดเพื่อสร้างคลาสคอนโทรลเลอร์สำหรับมุมมองของแอปพลิเคชันของคุณ สำหรับแอปปัจจุบันของเรา เรามีมุมมองเดียว ดังนั้นเราจะสร้างตัวควบคุมสำหรับมุมมองนั้น ตรงไปที่ไดเร็กทอรี controllers/ และสร้างไฟล์ชื่อ my_home_page_controller.dart ซึ่งจะเก็บคอนโทรลเลอร์สำหรับมุมมอง MyHomePage

หลังจากที่คุณสร้างไฟล์แล้ว ให้นำเข้าแพ็คเกจ GetX ก่อนโดยเพิ่มสิ่งนี้ที่ด้านบนของไฟล์:

 import 'package:get/get.dart';

จากนั้น คุณจะสร้างคลาสชื่อ MyHomePageController ข้างในนั้นและขยายคลาส GetxController นี่คือลักษณะที่ไฟล์ควรมีลักษณะดังนี้:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController {}

มาเพิ่มสถานะการนับให้กับคลาสที่เราสร้างกันเถอะ

 final count = 0;

ใน GetX เพื่อทำให้ตัวแปรสามารถสังเกตได้ — หมายความว่าเมื่อมีการเปลี่ยนแปลง ส่วนอื่นๆ ของแอปพลิเคชันของเราจะขึ้นอยู่กับตัวแปรนั้นจะได้รับแจ้ง ในการดำเนินการนี้ เราเพียงแค่เพิ่ม .obs ให้กับการกำหนดค่าเริ่มต้นของตัวแปร ดังนั้นสำหรับตัวแปร count ข้างต้น เราจะเพิ่ม .obs เป็น 0 ดังนั้นการประกาศข้างต้นจะมีลักษณะดังนี้:

 final count = 0.obs;

นี่คือลักษณะของไฟล์คอนโทรลเลอร์ของเราในขณะนี้:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController { final count = 0.obs; }

เพื่อสรุปสิ่งต่าง ๆ ด้วย MyHomePageController เราจะใช้วิธีการ increment นี่คือข้อมูลโค้ดที่จะทำ:

 increment() => count.value++;

คุณจะสังเกตเห็นว่าเราจำเป็นต้องเพิ่ม .value ให้กับตัวแปรการนับเพื่อเพิ่มค่านั้น เราทำสิ่งนี้เพราะการเพิ่ม .obs ให้กับตัวแปรทำให้เป็นตัวแปรที่สังเกตได้ และเพื่อให้ได้ค่าของตัวแปรที่สังเกตได้ คุณทำได้จากคุณสมบัติ value

ดังนั้นเราจึงเสร็จสิ้นด้วยตัวควบคุม ตอนนี้เมื่อค่าของการนับเปลี่ยนไป ส่วนใด ๆ ของแอปพลิเคชันของเราที่ใช้ค่านั้นจะได้รับการอัปเดตโดยอัตโนมัติ

ตอนนี้เราจะไปที่มุมมองของเราและแจ้งให้ทราบเกี่ยวกับคอนโทรลเลอร์ที่เราเพิ่งสร้างขึ้น เราจะทำเช่นนั้นโดยการสร้างอินสแตนซ์คลาสคอนโทรลเลอร์โดยใช้คุณสมบัติการจัดการการพึ่งพา GetX เพื่อให้แน่ใจว่าคอนโทรลเลอร์ของเราจะไม่อยู่ในหน่วยความจำเมื่อไม่ต้องการใช้อีกต่อไป

ใน views/my_home_page.dart ให้นำเข้าแพ็คเกจ Get และคอนโทรลเลอร์ที่คุณสร้างขึ้นดังนี้:

 import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';

จากนั้นในคลาส MyHomePage เราจะสร้างอินสแตนซ์ MyHomePageController :

 final MyHomePageController controller = Get.put(MyHomePageController());

ตอนนี้เรามีอินสแตนซ์ของ MyHomePageController แล้ว เราสามารถใช้ตัวแปรสถานะและเมธอดได้ ดังนั้นเริ่มต้นด้วยสถานะ ใน GetX เพื่อทำเครื่องหมายส่วนหนึ่งของ UI ของคุณที่จะสร้างใหม่เมื่อตัวแปรสถานะเปลี่ยนแปลง คุณจะห่อส่วนนั้นด้วยวิดเจ็ต Obx GetX มีวิธีอื่นในการทำเช่นนี้ แต่วิธีนี้ง่ายกว่าและสะอาดกว่ามาก

สำหรับแอปพลิเคชันการนับของเรา เราต้องการให้วิดเจ็ตข้อความอัปเดตด้วยการนับปัจจุบัน ดังนั้นเราจะห่อวิดเจ็ตข้อความด้วยวิดเจ็ต Obx ดังนี้:

 Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),)

ต่อไป เราจะแทนที่สตริงคงที่ 0 ด้วยตัวแปรการนับจาก MyHomePageController ดังนี้:

 Obx(() => Text('${controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),)

สุดท้าย เราจะเรียกวิธีการเพิ่มเมื่อกดปุ่ม floatingActionButton ดังนี้:

 floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ),

โดยรวมแล้ว ไฟล์มุมมอง MyHomePage ของเราควรมีลักษณะดังนี้:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Obx( () => Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

เมื่อคุณบันทึกแอปพลิเคชันของคุณหรือคุณเรียกใช้ซ้ำ แอปตัวนับควรทำงานเหมือนเดิมเมื่อเราสร้างแอปพลิเคชันครั้งแรก

ฉันเชื่อว่าคุณได้เห็นแล้วว่าการจัดการสถานะที่ใช้งานง่ายด้วย GetX นั้นเราไม่ต้องเขียนต้นแบบอะไรมากมาย และความเรียบง่ายนี้จะชัดเจนยิ่งขึ้นเมื่อแอปพลิเคชันของคุณซับซ้อน คุณจะสังเกตเห็นว่ามุมมองของเราไม่มีสถานะใด ๆ ดังนั้นจึงสามารถเป็นเครื่องมือไร้สัญชาติได้ สมองของมุมมองในทางกลับกันเป็นคลาสคอนโทรลเลอร์ที่จะถือสถานะสำหรับมุมมองและวิธีการ

การนำทางใน GetX

เราได้เห็นการจัดการสถานะใน GetX ตอนนี้เรามาดูกันว่า GetX รองรับการนำทางภายในแอปพลิเคชันของคุณอย่างไร ในการเปิดใช้งานคุณสมบัติการนำทางของ GetX คุณจะต้องทำการเปลี่ยนแปลงเพียงครั้งเดียวใน main.dart ซึ่งก็คือการเปลี่ยนวิดเจ็ต MaterialApp เป็นวิดเจ็ต GetMaterialApp ให้ทำโดยการนำเข้าก่อน เข้าไปที่ด้านบนสุดของ main.dart

 import 'package:get/get.dart';

จากนั้นเราทำการเปลี่ยนแปลงใน MaterialApp เพื่อให้ไฟล์ main.dart ของเรามีลักษณะดังนี้:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

ตอนนี้แอพของเราได้รับการตั้งค่าเพื่อรองรับการนำทาง GetX เพื่อทดสอบสิ่งนี้ เราจะสร้างมุมมองอื่นในไดเร็กทอรี views/ เราจะเรียกสิ่งนี้บน about_page.dart และจะมีรหัสต่อไปนี้:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); } }

จากนั้นเราจะไปที่ MyHomePage และเพิ่มปุ่มที่เมื่อกดแล้วจะนำทางเราไปยัง AboutPage เช่นนั้น ปุ่มควรอยู่ใต้วิดเจ็ต Obx นี่คือ:

 FlatButton(onPressed: () {}, child: Text('About GetX'))

เราจะต้องนำเข้า AboutPage ที่ด้านบนของไฟล์ MyHomePage :

 import './about_page.dart';

เพื่อบอกให้ GetX นำทางไปยัง AboutPage ทั้งหมดที่เราต้องการคือโค้ดหนึ่งบรรทัดซึ่งก็คือ:

 Get.to(AboutPage());

มาเพิ่มสิ่งนั้นในการโทรกลับ onPressed ของวิดเจ็ต FlatButton ดังนี้:

 FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX'))

เมื่อคุณบันทึกแอปพลิเคชันของคุณตอนนี้ คุณจะสามารถไปยังหน้า AboutPage ได้

คุณยังสามารถเลือกที่จะแทนที่มุมมอง MyHomePage ด้วย AboutPage เพื่อให้ผู้ใช้ไม่สามารถย้อนกลับไปยังหน้าก่อนหน้าได้ด้วยการกดปุ่มย้อนกลับของอุปกรณ์ สิ่งนี้มีประโยชน์สำหรับหน้าจอต่างๆ เช่น หน้าจอการเข้าสู่ระบบ เมื่อต้องการทำสิ่งนี้ ให้แทนที่เนื้อหาของตัวจัดการ onPressed ด้วยรหัสด้านล่าง:

 Get.off(AboutPage());

ซึ่งจะแสดงมุมมอง MyHomePage และแทนที่ด้วย AboutPage

ตอนนี้เราสามารถนำทางไปยัง AboutPage ได้ ฉันคิดว่ามันจะไม่เลวร้ายนักที่จะสามารถกลับไปที่ MyHomePage เพื่อทำสิ่งนี้ เราจะเพิ่มปุ่มใน AboutPage หลังวิดเจ็ต Padding และในตัวจัดการ onPressed เราจะโทรออก ไปที่ Get.back() เพื่อนำทางกลับไปที่ MyHomePage :

 FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home') )

สแน็คบาร์

ใน Flutter ตามอัตภาพเพื่อแสดง Snackbar คุณจะต้องเขียนสิ่งนี้:

 final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar);

คุณสามารถสังเกตได้ว่าเรายังขึ้นอยู่กับคุณสมบัติ context มาดูกันว่าเราจะทำสิ่งนี้ให้สำเร็จใน GetX ได้อย่างไร ไปที่มุมมอง MyHomePage และเพิ่มวิดเจ็ต FlatButton อื่นใต้ปุ่มสุดท้ายที่เราเพิ่ม นี่คือตัวอย่างสำหรับปุ่ม:

 FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))

มาแสดงข้อความ 'Yay! GetX Snackbar ที่ยอดเยี่ยม ภายในฟังก์ชันตัวจัดการ onPressed ให้เพิ่มบรรทัดโค้ดด้านล่าง:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

เรียกใช้แอปพลิเคชันของคุณและเมื่อคุณคลิกที่ "แสดงปุ่ม Snackbar" คุณจะเห็นสแน็คบาร์อยู่ด้านบนของแอปพลิเคชันของคุณ!

ดูว่าเราลดจำนวนบรรทัดที่จำเป็นในการแสดงสแน็คบาร์ในแอปพลิเคชัน Flutter ได้อย่างไร มาปรับแต่งเพิ่มเติมใน Snackbar กันดีกว่า ให้มันปรากฏที่ด้านล่างของแอพ เปลี่ยนรหัสเป็นสิ่งนี้:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, );

บันทึกและเรียกใช้แอปพลิเคชันของคุณ จากนั้น Snackbar จะปรากฏขึ้นที่ด้านล่างของแอปพลิเคชัน เรามาเปลี่ยนสีพื้นหลังของ Snackbar แบบโปร่งใสกันเถอะ เราจะเปลี่ยนเป็นสี amberAccent จากคลาส Colors ใน Flutter อัปเดตรหัสเป็นสิ่งนี้:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );

โดยรวมแล้ว โค้ดปุ่มควรมีลักษณะดังนี้:

 FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))

ไดอะล็อก

GetX มีวิธีการง่ายๆ ในการสร้าง AlertDialog ใน Flutter มาดูการทำงานกัน สร้างปุ่มอื่นด้านล่างปุ่มก่อนหน้า:

 FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))

มาเรียก GetX เพื่อแสดงกล่องโต้ตอบการแจ้งเตือน:

 Get.defaultDialog();

ที่จะแสดง Alert Dialog เริ่มต้นที่สามารถปิดได้โดยการแตะนอก Dialog คุณสามารถดูว่าในโค้ดบรรทัดเดียวเรามีกล่องโต้ตอบการแจ้งเตือนที่ใช้งานได้อย่างไร มาปรับแต่งกันหน่อย ขอเปลี่ยนชื่อและข้อความ:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');

บันทึกและเรียกใช้แอปของคุณ แล้วคุณจะเห็นการเปลี่ยนแปลงเมื่อคุณกดปุ่ม "แสดงกล่องโต้ตอบการแจ้งเตือน" เราสามารถเพิ่มปุ่มยืนยันและยกเลิกได้ดังนี้:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');

มีหลายวิธีในการปรับแต่งกล่องโต้ตอบ GetX และ API นั้นค่อนข้างใช้งานง่ายและเรียบง่าย

บทสรุป

GetX ถูกสร้างขึ้นเพื่อปรับปรุงประสิทธิภาพการทำงานของนักพัฒนา Flutter เมื่อพวกเขาสร้างคุณสมบัติต่างๆ แทนที่จะต้องค้นหาต้นแบบที่จำเป็นในการทำสิ่งต่างๆ เช่น การจัดการสถานะ การจัดการการนำทาง และอื่นๆ GetX ได้จัดเตรียม API ที่ใช้งานง่ายอย่างง่าย เพื่อให้บรรลุกิจกรรมเหล่านี้โดยไม่ลดทอนประสิทธิภาพการทำงาน บทความนี้จะแนะนำคุณเกี่ยวกับ GetX และวิธีเริ่มต้นใช้งานในแอปพลิเคชัน Flutter ของคุณ

• คุณสามารถหาตัวอย่างได้ที่นี่ →