다이얼로그 (Dialog)

앱에서 사용자와 상호 작용하고 정보를 표시하기 위해 사용하는 다이얼로그 위젯은 매우 유용합니다. 다이얼로그 위젯을 사용하여 간단한 정보 제공부터 중요한 결정을 요구하는 상황까지 다양한 시나리오를 다룰 수 있습니다.

기본 다이얼로그

Simple Dialog

간단한 정보 또는 단일 옵션을 제공하는 다이얼로그입니다.

SimpleDialog(
  title: const Text(
    'Simple Dialog',
    textAlign: TextAlign.center,
  ),
  children: <Widget>[
    SimpleDialogOption(
      onPressed: () {},
      child: const Text(
        'Close',
        textAlign: TextAlign.center,
      ),
    ),
  ],
);

Alert Dialog

중요한 정보를 표시하거나 사용자의 결정을 요구하는 다이얼로그입니다.

AlertDialog(
  title: const Text(
    'Alert Dialog',
    textAlign: TextAlign.center,
  ),
  content: const Text(
    'description',
    textAlign: TextAlign.center,
  ),
  actions: <Widget>[
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Cancel'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'OK'),
      child: const Text('OK'),
    ),
  ],
);

Rectangle AlertDialog

기본 알림 다이얼로그와 동일하지만 모서리가 직사각형인 다이얼로그입니다.

AlertDialog(
  title: const Text(
    'Rectangle Alert Dialog',
    textAlign: TextAlign.center,
  ),
  content: const Text(
    'description',
    textAlign: TextAlign.center,
  ),
  actions: <Widget>[
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Cancel'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'OK'),
      child: const Text('OK'),
    ),
  ],
  shape: RoundedRectangleBorder(),
);

TextField in AlertDialog

알림 다이얼로그에 텍스트 입력 필드를 추가하는 예제입니다.

AlertDialog(
  title: Text(
    'TextField in Alert Dialog',
    textAlign: TextAlign.center,
  ),
  content: TextField(
    onChanged: (value) {},
    decoration: InputDecoration(hintText: "add text"),
  ),
  actions: <Widget>[
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Cancel'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'OK'),
      child: const Text('OK'),
    ),
  ],
);

다이얼로그 위젯은 앱에서 다양한 상황에 맞게 사용자와 소통할 수 있는 강력한 도구입니다. 이러한 예제를 사용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

라디오버튼 다이얼로그

RadioButton Dialog

RadioButtonDialog(
          title: Text('RadioButton Dialog', textAlign: TextAlign.center),
          actions: <Widget>[
            TextButton(
                onPressed: () => Navigator.pop(context, 'Cancel'),
                child: const Text('Cancel')),
            TextButton(
                onPressed: () => Navigator.pop(context, 'OK'),
                child: const Text('OK')),],
          itemCount: 10,
          radiobuttonlist: [...],);

체크박스 다이얼로그

CheckBox Dialog

CheckBoxDialog(
          title: Text('Checkbox Dialog', textAlign: TextAlign.center),
          actions: <Widget>[
            TextButton(
                onPressed: () => Navigator.pop(context, 'Cancel'),
                child: const Text('Cancel')),
            TextButton(
                onPressed: () => Navigator.pop(context, 'OK'),
                child: const Text('OK')),],
          itemCount: 10,
          checkboxlist: {
            ...},);

커스텀 다이얼로그

Circle Avatar Dialog

CircleAvatarDialog(
          title: Text('Circle Avatar Dialog', textAlign: TextAlign.center),
          actions: <Widget>[
            TextButton(
                onPressed: () => Navigator.pop(context, 'Cancel'),
                child: const Text('Cancel')),
            TextButton(
                onPressed: () => Navigator.pop(context, 'OK'),
                child: const Text('OK')),],
          content: const Text(
            'description',
            textAlign: TextAlign.center,),
          circleForegroundColor: theme.primaryColorDark,
          circleBackgroundColor: theme.primaryColor,
          child: Icon(Icons.help),);

Divided Dialog

DividedDialog(
          title: Text(
            'Divided Dialog',
            style: TextStyle(fontWeight: FontWeight.bold),),
          buttonText: 'Close',
          topColor: Colors.white,
          bottomColor: theme.primaryColor,
          buttonColor: Colors.white,
          buttonTextColor: Colors.black,
          height: 200,
          content: const Text(
            'description',
            textAlign: TextAlign.center,),
          onPressed: () => {Navigator.of(context).pop()},);

쿠퍼티노 다이얼로그

Cupertino Dialog

CupertinoAlertDialog(
          title: const Text('Cupertino Dialog'),
          content: const Text('description'),
          actions: <CupertinoDialogAction>[
            CupertinoDialogAction(
              isDestructiveAction: true,
              onPressed: () {
                Navigator.pop(context, null);},
              child: const Text('Cancel'),),
            CupertinoDialogAction(
              isDefaultAction: true,
              onPressed: () {
                Navigator.pop(context, null);},
              child: const Text('OK'),
            ),],);

시간 & 날짜 다이얼로그

Time Picker Dialog

TimePickerDialog(
          initialTime:
              TimeOfDay(
                  hour: DateTime.now().hour, minute: DateTime.now().minute),);

Date Picker Dialog

DatePickerDialog(
            initialDate: DateTime.now(),
            firstDate: DateTime(1900),
            lastDate: DateTime(2100));

Date Range Picker Dialog

DateRangePickerDialog(
                  firstDate: DateTime(1900), lastDate: DateTime(2100));

그 외에도 다양한 다이얼로그 위젯이 있습니다. RadioButton, CheckBox, Circle Avatar, Divided, Cupertino 스타일의 다이얼로그, 시간 선택, 날짜 선택 및 날짜 범위 선택 다이얼로그 등 다양한 유형의 다이얼로그를 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

다이얼로그 위젯은 앱의 상황에 따라 다양한 상호 작용 및 정보 전달에 활용됩니다. 이러한 예제를 사용하여 다이얼로그를 효과적으로 활용하여 사용자와의 상호 작용을 개선해보세요.

Previous토글 버튼 (Toggle Button)NextQR코드

Last updated 1 year ago