Flutter를 사용한 사용자 지정 대화 상자 - 단계별 가이드

Flutter framework는 UI 구성 요소를 만드는 매우 쉬운 방법을 제공합니다. 하지만 원하는 디자인이나 레이아웃을 얻으려면 많은 실험 과정을 거쳐야 합니다. 이 튜토리얼에서는 Flutter를 사용하여 사용자 지정 대화 상자를 만드는 프로세스를 단계별로 분석하고 살펴봅니다.

모바일 앱에서 우리는 어떤 상황을 사용자에게 알리는 것에서부터 사용자로부터 피드백을 얻기 위해 모든 곳에서 Dialog를 사용합니다.

최근에 기사“AppLifeCycleState Management Implementation In Flutter”에서 언급한 것처럼 퀴즈 앱을 개발하고 있었습니다. 이 퀴즈 앱에서는 사용자가 얻은 경품과 다양한 AlertDialog를 사용자에게 표시해야 했습니다. 기본 대화 상자를 사용하면 게임이 지루해 보였고 게임 플레이가 재미있어 보이도록 대화 상자를 사용자 지정해야 했습니다.

간단한 경고 대화 상자 만들기

Flutter에서 일반적인 경고 대화 상자를 구현하기 위한 코드를 살펴보는 것으로 시작하겠습니다. 이렇게 하면 나중에 사용자 정의할 수 있는 아이디어가 제공됩니다. 또한 우리는 그것이 얼마나 평범한지 볼 것입니다.

Flutter에서 매우 쉽게 간단한 Dialog를 화면에 추가합니다.

Dialog를 추가하기 전에 showDialog 함수를 호출하여 현재 화면 상태를 변경하여 중간 Dialog 팝업을 표시해야 합니다.

여기에서 우리는 AlertDialog 위젯을 사용하여 제목과 본문에 일부 텍스트가 있는 간단한 대화 상자를 표시합니다.

showDialog(
        context: context,
    builder: (BuildContext context){
            return AlertDialog(
                title: Text("Alert Dialog"),
            content: Text("Dialog Content"),
        );
     }
)

AlertDialog의 내용 또는 제목 섹션에서 원하는 위젯을 추가할 수 있습니다. 텍스트에만 국한되지 않습니다.

AlertDialog 위젯에는 action이라는 매개변수가 있습니다. 그것은 위젯의 배열을 받아들이고 그것에 여러 개의 버튼을 제공할 수 있습니다. 해당 버튼은 대화 상자의 오른쪽 하단에 나타납니다.

다음은 AlertDialog 구현에 대한 전체 코드입니다.

showDialog(
        context: context,
    builder: (BuildContext context){
            return AlertDialog(
                title: Text("Alert Dialog"),
            content: Text("Dialog Content"),
                        actions:[
                    FlatButton(
                        child: Text("Close"),
                        onPressed: (){
                                Navigator.of(context).pop();
                    },
                ),
            ],
        );
     }
)

사용자 지정 대화 상자 만들기

Dialog 메서드를 사용하여 flutter에서 사용자 지정 대화 상자를 만들어 보겠습니다.

Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(Consts.padding),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );

여기서 우리는 둥근 직사각형 테두리 r이 있는 대화 상자를 갖게 됩니다. 자세히 보면 dialogContent()라는 메서드가 생성된 것을 볼 수 있습니다.

우리는 dialog의 모든 속성을 설정하고 모든 중요한 위젯을 포함하는 dialogContent()로 향하고 있습니다. 스택 방법을 사용하여 사용자 지정 대화 상자를 디자인합니다.

Stack 메서드에서 마지막 요소가 맨 위로 이동한다는 것을 알 수 있습니다.

dialogContent(BuildContext context) {
    return Stack(
      children: <Widget>[
        //...bottom card part,
        //...top circlular image part,
        Container(
          padding: EdgeInsets.only(
            top: 200,
            bottom: 16.0,
            left: 16.0,
            right: 16.0,
          ),
          margin: EdgeInsets.only(top: 66.0),
          decoration: new BoxDecoration(
            color: Colors.black, //Colors.black.withOpacity(0.3),
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 10.0,
                offset: const Offset(0.0, 10.0),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, // To make the card compact
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.w700,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                description,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.0,
                  color: Colors.white70,
                ),
              ),
              SizedBox(height: 24.0),
              Align(
                alignment: Alignment.bottomRight,
                child: FlatButton(
                  color: Colors.amber,
                  onPressed: () {
                    Navigator.of(context).pop(); // To close the dialog
                  },
                  child: Text(
                    buttonText,
                    style: TextStyle(
                      color: Colors.purple,
                    ),
                  ),
                ),
              ),
    // Implement Circular Image here
            ],
          ),
        ),
      ],
    );
  }

따라서 대화 상자의 텍스트 부분을 디자인했습니다. 여기서 우리는 Flutter 개발 팀이 제안한 대로 CircularAvatar를 래핑하기 위해 Stack의 자식으로 Positioned 위젯을 사용할 것입니다.

다음으로 CircleAvatar를 대화 상자의 맨 위에 배치해야 합니다. Position 메소드의 자식으로 CircleAvatar를 사용해야 합니다.

Positioned(
    left: 16.0,
    right: 16.0,
    child: CircleAvatar(
        backgroundColor: Colors.amber,
        radius: 150,
        backgroundImage: NetworkImage(
            '<https://media.giphy.com/media/J5kPUb8fe5W95DDAIv/giphy.gif>',
          ),
    ),
),

사용자 지정 대화 상자에 대한 전체 코드

CustomDialog 클래스의 최종 코드는 다음과 같습니다. 또한 여기에서 이를 구현하기 위해 별도의 파일을 생성했음을 알 수 있습니다. 이것은 내 기본 코드를 정리하고 깨끗해 보일 것입니다.

import 'package:flutter/material.dart';

class CustomDialog extends StatelessWidget {
  final String title, description, buttonText;
  final Image image;

  CustomDialog({
    @required this.title,
    @required this.description,
    @required this.buttonText,
    this.image,
  });

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );
  }

  dialogContent(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(
            top: 66.0 + 16.0 * 12,
            bottom: 16.0,
            left: 16.0,
            right: 16.0,
          ),
          margin: EdgeInsets.only(top: 66.0),
          decoration: new BoxDecoration(
            color: Colors.black, //Colors.black.withOpacity(0.3),
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 10.0,
                offset: const Offset(0.0, 10.0),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, // To make the card compact
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.w700,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                description,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.0,
                  color: Colors.white70,
                ),
              ),
              SizedBox(height: 24.0),
              Align(
                alignment: Alignment.bottomRight,
                child: FlatButton(
                  color: Colors.amber,
                  onPressed: () {
                    Navigator.of(context).pop(); // To close the dialog
                  },
                  child: Text(
                    buttonText,
                    style: TextStyle(
                      color: Colors.purple,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Positioned(
          left: 16.0,
          right: 16.0,
          child: CircleAvatar(
            backgroundColor: Colors.amber,
            radius: 150,
            backgroundImage: NetworkImage(
              '<https://upload.wikimedia.org/wikipedia/commons/1/1d/Rotating_Konarka_chaka.gif>',
            ),
          ),
        ),
      ],
    );
  }
}

우리는 디자인을 마쳤습니다. 따라서 우리의 main.dart 파일에서 위의 메소드를 호출할 것입니다.

다음은 내 main.dart 파일의 모습입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dialog'),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            barrierDismissible: false,
            context: context,
            builder: (BuildContext context) => CustomDialog(
              title: "Well Done",
              description:
                  "You have sucessfully implemented Custom Dialog with flutter. \\n You have also learned theory behind and how to customize it further.",
              buttonText: "Close",
            ),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

기본 파일에서 우리는 기본 Flutter 프로젝트 코드의 floatingActionButton을 사용하고 있습니다.

위 코드의 결과는 아래와 같습니다.

Flutter를 사용한 사용자 정의 대화 상자 생성

결론

AlertDialog를 구현하는 방법과 이를 보다 사용자 정의된 버전으로 변환하는 방법에 대해 더 나은 아이디어를 얻으시기 바랍니다.

사용자 지정 대화 상자를 구현하는 더 좋은 방법을 찾았습니까? 어떤 문제에 직면했습니까? 의견 섹션에서 알려주십시오.

제 기타Flutter Tutorials Here를 확인하실 수 있습니다.

게시물 Custom Dialog with Flutter – Step by Step Guide이 InstaCodeBlog에 처음 나타났습니다.