[Flutter] StatelessWidget과 StatefulWidget을 함께 활용하는 실전 예제

안녕하세요! 이번 포스팅에서는 Flutter 개발에서 StatelessWidget과 StatefulWidget을 함께 활용하는 방법에 대해 알아보겠습니다. StatelessWidget과 StatefulWidget은 Flutter 앱 개발에서 가장 중요한 위젯 중 두 가지입니다. StatelessWidget은 변하지 않는 UI 요소를 표현할 때 사용되고, StatefulWidget은 동적으로 변화하는 상태를 가지는 UI 요소를 표현할 때 사용됩니다. 이 두 가지 위젯을 함께 사용하여 좀 더 복잡하고 동적인 앱을 개발할 수 있습니다.

이번 예제에서는 간단한 작업 목록 관리 앱을 만들어보겠습니다. 이 앱은 사용자가 할 일 목록을 추가하고, 완료한 항목을 체크할 수 있는 기능을 가지고 있습니다. 이를 위해 StatelessWidget과 StatefulWidget을 적절히 조합하여 앱을 구성해보겠습니다.

먼저, StatelessWidget을 사용하여 앱의 기본 레이아웃을 작성합니다. 여기에는 할 일 목록을 표시하는 리스트와 할 일을 추가할 수 있는 입력 폼이 포함됩니다. StatefulWidget은 할 일 항목의 완료 상태를 관리하는 데 사용됩니다. 사용자가 항목을 체크하면 해당 항목의 상태가 변경되어 UI에 반영됩니다.

Step 1: StatelessWidget 작성

먼저, StatelessWidget을 작성하여 앱의 기본 레이아웃을 구성해보겠습니다. 이때는 변하지 않는 UI 요소들을 구성하게 됩니다.

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할 일 목록'),
      ),
      body: Column(
        children: [
          // 할 일 목록 표시
          // 입력 폼
        ],
      ),
    );
  }
}

Step 2: StatefulWidget 작성

다음으로, StatefulWidget을 작성하여 할 일 목록의 상태를 관리하고 UI 갱신을 처리해보겠습니다.

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  List<String> todos = ['운동하기', '책 읽기', '청소하기'];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(todos[index]),
        );
      },
    );
  }
}

반응형

Step 3: StatelessWidget과 StatefulWidget 결합

이제 StatelessWidget과 StatefulWidget을 함께 사용하여 앱의 기능을 완성해보겠습니다. StatefulWidget인 TodoList를 StatelessWidget인 TodoApp에서 호출하여 사용합니다.

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할 일 목록'),
      ),
      body: Column(
        children: [
          Expanded(
            child: TodoList(),
          ),
          // 입력 폼
        ],
      ),
    );
  }
}

위 예제에서는 StatelessWidget인 TodoApp에서 StatefulWidget인 TodoList를 호출하고, TodoList는 ListView.builder를 사용하여 할 일 목록을 표시합니다. 이렇게 함으로써 StatelessWidget과 StatefulWidget을 함께 활용하여 동적인 UI와 상태를 가진 앱을 구현할 수 있습니다.

이번 포스팅에서는 Flutter에서 StatelessWidget과 StatefulWidget을 함께 활용하는 방법을 알아보았습니다. 이를 통해 복잡하고 동적인 앱을 개발하는 데에 도움이 되었기를 바랍니다. 다음 포스팅에서 더 다양한 예제와 실전 기술을 다루어보도록 하겠습니다. 감사합니다!