Controller

Flutter에서 Controller는 위젯과 위젯의 상태를 관리하는 데 사용된다.

Controller를 사용하면 위젯의 라이프사이클과 별개로 상태를 유지할 수 있습니다.

이는 특히 StatelessWidget에서 유용한데, StatelessWidget은 그 자체로는 변경 가능한 상태를 가질 수 없기 때문이다.

 

 

Controller란?

어떤 메서드(함수) 혹은 속성을 통해서 controller가 입력이된 위젯을 제어할 수 있게끔 한다.

 

 

TextEditingController 예제

가장 일반적으로 사용되는 컨트롤러 중 하나는 TextEditingController이다.

이 컨트롤러는 TextField 위젯의 텍스트를 관리하는 데 사용된다.

 

StatelessWidget에서 TextEditingController를 사용하는 방법을 살펴보자:

이 예제에서 주요점: 

• controller라는 TextEditingController 인스턴스를 만든다. -> 빨간색 네모
• 이 컨트롤러는 TextField 위젯에 전달되어 해당 필드의 텍스트를 관리한다. -> 노간색 네모
• TextEditingController의 text 속성을 사용하여 텍스트 필드의 현재 값을 가져오거나 설정할 수 있다. -> 연두색 네모
• ElevatedButton을 누르면 controller.text를 사용하여 현재 텍스트 필드의 값에 액세스하고 이를 AlertDialog에 표시한다. -> 연두색 네모

 

 

PageController 예제

PageController는 Flutter에서 페이지 뷰를 제어하는 데 사용되는 컨트롤러이다.

PageView 위젯과 함께 사용하여 페이지 간 스와이프 전환, 특정 페이지로 이동 등을 구현할 수 있다.

 

다음은 PageController를 사용하여 간단한 페이지 뷰를 만드는 예제이다:

이 예제에서 주요점: 

• controller라는 PageController 인스턴스를 만든다. -> 빨간색 네모
• 이 컨트롤러는 PageView 위젯에 전달되어 해당 필드의 텍스트를 관리한다. -> 노간색 네모
• 각 IconButton의 버튼을 누르면 PageController의 animateToPage 메서드를 호출하여 해당 페이지로 부드럽게 전환한다. -> 연두색 네모

 

 

WebViewController 예제

WebViewController는 Flutter 웹뷰 플러그인인 webview_flutter에서 제공하는 컨트롤러이다.

이 컨트롤러를 사용하면 웹뷰의 다양한 기능을 제어할 수 있다.

 

다음은 WebViewController를 사용하여 웹뷰를 로드하고 제어하는 방법을 보여주는 예제이다:

이 예제에서 주요점: 

• controller라는 WebViewController 인스턴스를 만든다. -> 빨간색 네모
• loadRequest 메서드를 사용하여 초기 URL을 로드한다.
• setJavaScriptMode 메서드를 사용하여 웹뷰에서 자바스크립트를 실행할 수 있도록 설정한다.
• 이 컨트롤러는 WebViewWidget 위젯에 전달되어 해당 필드의 텍스트를 관리한다. -> 노간색 네모
• 첫 번째 IconButton의 버튼을 누르면 WebViewController의 loadRequest 메서드를 호출하여 해당 Uri로 전환한다. -> 연두색 네모
• 두 번째 IconButton의 버튼을 누르면 WebViewController의 reload 메서드를 Uri를 새로고침한다. -> 연두색 네모

 

 

정리

Flutter에서 Controller는 위젯의 상태와 동작을 제어하는 역할을 한다.

Controller는 일반적으로 StatefulWidget과 함께 사용되지만, StatelessWidget에서도 사용할 수 있다.

Controller는 위젯과 독립적으로 존재하며, 위젯의 생명주기와는 별개로 동작한다.

이를 통해 위젯이 다시 빌드되더라도 Controller에 저장된 상태를 유지할 수 있다.

 

Controller는 다양한 메서드(함수) 또는 속성을 제공하여 위젯을 제어합니다.

 

예를 들어:

• TextEditingController의 text 속성을 사용하여 텍스트 필드의 현재 값을 가져오거나 설정할 수 있다.
• PageController의 animateToPage()메서드를 사용하여 페이지를 전환할 수 있습니다.
• WebViewController의 loadRequest(), goBack(), reload() 등의 메서드를 사용하여 웹뷰를 제어할 수 있다.

위젯은 해당 Controller의 인스턴스를 속성으로 받아 사용한다.

예를 들어, TextField 위젯은 controller 속성을 통해 TextEditingController를 받고, WebViewWidget은 controller 속성을 통해 WebViewController를 받는다.

 

 

결론

Flutter의 다양한 컨트롤러를 활용하면 StatelessWidget에서도 텍스트 필드, 페이지 전환 등의 상태를 쉽게 관리할 수 있다. 컨트롤러를 사용할 때는 위젯의 라이프사이클을 고려하여 필요에 따라 컨트롤러를 생성하고 dispose하는 것이 중요하다.