Flutter 미니 프로젝트 만드는 과정을 블로그에 남겨보자. 첫번째 프로젝트는...?

무엇부터 해볼까.
아니, 내가 할 수 있는 게 무엇일까.

마음 같아선 당장이라도 멋들어진 앱을 만들어내고 싶다.
성급한 마음은 내려두고 물어본다.

{ Chat GPT }
초보 수준으로 미니 프로젝트 추천해줘 !

To-Do 리스트 앱 , 날씨 앱 , 간단한 계산기 앱 ..

첫 프로젝트로는 To-Do 리스트 앱이 가장 적합합니다. 복잡하지 않으면서도 Flutter의 기초를 익히는 데 도움되고, 다양한 확장이 가능하기 때문입니다.

음~~ 좋아 !  내가 만들어서
나만 쓰는 한이 있더라도 잘 만들어보자.

점점 설레이기 시작한다.

---

좋아 ! To-Do List 앱 너로 정했다 !
(난 추천에 약한 타입)

시작은 void main() 이다.
main 함수가 없으면 애플리케이션이 실행되지 않는다.

main 함수 위에 Run 버튼이 있다.

곁가지로
main 함수 위에 [ Run ] 버튼이 보여지는 이유는
VSCode 확장(Flutter Extension) 기능 덕분이다.
(나는 이런 곁가지가 너무 좋다.)

물론 중요하진 않다.
생각해보니 난 오히려 터미널을 열어서
“flutter run” 을 직접 타이핑 하는게 기분이 더 좋다.

---

자, 이제 ChatGPT 가 알려준 코드를 타이핑 해 볼 시간이다.

출처 : Chat GPT

타이핑 얘기가 나와서 잠깐 옆으로 새면 …

나는 그냥 타이핑 하는 것이 좋다.
void main() , class , extends , const ..
그저 보고 따라 치는 것이라도,
이렇게 치다보면 코드가 손에 달라붙는 느낌이고,
뭔가 코딩을 잘 하게 된 것 같아 기분이 좋다.

좋은 게 좋은 거지 뭐. 흥.

⚠️ 물론 나의 개인적인 취향이다.
따라했다가 손가락만 아프네 이러면 본인 책임입니다.

따라 치다보면 바로 현란한 밑줄들을 볼 수 있다.

'MyApp'이라는 이름은 클래스가 아닙니다. 기존 클래스와 일치하도록 이름을 수정해 보세요. 음 ?

계속 코드를 작성하다 보니 이유를 알 수 있었다.
아, 클래스가 없었다고오…

그렇게 주욱 타이핑을 하고 났더니,

짜잔. 첫번째 애플리케이션 완성.
Hello, World 같은 느낌이지만 뭔가 깔끔한 느낌이네.

뭐 외울 필요까진 없겠지만
기본 구조는 여러번 따라치면서
"아하 이렇게 되어있구만" 정도,
느끼면 되지 않을까?

오늘은 여기까지.  너무 급하게 가면 넘어진다고.
오늘 작성한 코드나 곱씹어 보자.

---

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  //const MyApp({Key? key}) : super(key: key);
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 디버그 배너 숨기기
      title: 'To-Do List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatelessWidget {
  //const TodoListScreen({Key? key}) : super(key: key);
  const TodoListScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('To-Do List'),
      ),
      body: const Center(
        child: Text('할 일이 없습니다!'),
      ),
    );
  }
}