FlutterFlow의 내장 코드 에디터는 어떻게 사용하나요?

FlutterFlow의 내장 코드 편집기 시작하기

FlutterFlow는 수동으로 코드를 작성하지 않고도 견고한 애플리케이션을 생성하는 데 유용한 도구입니다. 그러나 애플리케이션을 더 맞춤화하고 강력하게 만들려면 일부 코드를 수정하거나 추가해야 할 수도 있습니다. 바로 그럴 때 FlutterFlow의 내장 코드 편집기가 사용됩니다.

다음은 FlutterFlow의 내장 코드 편집기를 사용하는 방법에 대한 상세한 설명서입니다:

단계 1: FlutterFlow 대시보드에 접속하기

계정에 로그인하여 FlutterFlow 대시보드에 접속합니다. 계정이 없다면 https://flutterflow.io/에서 등록하세요. 대시보드 화면에서 코드를 추가하거나 수정하려는 프로젝트를 선택합니다.

단계 2: FlutterFlow WYSIWYG 편집기 열기

선택한 프로젝트에 대해 What You See Is What You Get (WYSIWYG) 편집기를 사용합니다. 이 내장 편집기를 사용하면 화면의 요소를 끌어다 놓음으로써 앱을 생성할 수 있습니다. 이러한 요소 각각은 커스터마이징하고 앱의 다른 기능이나 화면에 연결할 수 있습니다.

단계 3: 코드 편집기 페이지로 이동하기

FlutterFlow 인터페이스의 왼쪽 사이드바에서 Code 아이콘을 클릭합니다. 이렇게 하면 내장 코드 편집기 페이지로 이동하게 됩니다.

단계 4: 코드 편집기 개요

코드 편집기는 프로젝트의 전체 코드베이스를 파일과 폴더 계층 구조로 정리하여 보여줍니다, 마치 다른 코드 편집기와 같이요. 상단 바에는 저장, 실행 취소, 다시 실행, 버전 관리 등의 다양한 작업을 위한 옵션이 있습니다. 또한 편집기의 다크 모드와 라이트 모드 사이를 전환할 수도 있습니다.

단계 5: 원하는 코드로 이동하기

화면의 왼쪽에 있는 프로젝트 탐색기 패널은 앱과 관련된 모든 파일을 나열합니다. 원하는 파일을 클릭하여 주 편집기 창에서 코드를 보거나 수정할 수 있습니다.

단계 6: 코드 수정하기

코드 편집기 패널에서 요구 사항에 맞게 코드를 수정할 수 있습니다. 편집기는 자동 완성 기능을 제공하여 코딩을 더 빠르고 쉽게 만듭니다.

Flutter 코드를 생성할 때 여기에서 만든 모든 변경사항이 유지되지만, WYSIWYG 편집기에서 이후에 변경하는 내용은 사용자 지정 코드를 덮어 쓸 수 있으므로, 내장 코드 편집기에서 코드를 사용자 지정하기 전에 UI 변경사항을 확정하는 것이 좋습니다.

단계 7: 변경 사항 저장하기

모든 필요한 변경 사항을 만든 후에는 상단의 Save 아이콘을 클릭하여 저장합니다. 변경 사항을 항상 저장하도록 주의합니다. 그렇지 않으면 변경 사항이 손실될 수 있습니다.

단계 8: Flutter 코드 생성하기

편집 내용을 저장한 후에는 창 오른쪽 상단의 Export Flutter Code 버튼을 클릭하여 프로젝트의 Flutter 코드를 생성할 수 있습니다. FlutterFlow는 Flutter 앱을 실행하는 데 필요한 모든 파일을 포함하는 ZIP 파일을 생성합니다.

단계 9: 디자인 모드로 돌아가기

앱의 디자인 모드로 돌아가려면 왼쪽 사이드바의 Design 아이콘을 클릭할 수 있습니다.

축하합니다! FlutterFlow의 내장 코드 에디터를 사용하여 앱을 사용자 지정했습니다. 코드를 이해하는 것은 더 깔끔한 디자인과 더 강력한 앱을 만드는 데 도움이 됩니다.