[flutter] 스택드 위젯을 사용하여 원격 제어 앱 화면 구성하기

15 Dec 2023

flutter

이번에는 Flutter를 사용하여 스마트 홈 제어 애플리케이션의 화면을 구성하는 방법에 대해 살펴보겠습니다. 스택드(Stacked) 위젯은 화면 전체를 다양하게 배열하고 레이아웃하는 데 유용한 위젯입니다. 스택드 위젯을 활용하면 여러 위젯을 겹쳐서 표시하거나 정확한 위치에 배치할 수 있습니다.

1. 스택드 위젯 소개

스택드(Stacked) 위젯은 화면에 여러 위젯을 쌓거나 겹쳐서 표시할 때 사용됩니다. 이를 통해 레이아웃의 유연성을 높일 수 있습니다. 스택드 위젯을 사용하면 화면의 특정 위치에 위젯을 정확히 배치할 수 있어, 다양한 디자인을 구현할 수 있습니다.

2. 스택드 위젯 예시

import 'package:flutter/material.dart';

class RemoteControlApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Remote Control'),
      ),
      body: Stack(
        children: <Widget>[
          // 배경 이미지
          Image.network('https://example.com/background.jpg'),
          // 제어 버튼
          Positioned(
            top: 50,
            left: 20,
            child: IconButton(
              icon: Icon(Icons.power_settings_new),
              onPressed: () {
                // 전원 제어 로직
              },
            ),
          ),
          // 설정 버튼
          Positioned(
            top: 120,
            right: 20,
            child: IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                // 설정 화면으로 이동 로직
              },
            ),
          ),
          // 기기 상태
          Positioned(
            bottom: 20,
            left: 20,
            child: Text('상태: 연결됨'),
          ),
        ],
      ),
    );
  }
}

위 예시는 Stack 위젯을 사용하여 원격 제어 앱의 화면을 구성한 예시입니다. Stack 위젯 안에 배경 이미지와 제어 버튼, 설정 버튼, 기기 상태를 겹쳐서 배치하고 있습니다.

3. 결론

Flutter의 스택드(Stacked) 위젯을 사용하여 복잡한 화면 레이아웃을 구성할 수 있습니다. 이를 활용하면 다양한 모양과 기능을 갖춘 원격 제어 앱을 개발할 수 있습니다.

이 글에서는 스택드 위젯의 기본적인 사용 방법을 살펴보았습니다. 더 많은 고급 기술을 익히고 싶다면 공식 Flutter 문서를 참고해보세요.