플러터(Flutter) 앱을 개발하다 보면 UI와 데이터를 바인딩하여 화면에 동적인 내용을 표시해야 하는 경우가 있습니다. 이때 Column 위젯을 사용하여 여러 위젯을 세로로 배치하고, 해당 위젯들에 데이터를 바인딩하는 방법에 대해 알아보겠습니다.

1. 데이터 모델 클래스 생성

우선, 바인딩할 데이터의 모델 클래스를 생성해야 합니다. 예를 들어, 학생의 정보를 표시하는 앱을 만든다고 가정해보겠습니다.

class Student {
  final String name;
  final int age;

  Student(this.name, this.age);
}

위와 같이 Student 클래스를 정의하고, 이름(name)과 나이(age)를 저장할 수 있도록 합니다.

2. 데이터를 바인딩할 위젯 구현

다음으로, Column 위젯을 사용하여 데이터를 바인딩할 UI를 구현합니다. 아래는 학생 정보를 표시하는 간단한 예시입니다.

Column(
  children: <Widget>[
    Text('학생 정보', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
    SizedBox(height: 10),
    Text('이름: ${student.name}'),
    Text('나이: ${student.age}세'),
  ],
)

여기서 student는 바인딩할 데이터를 가진 Student 객체입니다.

3. 데이터 바인딩

마지막으로, 데이터를 위젯에 바인딩하기 위해 setState를 사용하여 상태를 업데이트합니다. 예를 들어, Student 정보가 변경될 때마다 화면을 갱신하기 위해 setState를 호출할 수 있습니다.

setState(() {
  student = Student('홍길동', 20);
});

위와 같이 상태를 업데이트하고나면, Column 위젯에 바인딩된 데이터가 변경되어 화면에 새로운 내용이 표시됩니다.

이와 같이 플러터에서 Column 위젯을 사용하여 데이터를 바인딩하는 방법을 알아보았습니다.

참고문헌: Flutter 공식 문서, Flutter Cookbook