[flutter] 플러터(IndexedStack)에서 위젯의 색상, 크기 등을 동적으로 변경할 수 있나요?

07 Dec 2023

flutter

IndexedStack 위젯은 여러 개의 자식 위젯을 겹쳐놓고, 현재 인덱스에 해당하는 하나의 위젯을 보여주는 역할을 합니다. 이를 통해 동적으로 위젯의 색상과 크기를 변경할 수 있습니다.

먼저, 동적으로 변경할 위젯을 StatelessWidget으로 생성합니다. 이 때, 색상과 크기를 인자로 받도록 설정합니다. 예를 들어, 다음과 같이 RaisedButton 위젯을 동적으로 변경하려면:

class MyWidget extends StatelessWidget {
  final Color color;
  final double size;

  MyWidget({@required this.color, @required this.size});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {},
      child: Text('Button'),
      color: color,
      // 크기 변경을 위해 Container를 사용합니다.
      // 변동 가능한 크기의 위젯일 경우에는 필요한 크기를 계산하고 설정하면 됩니다.
      // 예시로 고정된 크기인 경우, SizedBox로 wrapping할 수 있습니다.
      child: Container(
        width: size,
        height: size,
      ),
    );
  }
}

다음으로, IndexedStack 위젯을 사용하여 위젯의 인덱스에 따라 동적으로 위젯을 변경합니다.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int widgetIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Widget'),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  setState(() {
                    widgetIndex = 0; // 첫 번째 위젯
                  });
                },
                child: Text('Widget 1'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    widgetIndex = 1; // 두 번째 위젯
                  });
                },
                child: Text('Widget 2'),
              ),
            ],
          ),
          IndexedStack(
            index: widgetIndex,
            children: <Widget>[
              MyWidget(color: Colors.red, size: 50), // 첫 번째 위젯
              MyWidget(color: Colors.blue, size: 100), // 두 번째 위젯
            ],
          ),
        ],
      ),
    );
  }
}

위의 예시에서는 RaisedButton을 사용하여 동적으로 위젯을 변경하고, IndexedStack를 사용하여 현재 인덱스에 해당하는 위젯을 보여줍니다. 기본 크기와 색상을 MyWidget 위젯에서 설정하고, IndexedStack에서 색상과 크기를 동적으로 변경합니다.

이를 실행하면 두 개의 버튼 중 하나를 누름으로써 위젯의 색상과 크기가 변경되는 것을 확인할 수 있습니다.

자세한 내용은 플러터 공식 문서와 플러터 앱 개발 가이드를 참고하시기 바랍니다.