Flutter의 다이얼로그(Dialog) 사용법

Flutter에서 Dialog 위젯은 사용자와의 상호작용을 위한 중요한 UI 요소입니다. 다이얼로그는 사용자에게 정보를 제공하거나 입력을 받기 위한 팝업 창을 생성합니다. Flutter는 여러 종류의 다이얼로그 위젯을 제공하며, 각 위젯은 고유한 스타일과 용도를 가지고 있습니다. 이번 글에서는 Flutter의 Dialog 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. AlertDialog 사용법

AlertDialog는 가장 기본적인 다이얼로그로, 제목, 내용, 그리고 여러 개의 액션 버튼을 포함할 수 있습니다.

 

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('AlertDialog Title'),
      content: Text('This is the content of the AlertDialog.'),
      actions: <Widget>[
        TextButton(
          child: Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('OK'),
          onPressed: () {
            // Do something here
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

 

위 코드는 제목과 내용, 그리고 두 개의 버튼이 포함된 AlertDialog를 생성합니다. showDialog 함수는 다이얼로그를 화면에 표시합니다.

2. SimpleDialog 사용법

SimpleDialog는 선택 항목을 제공하는 간단한 다이얼로그입니다. 여러 개의 선택지를 사용자에게 제시할 때 유용합니다.

 

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text('SimpleDialog Title'),
      children: <Widget>[
        SimpleDialogOption(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Option 1'),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Option 2'),
        ),
      ],
    );
  },
);

 

위 코드는 제목과 두 개의 선택 항목이 포함된 SimpleDialog를 생성합니다. SimpleDialogOption을 사용하여 각 선택 항목을 정의합니다.

3. Custom Dialog 사용법

사용자 정의 다이얼로그는 더 복잡한 레이아웃과 기능을 포함할 수 있습니다. Dialog 위젯을 사용하여 사용자 정의 다이얼로그를 생성할 수 있습니다.

 

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Container(
        height: 200,
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Custom Dialog', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            Text('This is a custom dialog with rounded corners.'),
            SizedBox(height: 20),
            TextButton(
              child: Text('Close'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      ),
    );
  },
);

 

위 코드는 모서리가 둥근 사용자 정의 다이얼로그를 생성합니다. Dialog 위젯과 Container를 사용하여 다이얼로그의 모양과 내용을 정의합니다.

 

반응형

 

 

4. BottomSheet 사용법

BottomSheet는 화면 하단에서 슬라이드하여 올라오는 다이얼로그입니다. 이는 주로 추가 옵션이나 세부 정보를 제공할 때 사용됩니다.

 

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Bottom Sheet', style: TextStyle(fontSize: 24)),
          SizedBox(height: 20),
          Text('This is a modal bottom sheet.'),
        ],
      ),
    );
  },
);

 

위 코드는 모달 바텀 시트를 생성하여 화면 하단에서 슬라이드하여 올라오도록 합니다. showModalBottomSheet 함수를 사용하여 바텀 시트를 화면에 표시합니다.

5. DatePicker 사용법

DatePicker는 날짜를 선택하는 다이얼로그입니다. Flutter에서 제공하는 showDatePicker 함수를 사용하여 날짜 선택 다이얼로그를 표시할 수 있습니다.

 

Future<void> _selectDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2101),
  );
  if (picked != null && picked != selectedDate)
    setState(() {
      selectedDate = picked;
    });
}

DateTime selectedDate = DateTime.now();

ElevatedButton(
  onPressed: () => _selectDate(context),
  child: Text('Select date'),
),

 

위 코드는 날짜 선택 다이얼로그를 생성하여 사용자가 날짜를 선택할 수 있도록 합니다. 선택된 날짜는 selectedDate 변수에 저장됩니다.

결론

Dialog 위젯은 Flutter 애플리케이션에서 사용자와의 상호작용을 위한 중요한 도구입니다. AlertDialog, SimpleDialog, 사용자 정의 다이얼로그, BottomSheet, DatePicker 등 다양한 종류의 다이얼로그를 사용하여 사용자 경험을 향상시킬 수 있습니다. 각 다이얼로그의 용도와 스타일을 이해하고 적절히 활용하여, 애플리케이션의 인터페이스를 더욱 직관적이고 효율적으로 만들어보세요.