To-Do List 앱 Step 2-1. 플로팅버튼 > 다이얼로그 기본 호출 구조

 
[ 만들어 보려는 내용 ]

1 . 화면 오른쪽 아래에 “+ (할 일 추가)” 플로팅 버튼 만들기.
2-1. 플로팅 버튼을 눌렀을 때 다이얼로그가 열리고, 사용자가 할 일을 입력할 수 있음.
2-2. ‘취소’ 텍스트 버튼 (다이얼로그만 닫음)
2-3. ‘추가’ 텍스트 버튼 (할 일 리스트에 추가하면서 다이얼로그 닫음)
3 . 화면에 할 일 리스트 표시.

 
플로팅 버튼을 만들었으니 이제
눌렀을 때 동작되는 부분을 만들어 봅시다.

2. 플로팅 버튼을 눌렀을 때 다이얼로그가 열리고, 사용자가 할 일을 입력할 수 있음.

버튼을 눌렀을 때 뭔가 동작되는 내용은,
onPressed 라는 속성에 추가할 수 있습니다.

이전 시간에는 onPressed 속성에 print 를 설정했죠.
콘솔에 “버튼이 눌렸어!” 라는 것을 표시할 수 있도록이요.

이번에는 화면 상에서 뭔가 동작되도록 해봅시다 : )

---

이 다음 번에는 사용자의 입력을 받도록 해야 하니까,
다이얼로그(팝업창) 을 띄울 수 있도록 해볼게요.

다이얼로그를 띄울 수 있는 함수는 Flutter 에서
이미 만들어 준 것을 편하게 사용하면 됩니다.

출처 : ChatGPT

class TodoListScreen extends StatelessWidget {
  const TodoListScreen({super.key});

  // 다이얼로그를 표시한 메서드
  void _showSimpleDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return const AlertDialog(
              title: Text("할 일 추가"),
              content: TextField(
                  decoration: InputDecoration(
                hintText: "할 일을 입력하세요",
              )));
        });
  } // _showSimpleDialog

  @override
  Widget build(BuildContext context) {....}
  
} // TodoListScreen 

1. showDialog:
    - Flutter에서 팝업 창(다이얼로그)를 띄우는 함수입니다.
    - builder : 에서 (BuildContext … ) 는 현재 화면의 위치와 상태를 나타내는 정보를 줍니다.        
      현재 화면에 팝업창 그리기(렌더링), 팝업창에 입력이나 버튼을 동작하게 해요. 
        
2. AlertDialog:
    - 화면 위에 **작은 팝업 창**으로 나타나며, 주로 제목, 내용,        
      그리고 하나 이상의 버튼으로 구성됩니다.        
    - 사용자가 다이얼로그를 닫기 전까지는        
      화면의 다른 부분과 상호작용할 수 없습니다(모달 방식).        
    - 주로 "확인", "취소", "동의"와 같은 간단한 버튼을 만듭니다.
    
3. TextField:
    - 다이얼로그에 간단한 텍스트 입력 필드를 추가합니다.
    - 입력 값은 아직 저장되거나 처리되지 않습니다.

자, 이제  (2) 호출은 어떻게 할까요 ?

우리는 버튼(FloatingActionButton)을
눌렀을 때 띄우기로 했죠 !

  @override
  Widget build(BuildContext context) {
    var floatingActionButton = FloatingActionButton(
      onPressed: () {
        _showSimpleDialog(context); // 다이얼로그 호출
      }, // 다이얼로그 호출
      child: const Icon(Icons.add),
    );

onPressed 에서 print() 를 빼고
위에서 만들어 둔 함수를 부르면 되겠네요.

자, 되나 봅시다.

구우우웃!   : )
팝업창(다이얼로그)이 정상적으로 띄워졌습니다 !

텍스트 입력도 할 수 있네요.
하지만 아직 저장은 할 수 없어요.

이제 다음은 뭐였죠?
네, '추가'하고 '취소' 버튼을 추가하면 됩니다 !

다음 시간에는 다이얼로그 안에
취소 버튼을 넣어봅시다.

수고하셨습니다 : )