Flutter Widget 종류 (정리 전)

---

https://www.youtube.com/watch?v=kj_tldMmu4w&list=PL82uaKJraAILRBFE1XhCyfvu-Fclc6vv1

<Flutter Mapp 채널의 Every Flutter Widget Explained! 참고하기>

 

 

AbsorbPointer : 클릭을 흡수하는(방지하는) 위젯

 

showDialog : Dialog(네모박스) 띄우기

    AlertDialog : actions, title, contentPadding, content로 이루어진 Dialog 테마

 

Align :

[ alignment, child ]

Container 내부에 child를 정렬하고 싶을 때 Container-align-child로 감싸는 식으로 사용되는 위젯

 

---

AnimatedAlign :

[ alignment, duration, curve, child ]

alignment에 boolean으로 정렬 상태를 지정해주고 gesturedetector 같은 걸로 on tap시 boolean이 변화하여 작동되도록 할 수 있음.

 

AnimatedBuilder :

[ animation, child, builder ]

build이전에 AnimationController를 선언하고 animation에 controller를 연결해주고 child는 animation 대상, builder는 표현하고픈 animation동작(예: transform.rotate)에 대해 다룸

 

AnimatedContainer : (AnimatedAlign처럼 똑같은 사용법)

[ width, height, color, alignment, duration, curve, child ]

boolean과 같은 parameter에 따라 container 변화를 가져온다. <- 잘만 만들면 역동적인 container나 버튼이 될 수 있다는 것.

 

AnimatedCrossFade :

[ firstChild, secondChild, crossFadeState, duration ]

crossFadeStated에서 boolean parameter ? CrossFadeState.showFirst : CrossFadeState.showSecond와 같은 식으로 가능

 

AnimatedDefaultTextStyle :

[ duration, style, child ], trigger로 TextButton을 가짐?

 

AnimatedIcon : (AnimatedBuilder처럼 똑같은 사용법)

[ icon, progress, size ]

icon은 AnimatedIcons 아이콘을, progress는 animationcontroller를 사용한다.

gesturedetector의 child로 사용하는 식이다.

 

AnimatedList :

[ key, sizeFactor, child(Card) ]

key를 활용하여 꽤 복잡한 구현이다. 예시에서는 추가 버튼을 눌렀을 시에 card가 새롭게 추가되고, 제거 버튼을 눌렀을 시에 제거되는데 이 현상이 animated로 이루어지는 것.

* 나중에 필요할 거 같을 때 다시 보자.

 

AnimatedModalBarrier :

[ color(animation<color?>), dismissible ]

build 전 class 선언 때 with SingleTickerProviderStateMixin 이 필요함.

AbsorbPointer처럼 Animate실행을 방지하는 배리어를 표시해줌.

 

AnimatedOpacity :

[ opacity, duration, child ]

opacity : opacityLevel (double 변수) 로 선언하고

버튼을 만들어서 setState로 opacityLevel의 값을 정해주는 것으로 애니메이션 발동

 

AnimatedPadding :

[ padding, duration, curve, child ]

 

AnimatedPhysicalModel :

[ duration, curve, elevation, shape, shadowColor, color, child ]

elevation이 변화하여 shadow가 나타나게 하는 위젯

 

AnimatedPositioned :

[ width, height, top, duration, curve, child ]

예시에서는 Stack안에 animatedpositioned를 만들고, gesturedetector를 child로 가짐으로써 터치 시 포지션이 변한다!

 

AnimatedRotation :

[ turns, duration, child ]

1/4 값이면 반의반바퀴를 시계방향으로 돈다.

 

AnimatedSize :

[ curve, duration, child ]

사이즈 달라짐요

 

AnimatedSwitcher :

[ duration, child, transitionBuilder ]

child 안에 Text 같은 위젯을 만들고 그 text 안에 key: Value(_count) 같은 식으로 넣음으로

_count가 변할 때 Text 값이 스무스하게 변한다.

transitionBuilder로 다양한 애니메이션을 연출할 수 있는데 return ScaleTransition 같은 경우

값이 바뀔 때 작아졌다 커지면서 역동적으로 보일 수 있게 한다.

* 핵심은 key: ValueKey(?) 이다. 이것을 통해 AnimatedSwitcher는 child 위젯을 추적하며,

   버튼 클릭 시 child 위젯을 다른 위젯으로 선언(key는 다르게)하여 바꿀 수도 있는 것이다.

   (child : 커스텀위젯으로 선언하고 버튼 클릭시 커스텀위젯 = ??? 이런 식으로 하는 것.)

---

AppBar :

[ title, centerTitle, actions, backgroundColor, leading, shape ]

Scaffold 위젯에 주로 사용되며

title은 이름, centerTitle은 가운데에 title을 표기할 것인지에 대한 boolean,

actions은 맨끝의 icon, iconbutton을 / leading은 맨앞의 icon, iconbutton을 말한다.

shape는 RoundedRectangleBorder처럼 단순 박스가 아니라 코너가 둥근 박스로 만들어줄 수 있다.

 

AspectRatio :

[ aspectRatio, child ]

container안에 child로 들어갈 수 있으며, 지정된 비율에 따른 child(주로 container)를 생성한다.

 

Autocomplete :

[ optionsBuilder, onSelected ]

build 에서 return Autocomplete<String> 식으로 선언?

검색 창에서 철자를 입력하면 그 철자가 들어간 단어를 띄워주는 그런 위젯 * 사용시 영상 참고해보자.

 

BackdropFilter :

[ import dart 필요 / filter, child ]

Stack에서 이미지 위에 backdropfilter를 씌우는 것.

filter : ImageFilter.blur() 와 같이 일정 부분을 child: container로 필터 효과를 줄 수 있다.

 

Banner : 

[ message, location, color, child ]

그냥.. child(주로 Container)의 정해진 location에 실끈으로 message를 표시하는, 그런 장식 위젯

 

Baseline :

[ baseline, baselineType, child ]

child 위젯이 등장하는 baseline을 잡아주는 것인데,

상위 child (baseline을 child로 쓰는 위젯)의 상단 경계가 baseline이 된다.

이때 말그대로 baseline이므로 Baseline의 child 위젯은 상단경계의 <바로 위>에 띄워진다.

baseline 값을 크게 할수록 baseline이 <상위 child 상단 경계>로부터 내려오는 형식

 

BlockSemantics :

[ blocking, child ]

main의 MaterialApp에서 showSemanticsDebugger : true라고 했을 때

위젯들의 semantic(색상 경계)를 보여줄 수 있다.

이때 모든 위젯의 색상 경계를 보게 되는데

예를 들어서 어떤 버튼을 눌렀을 때 숨겨진 위젯이 보이고 다른 위젯은 새로 숨겨질 수 있다.

그때 semantic 상에서는 이 위젯들이 전부 보이기 때문에,

blocking: boolean으로 연결하여 특정 상태에서 드러나는 위젯만 보고 싶을 때 blocksemantics로 감싸는 것이다.

 

BottomNavigationBar :

[ currentIndex, onTap, items ]

Scaffold의 bottomNavigationBar에 쓰이는 위젯.

앱들에게서 종종 볼 수 있는 맨밑에서의 앱바가 바로 이 위젯이다.

잘 쓰면 navigate 화면 이동을 할 수 있다. 화면의 쾌적함이나 가시성을 확보하기 위해 안 쓰기도 한다.

 

BottomSheet :

showModalBottomSheet으로 사용됨. [context, builder]

밑에서 올라오는 알림이나 그럴 때 사용되는 위젯.

밑에서 뭔가가 올라오는 그런 것이 bottomsheet이다.

 

Builder :

[ builder ]

custom widget을 만들고 싶을 때 context가 필요할 때가 있다. 그때 context가 존재하지 않을 것인데 (아무 정보가 없으니?)

그럴 때 Builder로 감싸서 builder를 통해 context를 받아서 원하는 custom widget을 그려내는 것?

 

Card :

[ elevation, color, child ]

container랑 뭐가 다르죠?

- elevation과 둥근모서리를 가집니다.

 

Center :

[ heightFactor, child ]

상위 child 가운데에 child를 그려냅니다

* heightFactor는 상위 child 중에 height가 지정되지 않을 때 (예: Column) 사용할 수 있다.

   heightFactor는 하위 child Text같은 것의 height의 몇배수로 상위 child의 height를 정할 것인지에 대한 상수이다.

 

Checkbox :

[ value(boolean), activeColor, onChanged, tristate ]

tristate는 not, null, check 상태이다.

 

CheckboxListTile :

[ title, value, onChanged, activeColor, checkColor, tileColor, subtitle, controlAffinity, tristate ]

위에 체크박스는 그냥 체크박스 혼자 있는 것이고,

이 체크박스는 리스트처럼 설명문과 함께 오른쪽 끝에 체크박스가 들어있다.

controlAffinity로 체크박스를 앞에 둘지 정할 수도 있다.

 

Chip :

[ label, onDeleted ]

해시태그나 검색할 때 둥근칩들을 볼 수 있을텐데 그것임

 

ChoiceChip :

[ label, selected(boolean), selectedColor, onSelected ]

선택되면 색깔바뀌는 chipㅋㅋ

 

CircleAvatar :

[ backgroundColor, radius, backgroundImage, child ]

원 위젯

 

CircularProgressIndicator :

[ color, backgroundColor, value ]

원형 돌아가는 로딩 표시 위젯, value에 따라 원형 띠의 색상 차지 비중이 달라짐

 

ClipOval

[ clipper, child ]

원형으로 clip해주는 위젯. clipper를 custom으로 제작가능한데 이는 영상 참고

 

ClipPath

[ clipper, child ]

패스따라 clip해주는 것인데 이는 커스텀으로 생성해야한다. 영상 참고.

잘하면 곡선으로 패스(경계)를 만들어서 보이는 화면을 분할하는 것이 가능하다는 점이 특징!

 

ClipRect

[ clipper, child ]

 

ClipRRect

[ borderRadius, child ]

둥근 모서리로 clip해주는.

 

CloseButton

[ color, onPressed ]

x표시의 버튼ㅋㅋ

 

ColoredBox

[ color, child ]

색깔박스ㅋㅋ

 

ColorFiltered

[ colorFilter, child ]

이미지 필터 같은?

 

ConstrainedBox

[ constraints, child ]

boxconstraints 같은 것을 받아서 width, height 같은 제약을 주는 것

- 하지만 width: double.infinity는 이런 제약을 뚫는다는 점

 

Container

[ padding, color, alignment, child ]

[ constraints, transform ]

constraints에서의 height나 width는 padding값을 포함한다는 점? 사실 이거 있으면 constrainedBox는 왜 있는거요

tranform은 기울기나 이런 것도 가능

 

Column

[ crossAxisAlignment,  mainAxisAlignment, mainAxisSize, children ]

crossAxisAlignment는 행 수준에서 왼쪽 오른쪽 끝에 정렬하는 건지

mainAxisAlignment는 위로 정렬인지 아래로 정렬인지

mainAxisSize는 min이면 여백없이 촘촘하게 한다는 뜻

 

CustomPaint

[ child, painter ]

painter : DemoPainter()으로 커스텀painter를 선언해야한다. 영상 참고.

 

CustomScrollView

[ slivers ]

slivers : <Widget> [SliverGrid]

SliverGrid

[ delegate : SliverChildBuilderDelegate, gridDelegate : SliverGridDelegateWithMaxCrossAxisExtent ] - 영상참고

 

DataTable

[ columns <DataColumn>, rows <DataRow>/<DataCell> ]

 

DataColumn

[ label ]

 

DataCell

[ Text() ]

DataRow안에 필요한 것임

 

DataRow

[ cells ]

cells 리스트 안에 datacell이 필요함.

 

TimePicker

DatePicker

DateRangePicker -> 영상참고

 

DecoratedBox

[ decoration : BoxDecoration ]

boxdecoration에서 gradient, color, decorationimage, boxborder, borderradiusgeometry, boxShadow, blendmode 등이 있다.

- coloredBox는 왜 있는거요?

 

DecoratedBoxTransition

DecorationTween으로 작동하는 건데...

 

DefaultTextStyle

[ style, child ]

 

Dismissible

[ background, key, onDismissed, child ]

리스트 안의 item을 밀어서 제거하기를 구현하고 싶다면. item을 dismissible로!

 

Divider

[ color, height, thickness, indent, endIndent ]

나눔선.

 

DraggableScrollableSheet

[ builder ]

스크롤할 수 있으며 끝부분에서 당겨질 수도 있는.

 

Draggable

[ data, child, onDraggableCanceled, feedback ]

드래그.

&

DragTarget

[ onAccept, builder ] -> 영상 참고

 

Drawer

[ child: ListView ]

Scaffold의 drawer에서 사용. end drawer는 오른쪽 서랍임.

Default는 왼쪽 서랍임.

만약에 다른 곳의 버튼으로 Drawer를 열려면 onPressed 시 scaffold.of(context).openDrawer();

 

DrawerHeader

[ decoration, child ]

drawer 안에 맨처음으로 올 수 있는 꾸밀 수 있는 장소

 

DropdownButton<String>

[ value, icon, style, underline, onChanged, items ] -> 영상참고

 

ElevatedButton

[ onPressed, child ]

onPressed: null이면 disabled임.

ElevatedButton.icon하면 label과 icon을 가질 수 있다.

 

FlutterErrorDetails

[ exception, library, context ]

FlutterError.reportError(FlutterErrorDetails)로 쓰인다. --> 영상참고

 

ErrorWidget

보통 에러 뜨면 레드스크린이 나는데 이거를 꾸밀 수 있다. -> 영상참고

 

Expanded

[ flex, child ]

전체 영역을 expanded flex따라 나눈다. height가 정해져있더라도.

 

ExpandIcon

[ isExpanded, color, expandedColor, onPressed ]

약간 dropdownbutton하고 비슷한데 추가적인 설명문을 hide&show하고 싶을 때 > 더보기 같은 것

 

ExpansionPanelList

List지만 expansion이 들어가있는 느낌이라고 생각하면 된다. -> 영상참고

 

ExpansionTile

[ title, trailing, children, onExpansionChanged, controlAffinity ]

ExpandIcon이랑 비슷하다. 오히려 이게 더 나을 수도 있다.

 

FadeInImage.assetNetwork()

[ placeholder, image ]

기본 placeholder 이미지에 네트워크 연결되면 image로 스무스하게 바꿔주는?

 

FadeTransition -> 영상참고

솔직히 animatedOpacity랑 비슷하다. 왜 존재하는 것일까?

animatedOpacity는 상위 추상 클래스로 implicitlyAnimatedWidget을 두고 있기에

내부적으로 알아서 animationcontroller를 만든다고 한다.

고로 FadeTransition은 animationcontroller를 선언해야한다는 것 & lifecycle에서 dispose도 써야한다는 것.

 

FilterChip

[ label, selected, onSelected, avatar ]

체크되면 체크 표시가 뜨는 chip

 

FittedBox

[ child ]

Text를 이걸로 감싸면 container 내에서 딱 들어맞는 text가 된다. 유연하게.

 

Flexible

[ flex, child, fit ]

flex를 갖지만 child의 height를 따라가는 특징이 있다.

child height를 지우면 expanded와 똑같다.

child height가 있어도 fit: FlexFit.tight하면 expanded와 독같다.

expanded가 화면을 꽉채우는 영역분할이라면 flexible은 여기에 다른 선택지를 줄 수 있다는 것..?

 

FloatingActionButton

[ onPressed, backgroundColor, child ]

Scaffold의 floatingActionButton에 사용된다.

Scaffold의 floatingActionButtonLocation: 으로 위치 변경 가능

 

Flow

Animationcontroller로 작동하는 메뉴서랍?? 누르면 쭈르르륵 나온다. -> 영상 참고

 

FlutterLogo

[ size, style, textColor ]

귀여운 플러터로고

 

Form

[ key, child ]

global key <FormState> 를 갖는데 이것을 추적한다고 한다.

child 중에서 textformfield 같은 아이들의 입력값(validator)을 추적하는 듯하다.

 

FractionalTranslation

[ translation, child ]

Column을 쓰더라도 좌표처럼 위치를 변경시킬 수 있다?

translation : const offset(1,-1)은 오른쪽 한칸, 위로 한칸이라는 뜻으로 바로 위 아이의 오른쪽에 붙는다!

 

FractionallySizedBox

[ widthFactor, heightFactor, child ]

전체 화면 기준에서 비율을 사용하면서 사이즈를 정할 수 있는.

 

FutureBuilder

[ future, builder ] -> 데이터 로딩과 같은 future가 필요할 때 사용하는 위젯 -> 영상 참고

 

GestureDetector

[ onTap, child ]

 

GridPaper

[ color, divisions, interval, subdivisions ]

SizedBox(height: double.infinity, width: double.infinity)의 child로 사용하면 된다고 한다.

그리드를 그려주는데 개발 시에 위젯의 크기를 참고하기 위한 그런 용도

 

GridTile

[ header, child, footer ]

 

GridTileBar

[ backgroundColor, leading, title, trailing ]

GridTile의 header와 footer에 사용되는. 다른데서 사용하고픈 앱바라고 생각해도 된다.

이것만 보면 그냥 container를 분할해서 사용하는 게 더 custom 가능한가 싶을 것이다. 편의성에서 편한 것.

 

GridView.builder

[ gridDelegate, itemBuilder, itemCount ]

[ gridDelegate, children ]

 

Hero

[ tag, child ]

같은 tag로 쓰이는 Hero 간 animatedTransition을 작동하게 한다.

 

Icon

[ Icons, olor, size, shadows ]

 

IconButton

[ icon, iconSize, onPressed 등등등 ]

 

IgnorePointer

[ ignoring, child ]

ignoring에 연결된 boolean에 따라 감싸고 있는 child의 터치 가능 불가능이 정해진다.

 

Image

[ image, color, colorBlendMode ]

 

IndexedStack

[ index, children ]

image를 children으로 갖는, index라는 파라미터 따라 이미지가 달라짐

 

Inkwell

[ onTap, onDoubleTap, onLongPress, child: (예: Ink, Container) ]

그냥 버튼하고 다를 것이 없는..?

특히 GestureDetector와 비교하자면 Inkwell은 자주 쓰이는 제스처들이 포함되어있는 것이고,

GestureDetector는 더 많은 제스처를 포함하는 큰 위젯이다. 또한 Inkwell은 눌렀을 때 리플 효과가 있다.

 

InputChip

[ avatar, label, onSelected, selected, selectedColor, deleteIcon ]

조금 더 꾸밀 수 있는 칩, 지워지는 칩

 

InteractiveViewer

[ boundaryMargin, child: Scaffold() ]

Scaffold의 body로 주로 사용된다.

줌할 수 있고 화면 내에서 이동 가능한 위젯이다.

다른 위젯도 사용가능하다고 한다.

 

LayoutBuilder

[ builder ]

build시 return으로 표현되는 widget?

조건에 따른 다른 Layout을 연출할 수 있다고 한다.

 

LimitedBox

[ maxHeight, maxWidth, child ]

Creates a box that limits its size only when it's unconstrained. 제약되지 않은 방향으로만 제약이 걸림?

 

LinearProgressIndicator

[ value ]

선 형식의 로딩 위젯

 

Listener

[ onPointerDown, onPointerMove, onPointerUp, child ]

 

ListTile

[ title, tileColor, onTap, leading, trailing ]

 

ListView

[ itemCount, itemBuilder ]

ListView.separted 시 separatorBuilder가 추가됨

 

ListWheelScrollView

[ itemExtent, children ]

위아래 다이얼식 listview

 

LongPressDraggable

[ feedback, child, onDragEnd ]

이동 가능한 위젯

- draggable하고 차이점? : draggable happens immediately라고 한다. longpressdraggable은 onDragEnd에 따라 달라지기 때문에?

 

MaterialApp

[ theme, darkTheme, themeMode, debugShowCheckedModeBanner, home ]

[ localizationsDelegates, supportedLocales ] <- 대충 환경이나 언어..?

 

MaterialBanner

[ padding, content, leading, elevation, backgroundColor, actions ]

ScaffoldMessenger.of(context).showMaterialBanner()에 쓰인다.

화면 위에서 알림이 뜬다.

ScaffoldMessenger.of(context).hideCurrentMaterialBanner(); 로 가려진다.

 

MaterialButton

[ onPressed, child, highlightColor, splashColor, color ]

highlight는 클릭시, splash는 꾹누르면 번지는, color는 기본 컬러

 

MergeSemantics

[ child ]

main의 MaterialApp에서 showSemanticsDebugger: true로 설정하고 시작.

MergeSemantics로 감싸면 내부의 child들의 semantic영역을 통합하여 표시한다.

영역이 대충 큼직큼직하게 어떻게 되어있는가 표시할 때 유용하다.

 

ModalBarrier

[ dismissible, onDismiss, color ]

터치 불가능 배리어. dismissible true 시 dismiss할 때 onDismiss가 호출된다?

false는 dismiss/remove할 수 없다 (절대로 안 지워진다)

 

SystemMouseCursors

MouseRegion이 상위 child이다.

보통 웹에서 사용되며 커서의 상태를 바꿔주는 것.

 

MouseReigion

[ onEnter, onHover, onExit, child ]

마우스를 감지하는 영역

 

NavigationBar

[ destinations: const[NavigationDestination(), Nav...]]

[ selectedIndex, onDestinationSelected ]

Scaffold의 bottomNavigationBar에 사용된다.

 

NotificationListener

예시) NotificationListener<ScrollNotification>(

onNotification: (scrollNotification) { if (scrollNotification is ScrollStartNotification) {} }

- ScrollStartNotification, ScrollUpdateNotification, ScrollEndNotification 등등으로 notification listen을 할 수 있다.

 

Offstage

[ offstage, child ]

숨기거나 나타나는 위젯

 

Opacity

[ opacity, child ]

투명도 조절 가능한 위젯

 

OrientationBuilder

[ builder ]

layoutbuilder와 비슷하지만, portrait이냐 landscape냐에 따른 build가 가능하다.

 

OutlinedButton

[ onPressed, child, style: OutlinedButton.styleForm() ]

그냥 버튼 같은데 바깥실선이 있는 버튼?

 

OverflowBar

[ spacing, children ]

spacing으로 간격이 띄워져있다. 만약 화면 영역을 벗어나는 children일 때

줄바꿈을 알아서 해준다. 하지만 전부 줄바꿈이 되는 것을 볼 수 있다. ~ Wrap

 

OverflowBox

[ maxWidth, maxHeight, child ]

constrainedbox처럼 제약이 있다. 무슨 차이일까? constrainedbox :  a widget that imposes additional constraints on its child. constrainedbox는 minHeight도 존재하듯이 추가적인 제약조건이 더 있는 것 같다.

 

Padding[ padding, child ]padding 종류는 EdgeInsets.zero, .symmetric, .fromLTRB 이 있다.

 

PageView

[ children ]

가로로 넘기는 페이지뷰

 

PhysicalModal

[ elevation, shadowColor, color, shape, child ]

물리적인 모달. 앞으로 튀어나온 듯하게 그림자 등이 존재한다.

 

PhysicalShape

[ elevation, clipper, color, child ]

shape clipping할 수 있는 physicalModal

 

Placeholder

[ fallbackHeight, fallbackWidth, color ]

height나 width는 정의되어야만 작동한다. column같이 가로가 정의되지 않으면 height만 작동되는 식.

 

PlatformMenuBar -> MacOS에만 해당되는. 영상 참고

 

PopupMenuButton

[ itemBuilder _ PopupMenuItem으로 가지는, onSelected ]

팝업메뉴. DropdownButton이랑 비슷하다.

 

Positioned

[ left, top, child ]

 

PositionedTransition -> 영상 참고

[ rect, child ]

AnimationController 필요.

 

PreferredSize

[ preferredSize, child ]

AppBar(상단바, 하단바)의 상위 상속 위젯으로 커스텀이 가능하다. 높이 조정

 

Radio

[ value, groupValue, onChanged ]

여러 아이템 중 하나 고르라고 할 때

 

RadioListTile

[ title, value, groupValue, onChanged ]

Radio랑 다를 것은 없지만, ListTile안에 Radio를 넣은 것을 합친 게 RadioListTile이다.

 

RangeSlider

[ value, divisions, labels, onChanged ]

value는 RangeValues를, labels는 RangeLabels 변수를 갖는다.

 

RawAutocomplete

[ optionsBuilder, fieldViewBuilder, optionsViewBuilder ]

which is what Autocomplete is built upon, and which contains more detailed examples. Autocomplete 기반.

fieldViewBuilder 매개변수로 작성된 필드에서 수신되며, optionsBuilder를 사용하여 입력이 결정되고 optionsViewBuilder로 표시된다.

 

RawChip

[ label, avatar, deleteIcon, onPressed, onDeleted ]

생칩

 

RefreshIndicator

[ onRefresh, child, color, backgroundColor ]

새로고침 인디케이터, child내에 listview를 둠으로써 새로고침할 때마다 데이터를 새로 불러들일 수 있다고?

 

ReorderableListView

[ children, onReorder ]

리스트 순서를 바꿀 수 있는 ListView

 

RichText

[ text ]

text에 들어있는 children: textspan들을 커스텀하여 문장을 꾸밀 수 있다.

 

RotatedBox

[ quaterTurns, child ]

돌아간 박스

 

RotationTransition

[ turns, child ]

돌아가고 돌아갑니다

 

Row

[ children ]

행

 

Scaffold

[ backgroundColor, appBar, body, drawer, endDrawer, floatingActionButtonLocation, floatingActionButton, bottomNavigationBar ]

앱 화면의 뼈대가 된다.

 

ScaleTransition

[ scale, child ]

커지고 작아지고 커지고 작아지고.

 

Scrollbar

[ controller, child ]

ScrollController가 필요하다.

 

SelectableText

[ style, onSelectionChanged ]

 

Semantics

[ child, label ]

MaterialApp의 showSemanticsDebugger: true해야한다.

semantics로 감싼 child는 주변에 선으로 semantic영역을 표시해준다.

 

ShaderMask

[ shaderCallback, child ]

shaderCallback: (Rect bounds){ return const RadialGradient() ).createShader(bounds);} 와 같이 shader를 작성한다.

child는 text를 쓰면 shader가 먹힌다.

RadialGradient 안에는 (center, radius, colors, tileMode)가 있고 tileMode: TileMode.mirror를 써야 반영이 된다고 말한다.

하지만 영상 참고하는 것이 마음이 편하다.

 

Shortcuts (단축키)

[ shortcuts, child ]

shortcuts: <ShortcutActivator, Intent>

child: Actions

- Intent는 action의 특정 구성으로 나타나지는 추상 클래스이다.

예제에서는 키보드 값에 따라 counter 값이 바뀌는 걸 보여주는데 이때

shortcuts 내부에 LogicalKeySet에 따라 다른 Intent클래스를 호출하는 Map 구성으로 되어있다. (영상 참고)

그에 따른 Actions도 CallbackAction(onInvoke: (intent)=>setState((){}), ) 를 통해 Intent클래스를 action한다.

* 영상 참고

 

SimpleDialog

[ title, contentPadding, children ]

showDialog( context:context, bulider:(context)=>SimpleDialog()) 로 실행됨

Dialog를 띄워준다. (가운데에 느닷없이 나타나는 알림 같은 것)

 

SingleChildScrollView

[ child ]

Any Widget 스크롤 가능하게.

 

SizeTransition

[ sizeFactor, axis, axisAlignment, child ]

Scale과 비슷하지만 방향이 있다.

 

SizedBox

[ width, height, child ]

아주 간단하 크기를 정하는 container라고 생각해도 된다.

 

SizedOverflowBox

[ size, child ]

약간 헷갈리는데 SizedOverflowBox를 감싼 Container의 크기가 정해지는 것 같다.

하지만 안쪽의 child는 영역을 넘어갈 수 있다.

ㅇㅁㅇ???

 

SlideTransition

[ position, child ]

 

Slider

[ value, max, divisions, label, onChanged ]

 

SliverAppBar

[ pinned, floating, expandedHeight, flexibleSpace ]

CustomScrollView 같은 것에서 쓰이는 slivers: 에 적용할 수 있다.

pinned는 스크롤을 할 때 appbar가 상단에 고정되어 나타나는가,

floating은 맨처음에 와야 보이는가 아니면 중간에 위로 스크롤하면 appbar가 나타나는가

flexibleSpace를 사용하면 내부를 사진 등으로 채울 수 있다.

 

SliverList

[ delegate: SliverChildBuilderDelegate() ]

 

SliverFixedExtentList

[ itemExtent, delegate: SliverChildBuilderDelegate() ]

"SliverFixedExtentList is more efficient than SliverList because SliverFixedExtentList does not need to perform layout on its children to obtain their extent in the main axis."

 

SliverGrid

[ gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(), delegate: SliverChildBuilderDelegate() ]

그리드형

 

SliverOpacity

[ opacity, sliver ]

slivers에 사용된다. 

 

SliverPadding

[ padding, sliver ]

 

SliverToBoxAdapter[ child ]child 크기를 최대한 맞춰주는 것으로 이해하고 있다.

 

SnackBar[ content, action ]ScaffoldMessenger.of(context).showSnackBar()로 작동한다.

 

Spacer[ flex ]빈공간을 연출한다. 다른 위젯들이 차지하는 영역 외에 남는 공간을 분할함.

 

Stack[ children ]먼저 쓰이는 child가 가장 밑에 깔리는 구조이다.

 

Stepper[ steps, onStepTapped, currentStep, onStepContinue, onStepCancel, type ]Step [ isActive, title, content ]단계별로 표시할 때

 

StreamBuilder[ stream, initialData, builder ]

 

Switch[ value, onChanged ]

 

SwitchListTile[ title, value, onChanged, secondary ]

 

TabBar[ tabs ]DefaultTabController - Scaffold - Appbar - bottom: 에 쓰임Appbar - body: TabBarView

 

TabPageSelector (어느 페이지인지 보여주는 점?)

[ controller, color ]

TabController 필요

Stack [ TabBarView, Positioned ] 구조에서 Positioned의 child에 TabPageSelector가 들어간다.

 

Table

[ border, defaultVerticalAlignment, children ]

 

Text

[ textAlign, overflow, style ]

 

TextButton

[ style: TextButton.styleForm(), onPressed, child ]

 

TextField

[ controller, onSubmitted ]

TextEditingController 필요

 

TextFormField

[ onSaved ]

 

TextSpan

[ style, text, children ]

 

ThemeData

[ brightness, scaffoldBackgroundColor, primaryColor 등등등등 ]

중요한 이유는 다른 곳에서 색상을 넣고 싶을 때 theme.of(context).primaryColor처럼 정해진 양식에서 불러올 수 있기 때ㅑ문이다.

 

ToggleButtons

[ children, onPressed, isSelected ]

토글 버튼들

 

Tooltip

[ message, child ]

길게 누르면 설명문이 나온다.

 

Transform

[ alignment, transform, child ]

변형 위젯

 

TweenAnimationBuilder

[ tween ]

 

ValueListenableBuilder

[ valueListenable, builder ]

ValueNotifier 필요

setState없이 변화하는 

 

VerticalDivider

[ width, thickness, indent, endIndent, color ]

세로선

 

Visibility

[ visible, child ]

Offstage와 유사한 기능을 가진다. Offstage보다 efficient하다고 한다?

Offstage 같은 경우 공간에 그려지지만 않을 뿐 나머지는 뒤에서 실행되고 있어서 animation이 들어있을 경우에 계속 실행되고 있다.

이런 state를 maintain할지 visibility에서 maintainState, maintainAnimation, maintainSize 등등 유무도 정할 수 있다.

성능을 위해 추천하는 방안은 condition ? child : SizedBox()로 연산 성능을 쉽게 만드는 것이라고 한다.

 

WillPopScope

[ child, onWillPop ]

화면 이동하고 뒤로가기 가능한 페이지인가 정해주는.

 

Wrap

[ spacing, runSpacing, children ]

spacing은 붙어있는 간격, runSpacing은 위아래 떨어지는 간격

넘치면 알아서 줄바꿈을 해준다.

 

SafeArea

[ child ]

SafeArea로 감싸면 status bar(화면 상단의 상태바들)를 침범하지 않는 영역을 보장해준다.

CupertinoApp

[ debugShowCheckedModeBanner, theme ]

MaterialApp 대신에 쓸 수 있음.

theme : CupertinoThemeData

home : 아래 참고

 

CupertinoPageScaffold

[ backgroundColor, navigationBar : CupertinoNavigationBar, child ]

 

CupertinoActionSheetAction (bottomsheet하고 비슷함)

- showCupertinoModalPopup의 builder에서 필요.

 

CupertinoActivityIndicator

[ radius, color ]

 

CupertinoButton

 

CupertinoAlertDIalog

[ title, content, actions ]

- showCupertinoDialog의 builder에서 필요

actions : <CupertinoDialogAction>[]

CupertinoDialogAction

[ child, isDestructiveAction, onPressed ]

 

CupertinoContextMenu

CupertinoDatePicker

CupertinoPageRoute

CupertinoPicker

CupertinoPopupSurface

CupertinoScrollbar

CupertinoSearchTextField

CupertinoSegmentedControl

CupertinoSlider

CupertinoSlidingSegmentedControl

CupertinoSwitch

CupertinoTabScaffold

CupertinoTabBar

CupertinoTextField