web analytics

Flutter : Custom หน้าแสดง Error ใน Flutter

สวัสดีผู้อ่านครับ บล็อกนี้มาลองเล่นอะไรเพิ่มเติมใน Flutter กัน สำหรบคนที่เขียน React หรือ Flutter น่าจะคุ้นเคยกับหน้าจอ error สีแดง ที่แดงมาก นึกว่าเอาเลือดมาระบายหน้าจอ ดูแล้วชวนปวดหัวมาก ซึ่งในหน้าจอ error มันก็จะบอกรายละเอียดนี่แหละอันเดียวกับใน logcat

เรื่องมีอยู่ว่าผมอยากจะเปลี่ยนสีธีมเจ้าหน้าจอนี้ เพราะไม่ค่อยชอบเลย แล้วก็เวลาทำงานจริงๆก็อ่านใน logcat อยู่ดี เลยลองหาข้อมูล พบว่ามันก็ทำได้นะ แค่ใส่ widget ลงไปใน ErrorWidget.builder ซึ่งจริงๆมันจะเป็นฟังก์ชันตัวนึงที่มี error detail ส่งมาให้

ลองใส่ container สีฟ้าให้มัน

  @override
  Widget build(BuildContext context) {

    ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
      return Container(color:Colors.blue);
    };

    return MaterialApp(...);
  }

ตอน error ก็จะเอา container ของเรามาแสดงแทนแล้ว วู้ว ง่ายจัง ส่วนวิธีบังคับให้แสดงหน้า error ก็เช่นใส่ null ให้ Text

Custom Error Page

ไหนๆก็ทำแล้ว เลยเขียนหน้าจอ error ของเราขึ้นมาใหม่เลย เพราะจริงๆแล้วมันก็แค่เอา error detail มาใส่ลงใน Widget เองนี่นะ ลองเขียนเล่นๆ ได้มา 3 แบบ คือ

Error แบบ Laravel

Error แบบ Visual Studio

Error แบบ Blue Screen of Death

Publish on Pub.dev

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

รายละเอียด
https://pub.dev/packages/flutter_custom_error_page/

เพิ่ม dependencies

dependencies:
  flutter:
    sdk: flutter

  ..
  flutter_custom_error_page: 0.1.2

การใช้งาน

จากนั้นก็แค่เพิ่ม ErrorMessageBuilder ให้ errorWidget แล้วกำหนด theme ที่ต้องการ

  @override
  Widget build(BuildContext context) {

    ErrorWidget.builder = ErrorMessageBuilder.build(theme: ErrorTheme.Laravel);

    return MaterialApp(
      builder: (BuildContext context, Widget widget) {
        ErrorWidget.builder = ErrorMessageBuilder.build(theme: ErrorTheme.Laravel);
        return widget;
      },
      home: Scaffold(
        appBar: AppBar(
          title: Text(null), // Force exception.
        ),
        body: HomePage(),
      ),
    );
  }

สรุป

วันนี้ได้ลองทำ custom error page ซึ่งจริงๆแล้วมันก็คือ การแสดง widget แล้วเอา error detail ใส่ลงไป ใน error detail จะมีข้อมูลพวก stacktrace นั่นเอง จากนั้นผมก็ได้ลองทำ error page ในธีมของเราเอง ใครอยากลองปรับแต่งเป็นหน้า error ของตัวเองก็ลองไปปรับแต่งกันได้เลยนะ (:

Source code บน Github
https://github.com/benznest/flutter_custom_error_page