[flutter] 스택드 위젯을 사용하여 버튼 클릭 시 동적으로 위젯 추가하기

15 Dec 2023

flutter

Flutter 앱에서 버튼을 클릭하면 동적으로 위젯을 추가하는 기능은 매우 유용합니다. 이를 구현하기 위해 Stack 위젯을 사용할 수 있습니다. Stack 위젯은 위젯을 쌓아 올릴 때 사용되며, 위치 및 크기를 조절할 수 있습니다.

스택 위젯 소개

스택 위젯은 여러 개의 자식 위젯을 쌓아 올려 화면에 표시하는 데 사용됩니다. 각 자식 위젯의 위치는 Positioned 위젯을 사용하여 지정할 수 있습니다.

Stack(
  children: <Widget>[
    Positioned(
      top: 100,
      left: 50,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 150,
      left: 100,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    ),
  ],
)

동적으로 위젯 추가하기

아래는 버튼을 클릭할 때마다 랜덤한 위치에 빨간색 박스를 추가하는 예제 코드입니다.

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('동적 위젯 추가'),
        ),
        body: DynamicWidgetList(),
      ),
    );
  }
}

class DynamicWidgetList extends StatefulWidget {
  @override
  _DynamicWidgetListState createState() => _DynamicWidgetListState();
}

class _DynamicWidgetListState extends State<DynamicWidgetList> {
  List<Widget> _widgets = [];

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        ..._widgets,
        Positioned(
          left: 0,
          top: 0,
          child: RaisedButton(
            onPressed: () {
              setState(() {
                _widgets.add(
                  Positioned(
                    left: (40 + 160 * (DateTime.now().microsecondsSinceEpoch % 10)) % 200,
                    top: (40 + 160 * (DateTime.now().microsecondsSinceEpoch % 10)) % 200,
                    child: Container(
                      width: 120,
                      height: 120,
                      color: Colors.red,
                    ),
                  ),
                );
              });
            },
            child: Text('Add Widget'),
          ),
        ),
      ],
    );
  }
}

이제 해당 앱을 실행하고 “Add Widget” 버튼을 클릭해보세요. 버튼을 클릭할 때마다 스택 위젯에 랜덤한 위치에 빨간색 박스가 동적으로 추가될 것입니다.

Stack 위젯과 버튼 클릭 시 동적 위젯을 추가하는 방법에 대해 알아보았습니다. 기존 위젯을 유지한 채로 동적으로 위젯을 추가할 수 있도록 Stack 위젯을 활용하여 화면을 보다 동적으로 제어할 수 있게 되었습니다.

더 많은 Flutter 위젯 및 기능에 대해 알아보려면 Flutter 공식 문서를 참고하세요.