How to make Alert Dialog is reusable / customizable for another new Alert Dialog

387 Views Asked by At

can u guys help me with this coding? I'm quite confused about how to implement final and required parameters and display them with input. I want to create one file dart which is GoAlertDialog (go_alert_dialog.dart) that can pop out a warning icon, title, description, and button to close it. Here is my coding:


    import 'package:flutter/material.dart';
    
    class GoAlertDialog extends StatelessWidget {
    
      final String title; 
      final String icon;
      final String topic;
      final String content; 
      final Widget action;
      final String actionName;
    
      const GoAlertDialog (
        {  
          required this.title, 
          required this.icon,
          required this.topic,
          required this.content, 
          required this.action,
          required this.actionName,
    
        }
      );
    
      @override
      Widget build(BuildContext context) {
        return TextButton(
          onPressed: () => showDialog(
            context: context, 
            builder: (BuildContext context) => AlertDialog(  
              title: Row(
                children: [
                  Text(icon),
                  Text(topic),
                ],
              ),
              content: Text(content),  
              actions: [
                TextButton(    
                  onPressed: (() => Navigator.pop(context, actionName)),
                  child: Text(actionName)
                  ),
              ],
            )
          ), child: const Text(''),
        );
      }
    }

Next, I want to insert the input for those parameters in another file named home_screen.dart


    import 'package:flutter/material.dart';
    import 'package:jpn_widgets/alert_dialog.dart';
    import 'package:jpn_widgets/quantity_counter.dart';
    
    class MyHomePage extends StatefulWidget {
    
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
          title: Text('Text'),
          ),
          body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                   padding: EdgeInsets.all(8.0),
                   child: QuantityCounter(),
                 ),
                
                GoAlertDialog(
                  title: '', 
                  icon: 'assets/icon/warning.svg', 
                  topic: 'Harap Maaf',
                  content: 'Sila hadir ke JPN Ibu Negeri / \nIbu Pejabat untuk maklumat lanjut', 
                  action: , 
                  actionName: actionName)
              ],
            ),
          ),
        );
      }
    }

Now, the main problem is I'm so clueless about how to code it properly. Can u give an example of how to make it? I really don't know where to put and arrange it.

Besides, I want the GoAlertDialog code can be reusable for another new alert dialog.. so that I can change the input only for the new alert dialog for another page of my apps.

0

There are 0 best solutions below