Elutter Template Project

Elutter 프레임워크를 사용하여 webOS TV 애플리케이션을 시작하기 위한 템플릿 프로젝트입니다.

This is a template project for starting webOS TV applications using the Elutter framework.

📚 소개 / Introduction

한국어

이 프로젝트는 Elutter 프레임워크 기반의 webOS TV 앱 개발을 위한 시작점입니다. Elutter는 Flutter를 기반으로 TV 환경에 최적화된 UI 컴포넌트와 포커스 관리 시스템을 제공합니다.

English

This project is a starting point for developing webOS TV applications based on the Elutter framework. Elutter provides TV-optimized UI components and focus management systems built on Flutter.

🛠️ 시작하기 / Getting Started

설치 요구사항 / Prerequisites

# Flutter SDK 설치 확인
flutter-webos --version

# Elutter 의존성 확인
flutter-webos pub get

프로젝트 실행 / Running the Project

# webOS 디바이스에서 실행
flutter-webos run -d [device-name]

# 디버그 모드로 실행
flutter-webos run -d [device-name] --debug

🎨 EContainer를 통한 위젯 커스터마이징

한국어

Elutter의 모든 위젯은 EContainer를 통해 커스터마이징할 수 있습니다. EContainer는 다른 위젯을 감싸는 고차 컴포넌트(Higher-Order Component)로, 포커스 처리, 음성 제어, 시각 효과를 통합적으로 제공합니다. 시스템 설정에 따른 포커스 링 표시를 지원하며, 포괄적인 제스처 처리 기능을 갖추고 있습니다.

주요 기능:

• 포커스 처리 및 포커스 링 표시
• 음성 제어 통합
• 시각 효과 및 애니메이션
• 제스처 처리 (탭, 스와이프 등)
• 시스템 설정 기반 UI 자동 조정

⚠️ 주의: Elutter는 MaterialApp 기반이 아니므로, Material 위젯(TextField, Scaffold, AppBar 등)을 직접 사용하면 에러가 발생할 수 있습니다.

English

All Elutter widgets can be customized through EContainer. EContainer is a stateful higher-order component that wraps other widgets with integrated focus handling, voice control, and visual effects. It supports focus ring display based on system settings and provides comprehensive gesture handling capabilities.

Key Features:

• Focus handling with focus ring display
• Voice control integration
• Visual effects and animations
• Gesture handling (tap, swipe, etc.)
• Automatic UI adjustment based on system settings

⚠️ Warning: Since Elutter is not based on MaterialApp, using Material widgets directly (TextField, Scaffold, AppBar, etc.) may cause errors.

레이아웃 구조 / Layout Structure

EApp(
  child: EPanels(
    controller: navigatorController,
    pList: [
      MainView(),    // 메인 화면
      SecondView(),  // 두 번째 화면
    ],
  ),
)

🎯 프로젝트 구조 / Project Structure

lib/
├── main.dart                 # 앱 진입점
├── views/                    # 화면 뷰들
│   ├── main_view.dart
│   └── second_view.dart
├── widgets/                  # 커스텀 위젯들
│   └── custom_e_widget.dart
└── providers/                # 상태 관리 Provider들
    └── providers.dart

assets/
└── i18n/                     # 다국어 지원
    ├── en.json
    └── ko.json