본문 바로가기
플러터의 기초부터 개발까지

플러터(Flutter) 프로젝트 만들기

by 브레인TJ 2023. 4. 5.
반응형

플러터(Flutter)는 Google에서 만든 모바일 애플리케이션 개발 프레임워크로, 이를 통해 Android 및 iOS 플랫폼 모두에서 시각적으로 매력적이며 기능이 풍부한 고성능 모바일 애플리케이션을 만들 수 있습니다. 이 단계별 가이드에서는 항목 목록을 표시하는 간단한 앱을 빌드하여 첫 번째 플러터(Flutter) 앱을 만드는 과정을 안내합니다.

예제가 포함된 단계별 가이드 설명을 합니다.

1단계:

플러터(Flutter) SDK 설치 플러터(Flutter) 앱을 만드는 첫 번째 단계는 플러터(Flutter) SDK를 설치하는 것입니다.

플러터(Flutter) 공식 웹사이트에서 플러터(Flutter) SDK를 다운로드할 수 있습니다. 다운로드가 완료되면 컴퓨터의 원하는 위치에 zip 파일의 압축을 풉니다.

2단계:

Android 스튜디오 설치 플러터(Flutter) 앱을 만들려면 통합 개발 환경(IDE)이 필요합니다. Android Studio는 플러터(Flutter) 개발을 위한 인기 있는 IDE이며 공식 Android Studio 웹사이트에서 다운로드할 수 있습니다. 마법사가 제공하는 지침에 따라 컴퓨터에 Android Studio를 설치합니다.

3단계:

새 플러터(Flutter) 프로젝트 만들기 플러터(Flutter) SDK와 Android Studio를 설치했으면 새 플러터(Flutter) 프로젝트를 만들 수 있습니다. 이렇게 하려면 Android Studio를 열고 "파일" -> "새로 만들기" -> "새 플러터(Flutter) 프로젝트"를 클릭합니다. "Flutter Application" 옵션을 선택하고 "Next"를 클릭합니다. 프로젝트 이름을 제공하고 프로젝트 파일을 저장할 위치를 선택합니다. "마침"을 클릭합니다. Android Studio는 필요한 파일과 폴더로 새로운 플러터(Flutter) 프로젝트를 생성합니다.

4단계:

플러터(Flutter) 앱 수정 플러터(Flutter) 프로젝트를 만든 후에는 코드를 수정하여 첫 번째 플러터(Flutter) 앱을 만들 수 있습니다. "lib" 폴더에 있는 "main.dart" 파일을 엽니다. 이 파일에는 기본 플러터(Flutter) 앱용 코드가 포함되어 있습니다. 코드를 수정하여 고유한 기능을 추가할 수 있습니다. 이 예에서는 항목 목록을 표시하는 간단한 앱을 만듭니다. 목록의 각 항목을 나타내기 위해 "lib" 폴더에 "item.dart"라는 새 파일을 만듭니다. "item.dart" 파일에서 "name"과 "description"이라는 두 가지 속성을 가진 "Item"이라는 새 클래스를 정의합니다.

다음으로 "main.dart" 파일을 수정하여 항목 목록을 만들고 앱의 홈 화면에 표시합니다. "main.dart" 파일의 기본 코드를 다음 코드로 대체합니다.

이 코드는 10개 항목의 목록을 만들고 ListView 위젯을 사용하여 앱의 홈 화면에 표시합니다. 목록의 각 항목은 앞에서 정의한 "항목" 클래스의 인스턴스로 표시됩니다.

5단계:

플러터(Flutter) 앱 실행 플러터(Flutter) 앱을 실행하려면 도구 모음에서 "실행" 버튼을 클릭하거나 "Shift+F10" 단축키를 누르십시오. Android Studio는 가상 환경에서 앱을 실행합니다. Android 장치 에뮬레이터 또는 컴퓨터에 연결된 물리적 장치. 이제 화면에서 앱이 실행되는 것을 볼 수 있습니다.

6단계:

플러터(Flutter) 앱에 상호작용 추가 이제 간단한 플러터(Flutter) 앱을 만들었으므로 대화형 기능을 추가하여 더 매력적으로 만들 수 있습니다. 예를 들어 사용자가 목록에서 항목을 추가하거나 삭제하도록 허용할 수 있습니다. 상호 작용을 추가하려면 "main.dart" 파일에서 "MyApp" 클래스를 수정할 수 있습니다. 앱의 홈 화면에 "FloatingActionButton" 위젯을 추가하여 사용자가 목록에 새 항목을 추가할 수 있습니다. 목록의 각 항목에 "비활성화" 위젯을 추가하여 사용자가 항목을 화면에서 스와이프 하여 삭제할 수 있습니다. 다음은 이러한 기능을 추가하기 위해 "MyApp" 클래스를 수정하는 방법의 예입니다.

이 코드는 탭할 때 "_addNewItem" 메서드를 호출하는 앱의 홈 화면에 "FloatingActionButton" 위젯을 추가합니다. 이 메서드는 목록에 새 항목을 추가하고 "setState" 메서드를 사용하여 앱의 상태를 업데이트 합니다.

또한 목록의 각 항목에 "비활성화" 위젯을 추가하여 사용자가 항목을 화면에서 스와이프 하여 삭제할 수 있도록 합니다. "onDismissed" 콜백은 항목이 닫힐 때 호출되며 목록에서 항목을 제거하고 앱의 상태를 업데이트합니다.

7단계:

플러터(Flutter) 앱 빌드 및 출시 플러터(Flutter) 앱을 만들고 테스트하였으면, 앱 스토어에 앱을 빌드하고 출시할 수 있습니다. 이렇게 하려면 앱의 릴리즈 빌드를 만들고 적절한 앱 스토어에 제출해야 합니다. 앱의 릴리즈 빌드를 만들려면 "flutter build" 명령을 사용할 수 있습니다. 이 명령은 앱 스토어에 업로드할 수 있는 앱의 릴리즈 빌드를 생성합니다. Google Play 스토어 또는 Apple App Store에서 제공하는 지침에 따라 검토 및 출시를 위해 앱을 제출할 수 있습니다.

결론:

이 단계별 가이드에서는 항목 목록을 표시하는 간단한 앱을 빌드하여 첫 번째 플러터(Flutter) 앱을 만드는 방법을 보여 주었습니다. 또한 사용자가 목록에서 항목을 추가하거나 삭제할 수 있도록 하여 앱에 상호 작용 기능을 추가하는 방법을 설명하였습니다. 플러터(Flutter)는 Android 및 iOS 플랫폼 모두에서 실행할 수 있는 모바일 애플리케이션을 만들기 위한 강력하고 유연한 프레임워크를 제공합니다. 또한, 핫 리로드 기능을 사용하면 앱을 빠르게 반복하고 개발할 수 있습니다.

반응형

댓글