Flutter의 커스텀 위젯(Custom Widget) 만들기

Flutter에서 커스텀 위젯(Custom Widget)을 만드는 것은 애플리케이션의 UI를 재사용 가능하고 모듈화된 컴포넌트로 구성하는 데 매우 유용합니다. 커스텀 위젯을 사용하면 코드를 더욱 깔끔하고 유지 보수하기 쉽게 만들 수 있습니다. 이번 글에서는 Flutter에서 커스텀 위젯을 만드는 방법과 다양한 예제를 통해 이를 구현하는 방법에 대해 자세히 살펴보겠습니다.

1. 기본 커스텀 위젯 만들기

Flutter에서 커스텀 위젯을 만들려면 StatelessWidget이나 StatefulWidget을 상속받아 새 클래스를 정의합니다. 먼저 StatelessWidget을 사용하여 간단한 커스텀 위젯을 만들어보겠습니다.

 

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('Custom Widget Demo')),
        body: Center(
          child: MyCustomWidget(),
        ),
      ),
    );
  }
}

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Text(
        'Hello, Custom Widget!',
        style: TextStyle(color: Colors.white, fontSize: 18.0),
      ),
    );
  }
}

 

위 코드는 MyCustomWidget이라는 간단한 커스텀 위젯을 정의합니다. 이 위젯은 파란색 배경과 둥근 모서리를 가진 컨테이너 안에 텍스트를 표시합니다.

2. StatefulWidget을 사용한 커스텀 위젯

상태를 관리해야 하는 커스텀 위젯은 StatefulWidget을 사용하여 만듭니다. 이번에는 버튼을 클릭할 때마다 카운터가 증가하는 커스텀 위젯을 만들어보겠습니다.

 

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('Custom Stateful Widget Demo')),
        body: Center(
          child: MyCounterWidget(),
        ),
      ),
    );
  }
}

class MyCounterWidget extends StatefulWidget {
  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Counter: $_counter',
          style: TextStyle(fontSize: 24.0),
        ),
        SizedBox(height: 20.0),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

 

위 코드는 MyCounterWidget이라는 커스텀 위젯을 정의합니다. 이 위젯은 카운터 값을 표시하고, 버튼을 클릭할 때마다 카운터 값을 증가시킵니다.

 

반응형

 

 

3. 커스텀 위젯에 속성 추가하기

커스텀 위젯에 속성을 추가하면 다양한 값을 전달받아 동적으로 위젯을 구성할 수 있습니다. 이번에는 텍스트와 색상을 속성으로 전달받는 커스텀 위젯을 만들어보겠습니다.

 

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('Custom Widget with Props')),
        body: Center(
          child: MyCustomWidget(
            text: 'Hello, Flutter!',
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

class MyCustomWidget extends StatelessWidget {
  final String text;
  final Color color;

  MyCustomWidget({required this.text, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Text(
        text,
        style: TextStyle(color: Colors.white, fontSize: 18.0),
      ),
    );
  }
}

 

위 코드는 MyCustomWidget에 text와 color 속성을 추가하여, 전달된 값에 따라 위젯을 동적으로 구성합니다.

4. 복잡한 커스텀 위젯 만들기

커스텀 위젯은 다른 위젯들을 조합하여 복잡한 UI 컴포넌트를 구성할 수 있습니다. 이번에는 카드 형태의 커스텀 위젯을 만들어보겠습니다.

 

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('Complex Custom Widget Demo')),
        body: Center(
          child: MyCardWidget(
            title: 'Flutter',
            description: 'Build beautiful native apps',
            icon: Icons.flutter_dash,
          ),
        ),
      ),
    );
  }
}

class MyCardWidget extends StatelessWidget {
  final String title;
  final String description;
  final IconData icon;

  MyCardWidget({
    required this.title,
    required this.description,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(icon, size: 48.0, color: Colors.blue),
            SizedBox(height: 10.0),
            Text(
              title,
              style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10.0),
            Text(
              description,
              style: TextStyle(fontSize: 16.0, color: Colors.grey[600]),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 MyCardWidget이라는 카드 형태의 커스텀 위젯을 정의합니다. 이 위젯은 아이콘, 제목, 설명을 포함하며, 카드 형태로 구성되어 있습니다.

결론

Flutter에서 커스텀 위젯을 만드는 것은 애플리케이션의 UI를 모듈화하고 재사용 가능하게 만드는 중요한 기술입니다. 기본 StatelessWidget과 StatefulWidget을 사용하여 커스텀 위젯을 정의할 수 있으며, 속성을 추가하여 동적으로 위젯을 구성할 수 있습니다. 복잡한 커스텀 위젯을 만들 때는 다른 위젯들을 조합하여 더욱 풍부한 UI 컴포넌트를 구현할 수 있습니다. 커스텀 위젯을 적절히 활용하여 직관적이고 유지 보수하기 쉬운 애플리케이션을 만들어보세요.