스파르타 코딩클럽 ios 앱개발 - 2일차 TIL

스터디 플래너 만들기

스터디 플래너 앱을 만들기 위해서는

1. 스터디작성
2. 스터디조회
3. 스터디수정
4. 스터디삭제

이 기능이 있어야지 메모장의 앱을 구형할수있다.
우리는 이것을 CRUD라고 부른다. CRUD는 가장 기본이 되는 데이터 처리 기능이다.

하지만 아직 메모장을 스터디 플레너로 바꿔서 구현하기에는 부족한 느낌이 들어서 메모장을 먼저 만든 후 팀원들과 같이 수정할 예정이다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

// 홈 페이지
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("mymemo"),
      ),
      body: Center(child: Text("메모를 작성해주세요")),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          // + 버튼 클릭시 메모 생성 및 수정 페이지로 이동
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => DetailPage()),
          );
        },
      ),
    );
  }
}

// 메모 생성 및 수정 페이지
class DetailPage extends StatelessWidget {
  DetailPage({super.key});

  TextEditingController contentController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () {
              // 삭제 버튼 클릭시
            },
            icon: Icon(Icons.delete),
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: TextField(
          controller: contentController,
          decoration: InputDecoration(
            hintText: "메모를 입력하세요",
            border: InputBorder.none,
          ),
          autofocus: true,
          maxLines: null,
          expands: true,
          keyboardType: TextInputType.multiline,
          onChanged: (value) {
            // 텍스트필드 안의 값이 변할 때
          },
        ),
      ),
    );
  }
}

위 코드를 작성하면

위와같이 메모를 보여주는 Homepage와 메모를 작성하는 DetailPage 두페이지로 구성된 앱을 볼수있다.

내일은 CRUD기능을 함께 구현해 볼 예정이다.