본문 바로가기
반응형

프론트엔드66

Overlay `Overlay`와 `OverlayEntry` 위젯을 사용하여 페이지 위에 떠있는 UI를 구현할 수 있습니다. 이 위젯들을 사용하면 페이지 이동과 상관없이 떠있는 UI를 구현할 수 있습니다. `Overlay`는 앱 내에서 페이지 위에 떠있는 여러 개의 위젯들을 관리하는 컨테이너 역할을 합니다. `OverlayEntry`는 `Overlay` 위젯 내부에 추가될 위젯을 의미합니다. `OverlayEntry`는 빌드되는 위젯을 지정하고, `Overlay` 위젯에 추가하면 해당 위젯이 떠있는 UI로 나타나게 됩니다. 아래는 `Overlay`와 `OverlayEntry`를 사용하여 페이지 위에 떠있는 버튼을 구현한 예시입니다. import 'package:flutter/material.dart'; class My.. 2023. 5. 2.
Stack으로 겹치는 화면 만들기 Q) 플러터에서 page 전환이 아니라 댓글창처럼 화면 위에 걸치는 UI를 구현하려면 뭘 써야돼? Flutter에서 화면 위에 걸치는 UI를 구현하는 방법은 여러 가지가 있습니다. 일반적으로는 `Overlay` 위젯을 사용하여 구현합니다. 다음은 `Overlay` 위젯을 사용하여 댓글창과 같은 화면 위에 걸치는 UI를 구현하는 예제입니다. import 'package:flutter/material.dart'; class OverlayWidget extends StatefulWidget { @override _OverlayWidgetState createState() => _OverlayWidgetState(); } class _OverlayWidgetState extends State { bool _sh.. 2023. 5. 2.
AppBar AppBar란? Flutter에서 AppBar는 앱 상단에 위치하는 바입니다. 일반적으로 앱의 로고나 타이틀 등을 표시하고, 메뉴 버튼 또는 검색 필드 등의 작업을 수행하는 버튼도 포함됩니다. AppBar는 다음과 같은 속성을 가지고 있습니다. title: AppBar의 제목으로 사용되는 위젯입니다. leading: AppBar의 왼쪽에 배치되는 위젯입니다. 일반적으로 Drawer 버튼이나 뒤로 가기 버튼을 표시하는데 사용됩니다. actions: AppBar의 오른쪽에 배치되는 위젯 리스트입니다. 일반적으로 검색 필드나 메뉴 버튼 등을 표시하는데 사용됩니다. backgroundColor: AppBar의 배경 색상입니다. elevation: AppBar의 그림자 크기입니다. bottom: AppBar 하단.. 2023. 5. 2.
Scaffold Scaffold란? Flutter에서 Scaffold는 앱의 기본 구조를 제공하는 위젯입니다. Scaffold는 앱의 상단 바, 하단 탭 바, 바디(body)와 같은 구성 요소를 포함하여 앱의 뼈대를 구성하는데 필요한 많은 위젯을 내부적으로 구성하고 있습니다. Scaffold는 다음과 같은 구성 요소를 가지고 있습니다. AppBar: 앱 상단에 위치하는 바입니다. 일반적으로 앱의 로고나 타이틀 등을 표시합니다. Body: 앱의 메인 콘텐츠를 포함하는 부분입니다. 일반적으로 ListView, GridView, Column, Row 등과 같은 다른 위젯을 자식으로 갖습니다. Drawer: 앱 좌측에 위치하는 슬라이딩 메뉴를 제공합니다. BottomNavigationBar: 앱 하단에 위치하는 탭 바를 제공합.. 2023. 5. 2.
SafeArea SafeArea란? Flutter에서 SafeArea는 화면의 가장자리를 기준으로 자식 위젯이 화면에 나타나는 영역을 제한하는 위젯입니다. 기본적으로 SafeArea는 안전한 영역 내에서만 자식 위젯을 그리며, 이를 통해 화면의 경계선에 UI 요소가 가려지지 않도록 보호합니다. 안전한 영역은 화면의 가장자리에 있는 시스템 UI 요소(예: 네비게이션 바, 상태 바, 시계 등)가 차지하는 영역을 의미합니다. SafeArea를 사용하면 자식 위젯이 안전한 영역을 초과하지 않도록 제한할 수 있습니다. 예를 들어, 아이폰 X 이상의 모델에서는 상태 바와 하단 네비게이션 바가 디스플레이의 일부를 차지하므로, SafeArea를 사용하여 UI 요소가 이러한 시스템 요소에 가려지지 않도록 할 수 있습니다. SafeAre.. 2023. 5. 2.
Flutter의 Widget 종류와 StatefulWidget Flutter의 Widget 종류 Flutter에는 다양한 종류의 위젯이 있습니다. 다음은 일부 흔한 위젯의 예입니다. StatelessWidget: 이 위젯은 한 번 생성되면 상태가 변경되지 않는 정적인 UI를 만들 때 사용됩니다. 예를 들어, 텍스트 또는 이미지와 같은 간단한 UI를 만들 때 사용됩니다. Container: 이 위젯은 일반적으로 UI 요소를 그룹화하고 배치하기 위해 사용됩니다. Container는 색상, 여백, 경계선, 그림자와 같은 스타일링 기능을 제공합니다. Row, Column: 이 위젯들은 위젯을 수평 또는 수직으로 배열하기 위해 사용됩니다. Row는 가로로, Column은 세로로 배치할 수 있습니다. ListView: 이 위젯은 화면에 스크롤 가능한 목록을 만들 때 사용됩니다.. 2023. 5. 2.
반응형

티스토리툴바