모음/[코드팩토리의 플러터 프로그래밍]

[코드팩토리의 플러터 프로그래밍] 6장. 기본 위젯 알아보기 - 위젯 종류

ttoance 2024. 8. 19. 07:12

text 위젯

- 글자를 화면에 그릴때 사용 

Text class - widgets library - Dart API (flutter.dev)

 

Text class - widgets library - Dart API

A run of text with a single style. The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints. The style argument is optional. Whe

api.flutter.dev

 

 

제스처 관련 위젯 

- button 위젯 : testbutton, outlinedbutton, elevatedbutton

 

outlined button

 

OutlinedButton class - material library - Dart API

A Material Design "Outlined Button"; essentially a TextButton with an outlined border. Outlined buttons are medium-emphasis buttons. They contain actions that are important, but they aren’t the primary action in an app. An outlined button is a label chil

api.flutter.dev

 

elevaetd button

 

ElevatedButton class - material library - Dart API

A Material Design "elevated button". Use elevated buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using elevated buttons on already-elevated content such as dialogs or cards. An elevat

api.flutter.dev

 

- iconbutton 위젯 : 아이콘을 버튼으로 만듬

icon button

 

IconButton class - material library - Dart API

A Material Design icon button. An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink). Icon buttons are commonly used in the AppBar.actions field, but they can be used in many other places as well. If th

api.flutter.dev

 

- gesturedetector위젯 : 하위 위젯이 제스처에 반응하도록 해줌

gestureddetector

GestureDetector class - widgets library - Dart API (flutter.dev)

 

GestureDetector class - widgets library - Dart API

A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead. By defau

api.flutter.dev

 

- floatingactionbutton 위젯 : 화면의 오른쪽 아래, 사용자가 가장 많이 사용하는 위치에 버튼 띄우는 데 사용 

FloatingActionButton class - material library - Dart API (flutter.dev)

 

FloatingActionButton class - material library - Dart API

A Material Design floating action button. A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

api.flutter.dev

 

디자인 관련 위젯 

- container 위젯 : 배경, 패딩, 테두리 등 디자인 요소 추가하는데 사용 

Container class - widgets library - Dart API (flutter.dev)

 

Container class - widgets library - Dart API

A convenience widget that combines common painting, positioning, and sizing widgets. A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorp

api.flutter.dev

 

- sizedbox 위젯 : 너비와 높이 지정할 수 있는 위젯 (위젯 사이 간격 구현할 때 많이 사용)

SizedBox class - widgets library - Dart API (flutter.dev)

 

SizedBox class - widgets library - Dart API

A box with a specified size. If given a child, this widget forces it to have a specific width and/or height. These values will be ignored if this widget's parent does not permit them. For example, this happens if the parent is the screen (forces the child

api.flutter.dev

 

- padding 위젯 : 하위 위젯에 페딩 적용할 때 사용 

Padding class - widgets library - Dart API (flutter.dev)

 

Padding class - widgets library - Dart API

A widget that insets its child by the given padding. When passing layout constraints to its child, padding shrinks the constraints by the given padding, causing the child to layout at a smaller size. Padding then sizes itself to its child's size, inflated

api.flutter.dev

 

- safearea 위젯 : 시스템 ui에 가려지지 않게 위젯 화면에 그릴 때 사용 

SafeArea class - widgets library - Dart API (flutter.dev)

 

SafeArea class - widgets library - Dart API

A widget that insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen. It will also indent the child by the amount necessary to a

api.flutter.dev

 

 

배치 관련 위젯

- row 위젯 : 가로로 배치할 때 사용 

- column 위젯 : 세로로 위치할 때 사용 

- flexible 위젯 : row나 column에서 하위 위젯이 비율만큼 공간 차지할 수 있게 해줌.

 

 

Flexible class - widgets library - Dart API

A widget that controls how a child of a Row, Column, or Flex flexes. Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Co

api.flutter.dev

 

- expanded 위젯 : row나 column에서 하위 위젯이 최대한의 공간 차지할 수 있게 해줌.

Expanded class - widgets library - Dart API (flutter.dev)

 

Expanded class - widgets library - Dart API

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or ve

api.flutter.dev

 

- stack 위젯 : 하위 위젯들을 순서대로 겹쳐줌. 

stack

Stack class - widgets library - Dart API (flutter.dev)

 

Stack class - widgets library - Dart API

A widget that positions its children relative to the edges of its box. This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom. Ea

api.flutter.dev

 

반응형