플러터(Flutter) 위젯 사용에 대한 가이드 part 1

플러터(Flutter)는 Google에서 만든 오픈 소스 UI 개발 프레임워크로 개발자가 단일 코드베이스를 사용하여 Android 및 iOS 플랫폼 모두를 위한 고품질 네이티브 모바일 애플리케이션을 빌드할 수 있도록 합니다.

플러터(Flutter)는 개발자가 멋진 대화형 사용자 인터페이스를 만드는 데 사용할 수 있는 위젯이라는 다양 사전 빌드된 UI 구성 요소 세트를 제공합니다. 이러한 위젯은 사용자 정의가 가능하여 개발자가 응용 프로그램의 특정 요구 사항을 충족하도록 모양, 동작 및 기능을 수정할 수 있습니다.

이번 챕터에서는 텍스트, 이미지, 버튼 위젯을 포함하여 가장 일반적으로 사용되는 일부 플러터(Flutter) 위젯과 더 복잡하고 대화형 사용자 인터페이스를 만드는 데 사용할 수 있는 일반적으로 사용되는 기타 위젯에 대한 포괄적인 가이드를 제공합니다.

플러터(Flutter) 위젯 배우기 part1

텍스트 위젯: Text 위젯은 화면에 텍스트를 표시하는 데 사용됩니다.

글꼴 크기, 글꼴 두께 및 글꼴 색상과 같은 다양한 텍스트 스타일을 지원합니다. 텍스트는 왼쪽, 오른쪽 또는 가운데로 정렬할 수 있으며 화면에 맞지 않을 정도로 길면 줄 바꿈 하거나 넘길 수 있습니다. 텍스트 위젯은 URL을 열기 위해 클릭할 수 있는 하이퍼링크를 표시하는 데 사용할 수도 있습니다. 플러터(Flutter)에서 Text 위젯을 사용하려면 새 Text 위젯을 만들고 원하는 텍스트를 문자열로 전달하기만 하면 됩니다.

위 예제에서는 "Hello, World!"라는 텍스트가 있는 새 텍스트 위젯을 만듭니다. 16픽셀의 글꼴 크기와 굵은 글꼴 두께입니다.

이미지 위젯:

이미지 위젯은 화면에 이미지를 표시하는 데 사용됩니다. PNG, JPEG 및 GIF와 같은 다양한 이미지 형식을 지원합니다. 이미지는 네트워크 또는 로컬 저장소에서 로드할 수 있습니다. 이미지 위젯은 커버, 포함 및 채우기와 같은 다양한 이미지 맞추기 옵션도 지원합니다. 이미지는 화면에 맞게 변형, 회전 및 잘릴 수도 있습니다.
플러터(Flutter)에서 이미지 위젯을 사용하려면 새 이미지 위젯을 만들고 이미지 소스를 지정하기만 하면 됩니다.

위 예제에서는 "Submit"이라는 텍스트와 버튼을 클릭할 때 호출되는 onPressed 콜백 함수가 있는 새 RaisedButton 위젯을 만듭니다.

기타 일반적으로 사용되는 위젯:

위의 세 가지 위젯 외에도 플러터(Flutter)는 더 복잡하고 대화형 사용자 인터페이스를 만드는 데 사용할 수 있는 다양한 UI 구성 요소를 제공합니다. 일반적으로 사용되는 위젯 중 일부는 다음과 같습니다.

ListView 위젯:

스크롤 가능한 항목 목록을 표시하는 데 사용됩니다. ListView 위젯은 텍스트, 이미지 및 버튼과 같은 다양한 유형의 항목을 표시하도록 사용자 정의할 수 있습니다. ListView 위젯은 세로 및 가로 스크롤과 같은 다양한 스크롤 모드도 지원합니다.

Form 위젯:

사용자가 데이터를 입력할 수 있는 입력 양식을 만드는 데 사용됩니다. Form 위젯은 텍스트, 암호 및 이메일과 같은 다양한 입력 유형을 지원합니다. Form 위젯은 유효성 검사도 지원하므로 개발자가 입력 데이터를 확인하고 입력이 잘못된 경우 오류 메시지를 표시할 수 있습니다.

사용자가 데이터를 입력할 수 있는 입력 양식을 만드는 데 사용됩니다. Form 위젯은 텍스트, 암호 및 이메일과 같은 다양한 입력 유형을 지원합니다. Form 위젯은 유효성 검사도 지원하므로 개발자가 입력 데이터를 확인하고 입력이 잘못된 경우 오류 메시지를 표시할 수 있습니다. Form 위젯은 텍스트 필드 및 버튼과 같은 관련 Form 요소 그룹을 관리하는 데 사용되며 유효성 검사 및 오류 처리와 같은 기능을 제공합니다. 개발자는 양식 위젯을 사용하여 로그인 Form 또는 연락처 Form과 같이 사용자가 데이터를 입력하고 제출할 수 있는 Form을 만들 수 있습니다. Flutter에서 Form 위젯을 사용하려면 개발자는 Form 요소를 Form 위젯으로 래핑하고 Form에 대한 고유 키를 제공해야 합니다. 그런 다음 텍스트 필드 및 버튼과 같은 Form 요소를 정의하고 유효성 검사 논리를 추가하여 사용자 입력이 유효한지 확인할 수 있습니다. Form 위젯은 데이터를 서버로 전송하거나 로컬에 저장하는 것과 같은 Form 제출을 처리하는 방법도 제공합니다. 개발자는 onSubmit() 메서드를 사용하여 사용자가 Form을 제출할 때 수행할 작업을 정의할 수 있습니다.

위 예제에서는 사용자가 이메일과 암호를 입력할 수 있는 두 개의 TextFormField 위젯이 있는 새 양식 위젯을 만듭니다. 클릭했을 때 양식 데이터를 제출하는 RaisedButton 위젯도 추가하고 있습니다.

컨테이너 위젯:

다양한 색상, 여백, 패딩 및 테두리로 사용자 정의할 수 있는 상자 모양의 요소를 만드는 데 사용됩니다. 컨테이너 위젯을 사용하여 다른 위젯을 함께 그룹화하고 공통 스타일을 적용할 수 있습니다.

위 예제에서는 흰색 배경, 둥근 모서리 및 그림자가 있는 새 컨테이너 위젯을 만듭니다. Text 위젯, Image 위젯 및 RaisedButton 위젯을 포함하여 일부 하위 위젯도 추가하고 있습니다.

결론:

플러터(Flutter)는 개발자가 멋진 대화형 사용자 인터페이스를 만드는 데 사용할 수 있는 위젯이라는 풍부한 사전 빌드된 UI 구성 요소 세트를 제공합니다. 이 가이드에서는 텍스트, 이미지, 버튼 등을 포함하여 가장 일반적으로 사용되는 플러터(Flutter) 위젯 중 일부를 다루었습니다. 이러한 위젯을 사용하고 모양, 동작 및 기능을 사용자 정의함으로써 개발자는 단일 코드 베이스를 사용하여 Android 및 iOS 플랫폼 모두를 위한 고품질의 기본 모바일 애플리케이션을 만들 수 있습니다.