Flutter：从另一个 Dart 文件获取 AlertDialog

Question

i need help guys. I have 2 dart file : main.dart and alertform.dart. some cases require using this method in my application. I want to try accessing the alerdialog from alertform.dart on the button on main.dart. is that possible? this my code:

main.dart

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text('Test'),
      ),
      body: new Column(
        children: <Widget>[
          RaisedButton(
            child: new Text('Show Alert'),
            onPressed: (){
              CommentForm();
            },
          )
        ],
      ),
    );
  }
}

alertform.dart

import 'package:flutter/material.dart';

class AlertForm extends StatefulWidget {
  @override
  _AlertFormState createState() => _AlertFormState();
}

class _AlertFormState extends State<AlertForm> {

    void _showDialog() {
    // flutter defined function
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }


  @override
  Widget build(BuildContext context) {
    return Container(

    );
  }
}

Answer 1

I don't know why you want to call this _dialog from outside class, where you can call inside your class. But if you want to do then you can try this code.

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text('Test'),
      ),
      body: new Column(
        children: <Widget>[
          RaisedButton(
            child: new Text('Show Alert'),
            onPressed: (){
              AlertFormState(context).showDialogBox;
            },
          )
        ],
      ),
    );
  }
}**

import 'package:flutter/material.dart';

class AlertForm extends StatefulWidget {
  @override
  AlertFormState createState() => AlertFormState();
}

class AlertFormState extends State<AlertForm> {

    void showDialogBox(BuildContext context) {
    // flutter defined function
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }


  @override
  Widget build(BuildContext context) {
    return Container(

    );
  }
}

Answer 2

Create a new Class :

class AlertDemo{
    void showDialog(BuildContext context) {
    // flutter defined function
    showDialog(
    context: context,
    builder: (BuildContext context) {
        // return object of type Dialog
        return AlertDialog(
        title: new Text("Alert Dialog title"),
        content: new Text("Alert Dialog body"),
        actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
            child: new Text("Close"),
            onPressed: () {
                Navigator.of(context).pop();
            },
            ),
        ],
        );
    },
    );
}
}

And then call using the AlertDemo class instance call the showDialog Method.

 RaisedButton(
        child: new Text('Show Alert'),
        onPressed: (){
          AlertDemo().showDialog(context);
        },
      )

I havent tested this as i am travelling and wrote on mobile , so if it didnt worked i will edit the correct one when i reach.

Answer 3

It's simple.

main.dart

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

void main() => runApp(MaterialApp(
  home: HomePage(),
));

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(
      child:
      ElevatedButton(
          child: Text("Show"),
          onPressed: () {
            showDialogBox(context);
          }
      ),
    );
  }
}

showdialog.dart

import 'package:flutter/material.dart';

void showDialogBox(BuildContext context) {

  showDialog<void>(
      context: context,
      builder: (BuildContext context) {

        return AlertDialog(
            title: new Text("title"),
            content: new Text("body"),
            actions: <Widget>[
              // usually buttons at the bottom of the dialog
              new FlatButton(
                child: new Text("close"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              )
            ]
        );
      }
  );
}