Flutter로 간단한 노트 앱을 만들어보자 ⑩ - 노트 쓰기 플로팅 버튼 추가하기

이번 글에서는 노트 목록 화면에 ‘노트 쓰기’ 플로팅 버튼을 추가해 사용자가 보다 쉽게 새로운 노트를 작성할 수 있도록 해보겠습니다.

플로팅 버튼은 UI 디자인에서 화면 위에 떠 있는 형태로 배치되는 버튼을 말합니다. 보통 앱 화면의 가장자리에 둥둥 떠 있는 느낌으로 배치돼서 사용자들이 쉽게 접근할 수 있죠. Flutter 에서는 FloatingActionButton 위젯이 있어서 쉽게 구현할 수 있습니다.

 

우리가 만들 '노트 쓰기' 플로팅 버튼의 요구사항은 다음과 같습니다.

 

1. 사용자는 노트 목록 화면에 표시된 플로팅 버튼을 통해 노트 작성 화면으로 이동할 수 있다.
2. 노트 카드 액션(중요, 수정, 삭제) 버튼이 나타날 때는 플로팅 버튼이 자동으로 사라져 사용자가 혼란스럽지 않도록 한다.

 

플로팅 버튼을 추가한 결과는 다음과 같습니다.

 

- 노트 목록 화면 우측 하단에 플로팅 버튼이 추가되었습니다.

- 노트 카드를 꾹 눌러 액션 버튼이 나타나면 플로팅 버튼은 사라집니다.

 

 

1. 노트 목록 화면에 플로팅 버튼 추가하기

플로팅 버튼을 구현하기 위해 note_list_view.dart 파일을 열고 다음과 같이 플로팅 버튼을 추가합니다. 

 

Scaffold 의 floatingActionButton 속성에 새로운 플로팅 버튼 위젯을 정의하고 버튼을 누르면 노트 작성 화면으로 이동하도록 설정합니다.

// note_list_view.dart
floatingActionButton: Positioned(
        right: 16,
        bottom: 16,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Colors.blue.shade400,
                Colors.blue.shade600,
              ],
            ),
            borderRadius: BorderRadius.circular(30),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                blurRadius: 8,
                offset: Offset(0, 4),
              ),
            ],
          ),
          child: FloatingActionButton(
            onPressed: () => context.push('/noteDetail'),
            backgroundColor: Colors.transparent,
            elevation: 0,
            child: Icon(
              Icons.edit_outlined,
              color: Colors.white,
              size: 28,
            ),
          ),
        ),
      ),

 

FloatingActionButton 으로 버튼이 투명 배경 위에 아이콘을 띄워 스타일이 독립적으로 보이게 만듭니다.
onPressed 에서 노트 작성 화면으로 이동하도록 context.push('/noteDetail')을 호출합니다.
Gradient와 Shadow 을 설정하여 그라데이션과 그림자를 추가해 버튼을 입체적으로 보이도록 합니다.

 

 

 

2. 플로팅 버튼과 노트 카드 액션의 상태 연동

노트 카드를 길게 눌러 중요, 수정, 삭제 아이콘이 표시되면 플로팅 버튼을 숨겨야 합니다. 이를 위해 노트 카드의 액션이 보일 때 플로팅 버튼이 사라지도록 상태 관리를 추가합니다. 

 

플로팅 버튼이 노트 카드 액션과 연동되기 위해 note_list_state.dart에 새로운 상태 isCardActionsVisible을 추가합니다.

// note_list_state.dart
bool _isCardActionsVisible = false;
bool get isCardActionsVisible => _isCardActionsVisible;

void setCardActionsVisible(bool visible) {
  _isCardActionsVisible = visible;
  notifyListeners();
}

 

 

note_card.dart에서는 카드가 드래그 상태로 들어가면 setCardActionsVisible(true)을 호출하고, 드래그가 끝나면 setCardActionsVisible(false)을 호출하여 상태를 업데이트합니다.

// note_card.dart
onDragStarted: () {
  setState(() {
    _showActions = true;
  });
  Provider.of<NoteListState>(context, listen: false)
      .setCardActionsVisible(true);
},
onDragEnd: (details) {
  setState(() {
    _showActions = false;
    if (_activeIconIndex != null) {
      _handleIconAction(_activeIconIndex!);
    }
    _activeIconIndex = null;
  });
  Provider.of<NoteListState>(context, listen: false)
      .setCardActionsVisible(false);
},

 

 

 

3. 플로팅 버튼의 최종 연동

이제 노트 목록 화면의 floatingActionButton 속성으로 돌아와 noteListState.isCardActionsVisible 값을 확인하여, 노트 카드 액션이 보일 때는 버튼을 숨기고 그렇지 않으면 플로팅 버튼을 표시합니다.

// note_list_view.dart
floatingActionButton: noteListState.isCardActionsVisible
    ? null // 카드 액션이 보일 때는 플로팅 버튼을 숨김
    : Positioned(
        right: 16,
        bottom: 16,
        ...

 

이렇게 하면 사용자는 노트 카드 버튼과 플로팅 버튼을 혼란없이 사용할 수 있습니다.

 

플로팅 버튼 구현 결과를 영상으로 보겠습니다.

 

 

마무리

노트 목록 화면에 ‘노트 쓰기’ 플로팅 버튼을 추가했습니다. 이제 사용자들이 탭을 이동할 필요 없이 더 편하게 노트를 작성할 수 있게 되었습니다.

 

결과 이미지와 영상을 보시면 이전에 우리가 구현했던 [노트 쓰기] 탭이 사라진 것을 볼 수 있습니다. 노트 쓰기는 오늘 우리가 구현한 플로팅 버튼으로만 추가하고, 대신 기존의 [노트 쓰기] 탭은 [랜덤 노트] 탭으로 변경했습니다.

 

[랜덤 노트]는 내가 작성한 노트들을 랜덤에게 띄워주는 탭으로 과거의 노트들을 다시 한 번 복기하고 돌아보기 위한 기능입니다. 앞으로 제가 만들고자 하는 노트 앱의 핵심 기능이라고 할 수 있겠습니다. 

 

다음 글에서는 랜덤 노트 기능을 구현해보겠습니다.

 

 

[Flutter로 간단한 노트 앱을 만들어보자] 시리즈는 직접 독학으로 하나씩 만들어나가는 과정이므로 틀리거나 부족한 내용이 있을 수 있습니다. 조언과 피드백을 댓글로 남겨주시면 적극 반영하겠습니다. 감사합니다.