flet 13

Flet 메모장

이 책에 포함된 예제 코드중 메모장 기능을 새로 만들어 보왔습니다. 이 코드에서는 Flet을 사용하여 사용자가 메모를 입력하고, 삭제하고, 선택할 수 있는 기능을 제공합니다. 데이터베이스와의 연동을 위해 memo_dbhandler.py 모듈을 별도로 작성하였 데이터베이스 작업을 분리함으로써 코드의 가독성과 유지보수를 용이하게 했습니다. 주요 기능으로는 메모 추가, 선택, 삭제, 및 모든 메모 삭제가 포함되며 데이터베이스로 통합되어 사용자의 메모 정보를 영구적으로 저장할 수 있습니다.데이터 베이스 모듈(memo_dbhandler.py)데이터베이스와 관련된 작업들을 수행하는 모듈로, 다음과 같은 역할을 합니다:데이터베이스 설정 및 테이블 생성 (setup_db()) - 데이터베이스 연결을 생성하고 테이블이 ..

Flet로 만든 별다방 키오스크(Kiosk)

Flet을 사용하여 전자 메뉴판을 구성하고, 사용자가 메뉴를 선택하면 주문 목록에 해당 메뉴가 추가되며 총 주문 금액과 개수가 업데이트되도록 설계되었습니다. 세 자리마다 쉼표를 넣어 금액을 표시하여 사용자에게 가독성을 높였습니다. 초기화 버튼으로 주문 목록을 비울 수 있으며, 그리드 뷰를 사용해 메뉴를 시각적으로 깔끔하게 배치했습니다.import flet as ftdef main(page: ft.Page): page.title ="별다방 키오스크" page.theme_mode = ft.ThemeMode.DARK page.window.width = 750 page.window.height = 1200 page.scroll = "auto" page.padding = 20 ..

Flet GridView로 만든 계산기

GridView는 Flet에서 제공하는 매우 유용한 UI 컴포넌트 중 하나로, 여러 개의 항목을 그리드 형태로 배치하는 데 사용됩니다. 이 컴포넌트는 특히 많은 수의 항목을 간결하고 시각적으로 정렬된 방식으로 보여주고자 할 때 매우 유용합니다. 예를 들어, 사진 갤러리, 제품 카탈로그, 카드 스타일의 콘텐츠를 구성할 때 자주 사용됩니다.GridView는 Flet에서 항목들을 격자 형태로 배치하는 데 유용한 레이아웃 위젯입니다.runs_count, spacing, run_spacing, max_extent 등을 사용하여 그리드의 레이아웃을 조정할 수 있습니다.이미지 갤러리, 대시보드, 제품 목록 등 다양한 UI 패턴에 활용할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.수직 및 수평 스크롤 모두 지원하..

Flet ListTitle

ListTitle은 Flet 프레임워크에서 제공하는 위젯 중 하나로, 리스트 항목을 보다 구조적으로 표현할 수 있도록 해주는 구성 요소입니다. ListTitle은 사용자가 리스트의 항목을 시각적으로 명확하게 구분하고 쉽게 상호작용할 수 있도록 설계되었습니다. 특히, 각 리스트 항목에 제목, 서브타이틀, 아이콘 등을 포함하여 더욱 풍부한 사용자 인터페이스(UI)를 만들 때 유용합니다. 클릭 이벤트를 처리하여 사용자와의 상호작용도 쉽게 구현할 수 있습니다. Flet 앱에서 자주 사용되는 UI 패턴인 메뉴 리스트나 설정 페이지 등에 매우 적합한 도구입니다.1. ListTitle 개요ListTitle은 Flutter의 ListTile과 유사한 개념으로, 리스트 항목에 기본적인 UI 요소들을 추가하여 항목을 풍부..

Flet ListView

ListView는 Flet에서 중요한 UI 컴포넌트 중 하나로, 많은 항목들을 스크롤 가능한 리스트 형태로 표시하는데 사용됩니다.ListView는 Flet에서 스크롤 가능한 목록을 만드는 데 사용됩니다.많은 항목을 효율적으로 표시할 수 있어 채팅, 데이터 목록 등 다양한 경우에 활용할 수 있습니다.속성으로는 spacing, padding, expand, auto_scroll 등이 있으며, scroll_direction을 통해 수평/수직 스크롤을 조절할 수 있습니다.Flet의 ListView는 데이터를 유연하고 효율적으로 보여주는 데 유용하며, 다양한 사용자 인터페이스에 쉽게 적용될 수 있는 강력한 도구입니다.1. Flet ListView 개요ListView는 스크롤 가능한 위젯으로, 여러 개의 자식 요소..

Flet 날씨 App

이 책에 포함된 날씨 어플리케이션은 flet를 이용해 UI를 구성하고, python_weather 라이브러리로 날씨 데이터를 가져옵니다. 이 앱은 사용자가 특정 도시를 입력하면 해당 도시의 날씨 상태(아이콘, 온도, 습도 등)를 표시합니다.비동기 처리를 통해 get_weather 함수가 날씨 데이터를 효율적으로 가져올 수 있도록 설계되었으며, flet의 다양한 UI 컴포넌트를 사용하여 간단하면서도 유용한 GUI를 구성하고 있습니다.import flet as ftimport python_weather# Functionsdef get_weather_icon(condition): if condition == "Thunderstorm": return '🌩️' elif condition ..

Flet Layout 배치(Column, Row, alignment, padding, margin...)

Flet에서 Columns와 Rows는 UI 요소들을 수평 또는 수직으로 배치하기 위해 사용하는 레이아웃 구성 요소입니다. 이들은 Flutter의 Column 및 Row와 비슷하며, 유연하게 UI를 구성할 수 있도록 도와줍니다.Column: 자식 요소들을 수직으로 나열하는 데 사용. 기본적으로 위젯들을 위에서 아래로 배치.Row: 자식 요소들을 수평으로 나열하는 데 사용. 기본적으로 위젯들을 왼쪽에서 오른쪽으로 배치.spacing과 alignment를 사용하여 요소들 간의 간격과 정렬을 설정할 수 있으며, 복잡한 레이아웃을 만들 때 이 두 가지를 유용하게 활용할 수 있습니다.중첩 사용을 통해 복잡하고 다양한 사용자 인터페이스를 구성할 수 있습니다.1. ColumnsColumns는 자식 요소들을 수직으로 ..

Flet Mobile App Layout

Mobile App의 기본 Layout 형태상단바 (AppBar): 햄버거 메뉴 아이콘과 설정 아이콘을 포함하며 중앙에 제목을 표시.하단 내비게이션바 (NavigationBar): 홈, 이메일, 검색으로 이동할 수 있는 탭 제공.플로팅 액션 버튼 (FloatingActionButton): 페이지 하단에 떠있는 추가 버튼, "추가"와 같은 기능 수행.중앙 영역 (Body): 로컬에 있는 이미지를 중앙에 위치시켜 표시.페이지 레이아웃: 상단에 AppBar, 중앙에 Body, 하단에 NavigationBar로 구성되어 전체적으로 모바일 앱과 유사한 사용자 경험을 제공합니다.import flet as ftdef main(page: ft.Page): page.title = "Page Layout" # ..

Flet 타이머

이 프로그램은 Flet 라이브러리를 사용하여 스톱워치 UI를 구현하고, 파이썬의 스레딩을 활용하여 타이머의 시간이 실시간으로 업데이트되도록 만듭니다. 사용자는 시작과 중지 버튼을 통해 스톱워치를 제어할 수 있으며, 시간은 시:분:초.밀리초 형식으로 정확하게 표시됩니다.코드의 실행 과정초기화: 프로그램이 실행되면 StopwatchApp 클래스의 인스턴스가 생성됩니다.UI 설정: run() 메서드를 호출하여 Flet 앱을 시작하고, main() 함수에서 UI를 설정합니다.타이머 동작:사용자가 "시작" 버튼을 클릭하면 타이머가 시작됩니다. 시간이 10밀리초마다 업데이트되어 화면에 표시됩니다."중지" 버튼을 클릭하면 타이머가 멈추고, 다시 클릭하면 타이머가 초기화된 상태로 대기합니다. import flet as..

Flet 계산기

주요 기능 및 사용 방법사용자는 텍스트 필드에 계산하고 싶은 수식을 입력합니다.사칙연산 버튼을 클릭하면 입력 필드에 해당 연산자가 추가됩니다."계산하기" 버튼을 클릭하면 입력된 수식이 계산되어 결과가 화면 하단에 표시됩니다.이 계산기는 eval 함수를 사용하여 입력된 수식을 평가하므로, 사용자가 잘못된 수식을 입력할 경우 오류 메시지가 표시됩니다. import flet as ftdef main(page: ft.Page): page.title="Flet 계산기" page.theme_mode = ft.ThemeMode.LIGHT # 결과를 표시하는 텍스트 위젯 result_text = ft.Text(value="", size=20) # 첫번째 텍스트 필드 (사용자가 수식을 입력하는..

Flet Button와 Event

Flet에서 버튼(Button)은 사용자와의 상호작용을 처리하는 중요한 위젯 중 하나입니다. 버튼을 사용하면 클릭 이벤트를 처리할 수 있으며, Flet에서 제공하는 여러 종류의 버튼이 있습니다. 각각의 버튼은 다양한 스타일을 제공하며, 주로 버튼 클릭 시 실행할 이벤트 핸들러 함수를 설정하여 동작을 제어합니다.다음은 Flet의 버튼 종류와 이벤트 처리 방법에 대한 설명입니다.1. Flet에서 제공하는 버튼 종류Flet은 다양한 버튼 스타일을 제공합니다. 주로 사용하는 버튼은 다음과 같습니다.1) ElevatedButton설명: Raised 버튼 스타일로, 약간의 그림자 효과가 있는 버튼입니다. 가장 일반적으로 사용되는 버튼 타입입니다.예시: import flet as ft def main(page: ..

Flet의 기본 구조 와 개발 가이드

Flet의 기본 구조는 Flutter와 유사하며, 위젯 기반으로 설계되어 있습니다. 이를 통해 사용자는 간단하게 UI 요소를 조합하고 애플리케이션을 만들 수 있습니다. Flet 애플리케이션은 주로 Page 객체를 중심으로 구성되며, 그 위에 다양한 위젯들을 추가하여 사용자 인터페이스를 구성합니다.  Flet의 기본 구조는 매우 직관적이며, 모든 것이 위젯과 이벤트 중심으로 이루어져 있습니다. 이를 통해 Python을 사용하여 복잡한 웹 애플리케이션을 쉽고 빠르게 개발할 수 있습니다. Page 객체는 앱의 전체 구조를 담당하며, 그 위에 다양한 UI 요소들을 추가하는 방식으로 애플리케이션이 구성됩니다. 다음은 Flet 애플리케이션의 기본 구조에 대해 설명한 예제입니다.Flet 기본 구조 예제import f..

Python with Flet - 설치

Flet은 Python을 사용하여, 웹, 모바일, 데스크탑 애플리케이션을 만들 수 있는 프레임워크입니다. Flet은 프론트엔드와 백엔드 모두를 Python으로 작성할 수 있게 해주며, Flutter를 기반으로 한 사용자 인터페이스(UI)를 제공하여 매우 직관적이고 쉽게 사용할 수 있습니다. 주요 특징은 다음과 같습니다:간단한 코드로 UI 구현: Flet은 Flutter의 위젯 시스템을 사용하여 버튼, 텍스트 필드, 리스트, 탭, 데이터 테이블 등 다양한 UI 컴포넌트를 제공하지만, Python 코드만으로 이 UI를 제어하고 표시할 수 있습니다.서버에서 실행: Flet 애플리케이션은 서버에서 실행되며, 사용자는 브라우저에서 해당 애플리케이션을 접근합니다. 즉, 프론트엔드와 백엔드를 한 번에 Python으로..