Flutter 플러터에서 전체 화면 대화 상자를 만드는 방법은 무엇인가요?, How to make a full screen dialog in flutter?

질문

전체 화면 대화 상자를 만들고 싶습니다. 대화 상자의 배경은 불투명해야 합니다. 다음은 예시입니다:

Flutter에서 이와 같이 만드는 방법은 무엇인가요?

답변

다음과 같은 HTML을 한국어로 번역하되, HTML 태그와 태그를 영어로 유지하세요:

import 'package:flutter/material.dart';

class TutorialOverlay extends ModalRoute<void> {
  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black.withOpacity(0.5);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      ) {
    // 이렇게 하면 텍스트와 기타 콘텐츠가 Material 스타일을 따르도록 보장됩니다.
    return Material(
      type: MaterialType.transparency,
      // 오버레이 콘텐츠가 잘려 보이지 않도록 합니다.
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

  Widget _buildOverlayContent(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            '이것은 멋진 오버레이입니다',
            style: TextStyle(color: Colors.white, fontSize: 30.0),
          ),
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('닫기'),
          )
        ],
      ),
    );
  }

  @override
  Widget buildTransitions(
      BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // 오버레이 콘텐츠에 대한 애니메이션을 추가할 수 있습니다.
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }
}


// 예제 애플리케이션:
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  void _showOverlay(BuildContext context) {
    Navigator.of(context).push(TutorialOverlay());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('테스트')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: RaisedButton(
            onPressed: () => _showOverlay(context),
            child: Text('오버레이 보이기'),
          ),
        ),
      ),
    );
  }
}