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

07 Dec 2023

flutter

소개

Flutter는 사용자 인터페이스를 구축하기 위한 매우 강력한 도구입니다. Stack 위젯과 CustomPaint 위젯은 Flutter에서 사용자 정의 UI 요소를 만들기 위해 가장 많이 사용되는 위젯 중 일부입니다. Stack 위젯은 여러 위젯을 겹쳐서 표시하고 CustomPaint 위젯은 사용자가 직접 그래픽을 그릴 수 있는 위젯입니다. 이러한 두 가지 위젯을 조합하면 매우 흥미로운 사용자 정의 UI를 만들 수 있습니다.

예시

다음은 Stack 위젯과 CustomPaint 위젯을 조합하여 작은 원을 그리는 예시입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack and CustomPaint Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stack and CustomPaint Example'),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.white,
          ),
          CustomPaint(
            painter: CirclePainter(),
          ),
        ],
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.red;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

위 예시는 Stack과 CustomPaint 위젯을 사용하여 화면에 작은 원을 그리는 간단한 애플리케이션입니다. Stack 위젯을 사용하여 화면 전체를 덮는 Container를 만들고, 이 Container에 CustomPaint 위젯을 추가하여 원을 그립니다. CustomPaint 위젯은 CustomPainter 클래스를 상속받은 CirclePainter를 사용하여 사용자 정의 그림을 그리는 역할을 합니다.

결론

플러터에서 Stack 위젯과 CustomPaint 위젯을 조합하여 원하는 모양의 사용자 정의 UI를 만들 수 있습니다. 이 예시를 기반으로 여러분의 창의력을 발휘하여 흥미로운 디자인을 구현해보세요. Flutter의 다른 위젯과 기능과 조합하여 더욱 독특하고 멋진 인터페이스를 구현할 수 있습니다.

참고 자료: