프로젝트 준비하기
New flutter project를 선택한 후 아래와 같이 새로운 Flutter 프로젝트를 만들어 주세요.
프로젝트 이름과 간단한 설명을 써 주세요. Organization은 닉네임을 적어주면 되는데 똑같이 작성을 하지 않도록 주의해 주세요.
자동으로 생성된 파일 중 필요없는 파일 정리하기
불필요한 파일을 삭제해 주겠습니다. Test 폴더는 사용하지 않으므로 마우스 우클릭 -> Delete를 클릭해서 삭제를 진행해 주세요.
pubspec파일에서 상자엔에 있는 주석을 먼저 모두 삭제해 주세요.
다음으로 dependencies에 cupertion 아이콘을 완전히 삭제합니다. 우리는 머터리얼에서 아이콘 디자인을 사용하기 때문에 삭제해 주도록 합니다.
마지막으로 Flutter부분의 주석도 모두 삭제를 하면 정리는 완료된 것입니다.
안드로이드 앱 ID 수정하기
android/app/build.gradle 파일 내 applicationId 값을 앞서 프로젝트 생성시 지정한 패키지 이름으로 변경합니다. 저는 simplenotes로 언더바( _ )를 삭제해 주었습니다.
iOS 번들 ID 수정하기
ios/Runner.xcodeproj/project.pbxproj 파일을 엽니다.
PRODUCT_BUNDLE_IDENTIFIER 문자열을 검색한 후, 번들 ID의 stickyNotes를 stickynotes (대문자 N을 소문자 n으로 변경) 합니다. (총 3군데를 수정해야 합니다)
밑쪽으로 더 검색해서 나머지 2군데도 소문자로 변경해 줍니다.
스티키 노트 앱 만들어보기 – (1) 노트 목록 화면 구성
이번시간에는 심플 노트 첫화면에 나타나는 노트 목록 화면을 만들어보고 테마색상을 변경해 보도록 하겠습니다.
가장 먼저 노트 목록 화면을 구성하는 코드를 작성해야겠죠? 앱을 개발하는 과정에서 코드를 작성할 때 코드가 너무 많아지면 관리가 어려워 지는데요. 이럴 때 디렉토리를 만들어서 비슷한 코드를 모아서 보관해 보겠습니다.
Lib폴더 아래에 page라는 이름의 디렉토리를 만들어 주세요.
다음으로 노트 목록화면을 구성할 소스파일을 추가해 보도록 하겠습니다.
page -> new -> dart File을 선택한 다음 note_list_page.dart를 만들어 주세요.
노트 목록화면 추가하기
플러터에서 화면을 구성하는 단위는 위젯입니다. 우리는 여기서 StatefulWidget을 사용하도록 하겠습니다.
가장 먼저 class이름을 NoteListPage로 지어주고 StatefulWidget 을 상속하도록 하겠습니다. 그럼 자동완성 기능이 활성화가 되는데요 여기서는 머티리얼 디자인을 사용하므로 flutter/material.dart 파일에 있는 StatefulWidget을 선택합니다. 그럼 보이는 것처럼 Import문이 추가된 걸 확인할 수 있습니다.
NoteListPage에 빨간줄이 표시가 되는데요. 이건 createState 함수가 정의되어 있지 않아서 발생하는 에러입니다. 직접 코드를 작성해서 추가해 줘도 되지만 좀 더 편리하게 안드로이드 스튜디오의 기능을 활용해서 추가할 수 있습니다. Implement methods (Ctrl+I / Control + I)를 누르면 구현이 필요한 함수를 편리하게 추가할 수 있습니다.
NoteListPage의 상태를 관리하는 클래스인 NoteListPageState() 클래스를 만들어 주도록 하겠습니다. 이름 앞에 언더바 (_)가 들어가면 같은 파일에서만 접근할 수 있습니다. (예: _NoteListPageState)
_NoteListPageState도 아까와 마찬가지로 빨간 줄이 떠있는데요 이것은 이 클래스에 필요한 build() 함수가 없기 때문입니다. 앞에서처럼 Ctrl+I를 이용해서 앱 화면을 구성하는 코드를 넣어줍니다.
Build() 함수에서는 노트 목록의 화면을 구성할 예정인데요. 앱의 타이틀과 뼈대까지만 우선적으로 구성을 해보도록 하겠습니다.
방금 작성한 클래스인 NoteListPageState를 반환해 주도록 하겠습니다. 이때 createState함수는 NoteListPageState 함수를 반환하는 역할만 하고 다른 작업은 하지 않고 있습니다. 이 경우에는 람다식으로 변경해서 표현할 수 있습니다.
람다식으로 변경해서 표현하면 아래와 같습니다.
이것으로 노트 목록화면 구성이 모두 완료되었습니다.
노트 목록 화면을 앱의 첫 화면으로 만들어주기
플러터 프로젝트를 처음만들 때 자동으로 생성되었던 MyHomePage 클래스를 모두 삭제해 주세요.
MyApp 클래스에서 home 속성에 NoteListPage 클래스로 변경해 주세요. 자동완성 기능을 이용해 추가해 주면 자동으로 상단에 import 구문을 추가해 주세요.
만약 자동완성 기능을 놓쳤다면 NoteListPage에 커서를 올린다음, Alt+Enter를 누르면 import가 필요한 패키지를 편리하게 추가할 수 있습니다.
앱 테마 색상 변경하기
머티리얼 앱의 테마는 MaterialApp의 theme 속성으로 설정합니다.
앱 테마 색상은 ThemeData의 primarySwatch 속성에서 설정할 수 있습니다. 저는 청록색(teal)을 선택했습니다.
애뮬러이터를 활성화 시켜 완성된 앱을 실행해서 지금까지의 작업을 확인해 보도록 하겠습니다
note_list_page.dart 소스코드
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NoteListPage extends StatefulWidget{
@override
State createState() => _NoteListPageState();
}
class _NoteListPageState extends State<NoteListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("simple notes")
),
);
}
}
main.dart 소스코드
import 'package:flutter/material.dart';
import 'package:simple_notes/page/note_list_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: NoteListPage(),
);
}
}