[flutter] 플러터에서의 Stack 위젯과 InkWell 위젯의 조합 예시

07 Dec 2023

flutter

이번 포스트에서는 플러터에서 Stack 위젯과 InkWell 위젯을 함께 사용하는 예시를 소개하겠습니다. Stack 위젯은 위젯을 겹쳐서 쌓을 수 있도록 해주는 위젯이고, InkWell 위젯은 터치 효과를 추가할 수 있는 위젯입니다. 이 두 위젯을 조합하면 자연스러운 터치 효과를 가진 겹쳐진 위젯을 만들 수 있습니다.

코드 예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack and InkWell Example'),
        ),
        body: Stack(
          children: [
            Image.asset('assets/background_image.jpg'),
            Positioned(
              top: 100,
              left: 100,
              child: InkWell(
                onTap: () {
                  print('Button tapped!');
                },
                child: Container(
                  width: 200,
                  height: 100,
                  color: Colors.transparent,
                  child: Center(
                    child: Text(
                      'Click Me',
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

이 예시 코드는 Stack 위젯 안에 Image 위젯과 Positioned 위젯을 사용하여 배경 이미지를 표시한 후, InkWell 위젯을 통해 버튼을 추가하고 있습니다. InkWell 위젯은 터치 이벤트를 감지하기 위해 onTap 속성을 사용합니다. 여기서는 버튼 클릭시 ‘Button tapped!’이라는 메시지가 콘솔에 출력되도록 설정되어 있습니다.

실행 결과

stack_and_inkwell_example

실행 결과는 스택 위젯 위에 겹쳐진 위젯으로 구성된 화면을 보여줍니다. 배경 이미지 위에 버튼이 위치하고 있으며, 버튼을 클릭할 경우 콘솔에 ‘Button tapped!’이라는 메시지가 출력됩니다.

결론

플러터에서 Stack 위젯과 InkWell 위젯을 조합하여 겹쳐진 위젯에 터치 효과를 추가하는 예시를 살펴보았습니다. 이를 통해 원하는 UI를 더욱 다양하게 구성할 수 있으며, 사용자와의 상호작용을 높일 수 있습니다. 자신만의 창의적인 아이디어로 이러한 기능을 활용해 보세요!

코드 예시

실행 결과

결론

참고 자료