In flutter the Alert dialog can support all the type of widgets inside it. We have so many times see Alert dialog with image icon added in it to represent icon of any company or organization. We have to use the Row widget in Alert dialog view in Title section in order to display Icon inside it. So in this tutorial we would Set Show Image Icon Inside Alert Dialog Box in flutter Android iOS Example Tutorial.
Contents in this project Set Show Image Icon Inside Alert Dialog Box in flutter Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class here directly.
|
1 |
void main() => runApp(MyApp()); |
3. Create MyApp class extends State less widget and call our AlertWithIcon() class in child section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: AlertWithIcon() ) ) ); } } |
4. Create another class named as AlertWithIcon extends with StatefulWidget. In this class we would call the AlertWithIconWidget class using createState() method. This method would enable the mutable state management. We have to use multiple class organized structure because the Alert dialog needs to access the Application build context.
|
1 2 3 4 5 |
class AlertWithIcon extends StatefulWidget { AlertWithIconWidget createState() => AlertWithIconWidget(); } |
5. Create our main child AlertWithIconWidget class extends with State.
|
1 2 3 4 |
class AlertWithIconWidget extends State { } |
6. Create a function named as showAlert() with Build Context argument. Then we would call the showDialog() inbuilt method for displaying the Alert dialog message box. Inside the Alert dialog box we would display the Image using image URL.
- title : Used to set Title of Alert dialog box. We’re using the Row widget in Title section and putting a Image widget and a Text widget in Row. With the use of Row widget both Image and Text should place one by one in single Row.
- content : Used to set the Context text of Alert dialog box.
- actions : Used to add action buttons in Alert dialog box. Actions supports multiple widgets.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
showAlert(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Row( children:[ Image.network('https://flutter-examples.com/wp-content/uploads/2019/12/android_icon.png', width: 50, height: 50, fit: BoxFit.contain,), Text(' Alert Dialog Title. ') ] ), content: Text("Are You Sure Want To Proceed?"), actions: <Widget>[ FlatButton( child: Text("YES"), onPressed: () { //Put your code here which you want to execute on Yes button click. Navigator.of(context).pop(); }, ), FlatButton( child: Text("CANCEL"), onPressed: () { //Put your code here which you want to execute on Cancel button click. Navigator.of(context).pop(); }, ), ], ); }, ); } |
7. Creating 1 Raised Button widget in Widget Build area of AlertWithIconWidget class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton( onPressed: () => showAlert(context), child: Text('Click Here To Show Alert Dialog Box with ICON'), textColor: Colors.white, color: Colors.blueAccent, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), ), ); } |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import 'package:flutter/material.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://flutter-examples.com/wp-content/uploads/2019/12/android_icon.png', width: 50, height: 50, fit: BoxFit.contain,), Text(' Alert Dialog Title. ') ] ), content: Text("Are You Sure Want To Proceed?"), actions: <Widget>[ FlatButton( child: Text("YES"), onPressed: () { //Put your code here which you want to execute on Yes button click. Navigator.of(context).pop(); }, ), FlatButton( child: Text("CANCEL"), onPressed: () { //Put your code here which you want to execute on Cancel button click. Navigator.of(context).pop(); }, ), ], ); }, ); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton( onPressed: () => showAlert(context), child: Text('Click Here To Show Alert Dialog Box with ICON'), textColor: Colors.white, color: Colors.blueAccent, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), ), ); } } |
Screenshots:
Thanks!
Welcome 🙂 .