Flutter中自定义Dialog

在Flutter中，创建自定义Dialog可以通过使用showDialog函数和自定义的Dialog小部件。以下是一个简单的自定义Dialog示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  void _showCustomDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text(
                  '这是一个自定义的Dialog',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.black,
                  ),
                ),
              ),
              FlatButton(
                onPressed: () {
                  Navigator.of(context).pop(); // 关闭Dialog
                },
                child: Text('关闭'),
              ),
            ],
          ),
        );
      },
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义Dialog示例'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('显示自定义Dialog'),
          onPressed: () => _showCustomDialog(context),
        ),
      ),
    );
  }
}

在这个例子中，我们定义了一个HomePage小部件，它包含一个方法_showCustomDialog，该方法使用showDialog函数展示一个自定义的Dialog。Dialog内部，我们使用Column布局，并添加了一个Text和一个FlatButton来关闭Dialog。当用户点击RaisedButton时，会触发_showCustomDialog方法，显示自定义的Dialog。