캔버스 영역은 모바일 장치 화면을 보여주며 위젯을 드래그앤드롭하여 캔버스에 추가할 수 있습니다. 줌 레벨 및 캔버스 크기를 조절하고, 플로팅 위젯 팔레트를 열고, 어플리케이션을 밝은/어두운 모드로 볼 수 있는 버튼이 있습니다. 또한, 키보드가 열려있을 때 어플리케이션이 어떻게 보이는지 미리보기를 할 수 있습니다. 멀티언어 기능이 활성화되면, 언어를 변경할 수 있는 드롭다운이 표시되어 다른 언어로 어플리케이션이 어떻게 보이는지 확인할 수 있습니다.
Canvas Area
Preview Screen
이것은 사용자 인터페이스를 구성할 수 있는 디바이스 화면의 캔버스입니다. UI 빌더에서 드래그 앤 드롭으로 위젯을 추가하고, 속성 패널에서 제공하는 속성을 적용하여 화면을 사용자 정의할 수 있습니다.
Show or hide Navigation Menu
이 버튼을 사용하여 Navigation Menu를 열거나 닫을 수 있습니다.
Show or hide the navigation menu
Zoom Controls
캔버스의 확대/축소 레벨을 조절하기 위한 확대 (+) 와 축소 (-) 버튼이 있습니다. 복잡한 사용자 인터페이스 디자인을 작업할 때, 특정 영역으로 확대하여 위젯의 미리보기를 더 잘 볼 수 있고, 다시 전체를 볼 수 있도록 축소하는 기능이 유용합니다.
.gif)
Zoom Controls
Floating Widget Palette
Floating Widget Palette는 FlutterFlow의 모든 위젯에 액세스할 수 있도록 해줍니다. 이것은 본질적으로 UI Builder의 복제본입니다. 하지만, 떠다니는 창으로 열어둘 수 있습니다. 원하는 위치로 드래그하고 조정할 수 있습니다. 이것은 위젯 트리나 페이지 선택 메뉴를 열어둔 상태에서 새로운 위젯을 추가하려고 할 때 유용합니다. 이렇게 하면 다른 작업을 하는 것이 편리합니다.
Floating Widget Palette
Add AppBar
이 버튼을 클릭하면 페이지에 AppBar을 추가할 수 있습니다. 이 버튼을 클릭하면 팝업이 열리며 다양한 AppBar 스타일이 표시됩니다. 목록에서 원하는 스타일을 클릭하면 AppBar가 미리보기 화면에 표시됩니다.
.gif)
Add AppBar
Multi-Language Preview
멀티언어 드롭다운 메뉴를 사용하여 캔버스에서 앱의 모든 텍스트를 다른 언어로 미리보기할 수 있습니다. 드롭다운 메뉴에는 국기가 있는 지원되는 언어 목록이 표시되며 언어를 변경하면 번역된 텍스트가 캔버스에 나타납니다. 이 기능을 사용하면 앱을 실행하지 않고도 번역된 텍스트로 앱 디자인을 테스트하는 데 매우 유용합니다.
<aside> 💡 이 옵션은 프로젝트에서 다국어 지원을 활성화한 경우에만 사용할 수 있습니다.
</aside>
.gif)
Multi-Language Preview
Dark/Light Mode
다크 모드 / 라이트 모드 전환 아이콘을 사용하여 앱의 어두운 또는 밝은 테마를 미리보기 할 수 있습니다. 다크 모드 또는 라이트 모드로 전환하면 다크 또는 라이트 모드 테마에서 설정된 색상에 따라 앱 위젯 및 구성 요소가 표시됩니다.
<aside> 💡 이 옵션은 프로젝트에 다크 모드 테마 지원이 활성화되어 있는 경우에만 사용할 수 있습니다.
</aside>
Dark/Light Mode
Display Device
미리보기에서 장치 프레임을 표시하는 데 사용할 수 있습니다. 특정 장치에서 사용자 인터페이스를 시각화하거나 캡처하려는 경우 유용할 수 있습니다.
.gif)
Display Device
Display Resize Handle Bars
리사이즈 핸들 바를 활성화하면 미리보기 화면의 오른쪽과 아래쪽에 핸들바가 표시됩니다. 이를 통해 사용자 정의 해상도 화면에서 앱을 더 나은 테스트를 위해 미리보기 화면의 크기를 변경할 수 있으며 앱의 전반적인 반응성도 테스트할 수 있습니다.
.gif)
Display Resize Handle Bars
Display Keyboard
이 옵션을 활성화하면 장치 미리보기 화면에서 키보드가 열립니다. 이는 키보드가 표시된 상태에서 사용자 인터페이스를 시각화하는 데 도움이됩니다. 키보드를 열면 일반적으로 화면의 내용이 위쪽으로 밀려납니다.
.gif)
Display Keyboard
Resize Snapping
위젯 크기를 조정할 때, 특정 픽셀 값 또는 화면 크기의 백분율에 맞춰 크기를 조정할 수 있습니다. 기본적으로 1 픽셀로 설정되어 있습니다. 이를 변경하려면 여기를 클릭하고 크기 조정 스냅이 활성화되어 있는지 확인한 후, 픽셀 또는 백분율 값을 입력하십시오.
Resize snapping
Add NavBar
이 버튼을 사용하면 페이지에 NavBar를 추가할 수 있습니다. 이 버튼을 클릭하면 프로젝트에서 Navbar를 활성화할 수 있는 팝업이 열립니다. Navbar가 활성화되면 디자인에 맞게 사용자 정의할 수 있습니다.
.gif)
Add NavBar