การทำรูปภาพใน AlertDialog บน Flutter

สวัสดีครับวันนี้จะพามาทำ 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);
              Navigator.of(context).pop();
            },
          ),
 
           FlatButton(
            child: Text("ยกเลิก"),
            onPressed: () {
              // ใส่เงื่อนไขการกดยกเลิก
              Toast.show("ยกเลิก", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);
              Navigator.of(context).pop();
            },
          ),
        ],
      );

เรามาดูเงื่อนไขของ AlertDialog กันก่อนนะครับ ตามโค้ดด้านบนคือการ return AlertDialog แล้วภายในโค้ดจะมีการกำหนด Image , หัวข้อ (Text) , เนื้อหา (content) ซึ่งก็จะใส่ข้อความประกาศที่เราต้องการลงไป

จากนั้นพอเลื่อนลงมาใน action ที่นี้จะเป็นการกำหนด FlatButton หรือปุ่มนั้นเอง โดยจะใส่เป็น child: Text("ข้อความที่ต้องการ") แล้วกำหนดข้อความนั้นลงไป

ส่วน onPressed : () ก็คือการกดนั้นเอง โดยตามตัวอย่าง เมื่อกดแล้วจะให้แสดงข้อความ Toast ออกมา และทำการปิด AlertDialog ลงไปครับ

class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: AlertWithIcon()
              )
            )
          );
  }
}

ประกาศคลาส MyApp และทำการ extends StatelessWidget แล้ว child: AlertWithIcon() เพื่อไปสร้าง Method ต่อไป

class AlertWithIcon extends StatefulWidget {
  AlertWithIconWidget createState() => AlertWithIconWidget();
}

ประกาศคลาส AlertWithIcon จากนั้น createState() สร้าง Method AlertWithIconWidget เพื่อไปสร้าง UI ต่อไป

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AlertDialog'),
      ),
      body: Center(
        child:
            RaisedButton(
              onPressed: () => showAlert(context),
              child: Text('แสดงผล',style: TextStyle(fontSize: 20),),
              textColor: Colors.white,
              color: Colors.red[400],
              padding: EdgeInsets.fromLTRB(15, 12, 15, 12),
            ),
      ),
    );
  }

ภายใน Scaffold จะเป็นการกำหนด UI ของแอพ โดยกำหนด AppBar และสร้างปุ่มกด RaisedButton เมื่อกดจะไปที่ Method showAlert(context) ตามโค้ดบนสุด

โค้ดทั้งหมด

import 'package:flutter/material.dart';
import 'package:toast/toast.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: AlertWithIcon()
              )
            )
          );
  }
}
 
class AlertWithIcon extends StatefulWidget {
  AlertWithIconWidget createState() => AlertWithIconWidget();
}
 
class AlertWithIconWidget extends State {
  showAlert(BuildContext context) {
    showDialog(
    context: context,
    builder: (BuildContext context) {
      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);
              Navigator.of(context).pop();
            },
          ),
 
           FlatButton(
            child: Text("ยกเลิก"),
            onPressed: () {
              // ใส่เงื่อนไขการกดยกเลิก
              Toast.show("ยกเลิก", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);
              Navigator.of(context).pop();
            },
          ),
        ],
      );
     },
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AlertDialog'),
      ),
      body: Center(
        child:
            RaisedButton(
              onPressed: () => showAlert(context),
              child: Text('แสดงผล',style: TextStyle(fontSize: 20),),
              textColor: Colors.white,
              color: Colors.red[400],
              padding: EdgeInsets.fromLTRB(15, 12, 15, 12),
            ),
      ),
    );
  }
}