플러터 앱을 구성하는 다양한 위젯들

서론

Flutter는 모바일, 웹 및 데스크톱 애플리케이션을 위한 사용자 지정 가능하고 응답성이 높은 사용자 인터페이스를 구축하는 데 사용할 수 있는 광범위한 위젯 모음을 제공합니다. 이러한 위젯은 기능 및 용도에 따라 여러 그룹으로 분류할 수 있습니다. 이번 강의에서는 각 범주에서 가장 일반적으로 사용되는 플러터 위젯에 대해 설명하겠습니다.

 

 

1. 텍스트 및 기본 위젯

플러터는 텍스트를 표시하고 직사각형 및 이미지와 같은 기본 UI 요소를 그릴 수 있는 여러 위젯을 제공합니다. 이 범주에서 일반적으로 사용되는 위젯은 다음과 같습니다:

• Text: 글꼴 크기, 글꼴 패밀리, 색상, 정렬 및 텍스트 장식과 같은 다양한 스타일 옵션으로 화면에 텍스트를 표시하는 데 사용됩니다.
• Container: 패딩, 여백, 배경색, 테두리 및 테두리 반지름과 같은 다양한 스타일 옵션을 사용하여 화면에 직사각형 상자를 그리는 데 사용됩니다.
• Row and Column: 간격, 정렬 및 유연한 크기 조정 옵션과 함께 각각 수평 및 수직 레이아웃을 만드는 데 사용됩니다.
• Image: 다양한 크기 조정 및 정렬 옵션을 사용하여 화면에 이미지를 표시하는 데 사용됩니다.
• Icon: 크기, 색상, 모양 등 다양한 스타일 옵션이 있는 아이콘을 표시하는 데 사용됩니다.

 

2. Input 위젯

플러터는 텍스트, 부울 및 선택 입력과 같은 사용자 입력을 허용하는 여러 위젯을 제공합니다. 이 범주에서 일반적으로 사용되는 위젯은 다음과 같습니다:

• TextField: 키보드 유형, 입력 형식, 유효성 검사 및 오류 처리 옵션과 함께 텍스트 형식의 사용자 입력을 수락하는 데 사용됩니다.
• Checkbox: 체크박 UI 요소가 있는 부울 입력을 수락하는 데 사용됩니다.
• Radio: 한 번에 하나의 옵션만 선택할 수 있는 라디오 버튼 그룹이 있는 부울 입력을 수락하는 데 사용됩니다.
• Switch: 토글 스위치 UI 요소가 있는 부울 입력을 수락하는 데 사용됩니다.
• DropdownButton: 한 번에 하나의 옵션을 선택할 수 있는 드롭다운 UI 요소로 사용자에게 옵션 목록을 표시하는 데 사용됩니다.

 

3. Button 위젯

Flutter는 다양한 스타일 및 애니메이션 옵션이 있는 대화형 버튼을 만들 수 있는 여러 위젯을 제공합니다. 이 범주에서 일반적으로 사용되는 위젯은 다음과 같습니다:

• RaisedButton: 색상, 테두리 반지름 및 표고와 같은 다양한 스타일 옵션과 모양이 올라간 버튼을 만드는 데 사용됩니다.
• FlatButton: 평평한 모양과 색상, 테두리 반지름 및 텍스트 스타일과 같은 다양한 스타일 옵션이 있는 버튼를 만드는 데 사용됩니다.
• FloatingActionButton: 색상, 입면도 및 아이콘과 같은 다양한 스타일과 애니메이션 옵션이 있는 원형 버튼를 만드는 데 사용됩니다.

 

4. Navigation 위젯

Flutter는 앱에서 다른 화면과 구성 요소 간의 탐색을 구현하기 위한 여러 위젯을 제공합니다. 이 범주에서 일반적으로 사용되는 위젯은 다음과 같습니다:

• AppBar: 색상, 제목, 동작 등 다양한 스타일링 옵션이 있는 상단 앱바를 만드는 데 사용됩니다.
• BottomNavigationBar: 여러 화면이나 탭 사이를 이동하는 옵션이 있는 하단 탐색 모음을 만드는 데 사용됩니다.
• TapBar: 여러 탭 간 전환 옵션이 있는 탭 탐색 모음을 만드는 데 사용됩니다.
• Drawer: 메뉴를 표시하고 다른 화면으로 이동하는 옵션이 있는 측면 탐색 드로어를 만드는 데 사용됩니다.

5. List and Grid 위젯

플러터는 다양한 스크롤 및 로드 옵션이 있는 항목의 목록과 그리드를 표시하는 여러 위젯을 제공합니다. 이 범주에서 일반적으로 사용되는 위젯은 다음과 같습니다:

• ListView: 다양한 로드 및 캐싱 옵션을 사용하여 수직으로 스크롤할 수 있는 항목 목록을 표시하는 데 사용됩니다.
• GridView: 다양한 크기 및 간격 옵션이 있는 항목의 그리드를 표시하는 데 사용됩니다.
• SingleChildScrollView: 다양한 스크롤 및 패딩 옵션이 있는 단일 하위 위젯을 스크롤하는 데 사용됩니다.
• CustomScrollView: 독립적으로 스크롤할 수 있는 여러 조각을 사용하여 사용자 지정 스크롤 동작을 만드는 데 사용됩니다.

 

6. Material and Cupertino 위젯

Flutter는 재료 설계 및 쿠퍼티노 설계 지침에 따라 각각 두 세트의 위젯을 제공합니다. 이러한 위젯은 다양한 플랫폼에서 일관된 모양과 느낌을 제공하며 모바일에서 일반적으로 사용됩니다.