[flutter] 스택드 위젯을 사용하여 올바른 자세 트레이너 앱 구성하기

15 Dec 2023

flutter

import 'package:flutter/material.dart';

class PostureTrainerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('올바른 자세 트레이너'),
        ),
        body: Stack(
          children: <Widget>[
            CameraPreview(), // 카메라 미리보기
            Positioned(
              bottom: 16.0,
              left: 16.0,
              child: FloatingActionButton( // 운동 비디오 촬영 버튼
                onPressed: () {
                  // 촬영 로직 추가
                },
                child: Icon(Icons.videocam),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 Stack 위젯을 사용하여 앱 화면을 구성하는 예제입니다. CameraPreview 위젯은 카메라 미리보기를, FloatingActionButton은 운동 비디오 촬영 버튼을 나타내고 있습니다.

결론

스택드 위젯을 활용하면 올바른 자세 트레이너 앱을 구현하는 데 도움이 됩니다. 화면을 겹쳐서 구성할 때 유용하게 사용할 수 있는 위젯이니, 플러터 앱을 개발할 때 적극 활용해보시기 바랍니다.

목차

스택드 위젯 소개

올바른 자세 트레이너 앱 디자인

스택드 위젯을 활용한 앱 구성

결론