[플러터] 10일차 - 노트 관리기능 구현하기

저장만 되고, 아직 화면에 보여지진 않는다.

 

 

• data/note_manager.dart : 노트 관리 클래스

import 'dart:ui';

import 'note.dart';

class NoteManager {
  List<Note> _notes = [];

  void addNote(Note note) {
    _notes.add(note);
  }

  void deleteNote(int index) {
    _notes.removeAt(index);
  }

  Note getNote(int index) {
    return _notes[index];
  }

  List<Note> listNotes() {
    return _notes;
  }

  void updateNote(int index, String body, { String title = '', Color? color }) {
    _notes[index].body = body;
    if (title.isNotEmpty) {
      _notes[index].title = title;
    }

    if (color != null) {
      _notes[index].color = color;
    }
  }
}

 

• providers.dart: NoteManager 클래스를 하나만 관리하게끔 만들자.

import 'data/note_manager.dart';

NoteManager _noteManager = new NoteManager();

NoteManager noteManager() {
  return _noteManager;
}

• page/note_edit_page.dart : 노트를 저장하는 기능을 추가

import 'dart:developer';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sticky_notes/data/note.dart';
import 'package:sticky_notes/providers.dart';

class NoteEditPage extends StatefulWidget {

  @override
  State createState() => _NoteEditPageState();
}

class _NoteEditPageState extends State<NoteEditPage> {
  GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

  late String title;
  late String body;
  late Color color = Note.colorDefault;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text('노트 편집'),
        actions: [
          IconButton(icon: Icon(Icons.color_lens), tooltip: '배경색 선택', onPressed: _displayColorSelectDialog),
          IconButton(icon: Icon(Icons.save), tooltip: '저장', onPressed: _saveNote,)
        ],
      ),
      body: SizedBox.expand(
        child: Container(
          color: color,
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: '제목 입력'
                  ),
                  maxLines: 1,
                  style: TextStyle(fontSize: 20.0),
                  onChanged: (text) {
                    title = text;
                  },
                ),
                SizedBox(height: 8.0),
                TextField(
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: '노트 입력',
                  ),
                  maxLines: null,
                  keyboardType: TextInputType.multiline,
                  onChanged: (text) {
                    body = text;
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _displayColorSelectDialog() {
    FocusManager.instance.primaryFocus?.unfocus();

    showDialog(context: context, builder: (context) {
      return AlertDialog(
        title: Text('배경색 선택'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(
              title: Text('없음'),
              onTap: () => _applyColor(Note.colorDefault),
            ),
            ListTile(
              leading: CircleAvatar(backgroundColor: Note.colorRed,),
              title: Text('빨간색'),
              onTap: () => _applyColor(Note.colorRed),
            ),
            ListTile(
              leading: CircleAvatar(backgroundColor: Note.colorOrange,),
              title: Text('오렌지'),
              onTap: () => _applyColor(Note.colorOrange),
            ),
            ListTile(
              leading: CircleAvatar(backgroundColor: Note.colorYellow,),
              title: Text('노란색'),
              onTap: () => _applyColor(Note.colorYellow),
            ),
            ListTile(
              leading: CircleAvatar(backgroundColor: Note.colorLime,),
              title: Text('연두색'),
              onTap: () => _applyColor(Note.colorLime),
            ),
            ListTile(
              leading: CircleAvatar(backgroundColor: Note.colorBlue,),
              title: Text('파란색'),
              onTap: () => _applyColor(Note.colorBlue),
            )
          ],
        ),
      );
    });
  }

  void _applyColor(Color newColor) {
    setState(() {
       Navigator.pop(context);
       color = newColor;
    });
  }

  void _saveNote() {
    if (body.isNotEmpty) {
      noteManager().addNote(Note('body', title: 'title', color: Note.colorDefault, ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('노트를 입력하세요.'),
          behavior: SnackBarBehavior.floating,
        )
      );
    }
  }
}

 

 

Uploaded by Notion2Tistory v1.1.0