Tanat29Blog

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

  สำหรับนักพัฒนาทุกคนคงเคยเจอปัญหากับรายละเอียดการส่งค่าจะหน้าที่ 1 ไปหน้าที่ 2 เพราะเราต้องให้ตัวแอปมีการนำค่าเหล่านี้ไปใช้งานได้ต่อ ไม่ทำการดึงค่ามาใหม่จากที่ต่างๆ ซึ่งทุกระบบสามารถทำได้ครับ และตัวอย่างนี้จะเป็นของ Flutter บ้างจะมีการรับค่าส่งค่ายังไง (How to pass data) ListTile ( leading : CircleAvatar ( backgroundImage : AssetImage ( 'assets/images/logo.png' ), ), title : Text ( 'A1' ), subtitle : Text ( 'Floor: 1st, Roof: No' ), onTap : () => Navigator . push ( context, MaterialPageRoute (builder : (context) => MainPage2 (name : "A1" )), ), ), สำหรับตัวอย่างนี้เราจะใช้ ListTile ในการส่งค่าครับ อันอื่นใช้ Button หรืออะไรก็ได้นะ โดยเราจะกำหนดรูปภาพเป็นวงกลมและใส่ Title , Subtitle จากนั้นใส่ onTap เป็นการบอกว่ากดแล้วให้ทำอะไรต่อ โดยคำสั่งคือ Navigator . push ( context, MaterialPageRoute (builder : (context) => MainPage2 (name : "A1" )), ), ให้ไปยังคลาส MainPage2 ...

สวัสดีครับวันนี้จะพามาทำ AlertDialog บน Flutter กัน โดยรายละทุกอย่างก็เหมือนกัน AlertDialog ของฝั่ง Android เลย มีการกำหนดเงื่อนไข "ตกลง" หรือ "ยกเลิก" เพื่อแจ้งเตือนผู้ใช้งานให้เลือกอย่างใดอย่างนึง  ไฟล์ pubspec.yaml toast: ^ 0.1 . 5 สำหรับตัวอย่างนี้ขอใส่ Toast ลงไปด้วยละกัน เพื่อจะได้ใช้งานเวลากดเลือกเงื่อนไข จะได้มีข้อความแสดงออกมาครับ return AlertDialog( title: Row( children:[ Image.network( 'https://img.icons8.com/color/452/flutter.png' , width: 50 , height: 50 , fit: BoxFit.contain,), Text( ' Alert Dialog Image. ' ) ] ), content: Text( "Are You Sure Want To Proceed?" ), actions: <Widget>[ FlatButton( child: Text( "ตกลง" ), onPressed: () { // ใส่เงื่อนไขการกดตกลง Toast.show( "ตกลง" , context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM); ...

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

  วันนี้จะมาสอนการทำ BottomNavigationBar บน Flutter กันครับ หรือก็คือการทำปุ่ม Tab ด้านล่างของแอพพลิเคชั่น ซึ่งถ้าเป็น Android Studio เขาจะทำเป็น Fragment กัน ส่วนใน Flutter นั้นเราจะใช้  bottomNavigationBar และใช้ BottomNavigationBarItem เป็นตัวกำหนด List ต่างๆ ของ Tab ซึ่งเอาจริงๆ ผมว่าเขียนง่ายกว่าเยอะเลยนะ