Flutter - Material class

A piece of material

 

Material 위젯은 다음과 같은 역할을 수행합니다.

1. Clipping: clipBehavior이 Clip.none으로 설정되어있지 않다면, Material은 shape, type, 그리고 borderRadius으로 구체화되어있는 shape으로 위젯 sub-tree를 clip합니다. 디폴트로 성능을 고려하여 clipBehavior는 Clip.none으로 설정됩니다. Clipping이 어떤 효과를 미치는지 예시로 확인하고 싶다면 Ink 위젯을 참고하세요.
2. Elevation: Material은 elevation pixels을 사용하여 자신의 위젯 sub-tree를 elevates 하고 적절한 그림자를 그립니다.
3. Ink 효과: Material은 InkSplash와 InkHighlight 처럼 InkFeatures로 구현된 ink 효과를 자식의 아래에 추가합니다.

The Material Metaphor

Material은 Material Design의 중심이 되는 메타포입니다. 각 material의 조각들은 주어진 elevation에 나타나고, 이는 해당 material 조각이 다른 material 조각과 시각적으로 어떻게 관련되는지, 그리고 그 material이 그림자를 드리우는지에 영향을 미칩니다.

 

대부분의 UI 요소들은 개념적으로 material 조각 위에 프린트 되거나 스스로가 material로 만들어집니다. Material은 InkSplash와  InkHighlight 효과를 사용하여 유저의 입력에 반응합니다. Material에 반응을 트리거하고 싶다면 Material.of로 접근이 가능한 MaterialInkController를 사용하세요.

 

일반적으로,  Material의 피쳐들은 시간이 지나도 바뀌면 안됩니다.(e.g. Material의 color, shadowColor or type은 바뀌면 안 됩니다.). elevation, shadowColor 그리고 surfaceTintColor의 변화는 animationDuration 동안 애니메이션으로 표시됩니다. Shape의 type이 MaterialType.transparency이 아닐 때 shape의 변화가 애니메이트되고, 이전과 다음 shape 값 사이의 ShapeBorder.lerp가 지원됩니다. Shape의 변화 또한 animationDuration 동안 애니메이션으로 표시됩니다.

 

Shape

Material의 shape은 shape, type, 그리고 borderRadius에 의해 결정됩니다.

• shape이 null이 아니라면, shape이 shape을 결정합니다.
• shape이 null이고 borderRadius이 null이 아니라면, shape은 borderRadius에 의해 모서리가  둥근 사각형이 됩니다.
• shape 그리고 borderRadius이 null이라면, type이 다음과 같이 shape을 결정합니다.
  • MaterialType.canvas: 디폴트 material shape은 직사각형이 됩니다.
  • MaterialType.card: 디폴트 material shape은 둥근 모서리를 가진 직사각형이 됩니다. 모서리 radii는 kMaterialEdges으로 결정됩니다.
  • MaterialType.circle: 디폴트 material shape은 원이 됩니다.
  • MaterialType.button: 디폴트 material shape은 모서리가 둥근 직사각형이 됩니다. 모서리 radii는 kMaterialEdges으로 결정됩니다.
  • MaterialType.transparency: 디폴트 material shape은 직사각형이 됩니다.

 

Border

Shape이 null이 아니라면, border도 페인트 될 것입니다 (있는 경우에).

 

Layout change notifications

Layout이 변화하면(e.g. material에 list가 있고, 해당 list가 스크롤 되는 것), LayoutChangedNotification가 연관된 서브트리에 디스패치 되어야만 합니다. 이는 특히 InkResponses, InkWells, Inks나 InkFeature 메커니즘을 사용하는 다른 위젯을 포함하는 서브 트리를 이동하기 위해 트렌지션(e.g. SlideTransition)을 material 위젯 내부에 배치해서는 안 된다는 것을 의미합니다. 그렇지 않으면 진행 중인 ink 피쳐들(e.g. ink splashes and ink highlights)이 새 레이아웃으로 이동하지 않습니다.

 

Painting over the material

Material 위젯들은 종종 자신의 가장 가까운 material 조상에게 반응을 트리거합니다. 예를 들면, ListTile.hoverColor은 포인터가 자신을 hovering하면 타일의 material에게 반응을 트리거합니다. 이런 반응들과 material 사이에 있는 위젯이 material을 가리는 방식으로 페인트될 경우 이런한 반응들은 가려집니다. (DecoratedBox에 BoxDecoration.color을 설정하는 것 같은 경우). 이런 행동을 피하고 싶다면, material이 스스로를 decorate 할 수 있게 InkDecoration을 사용하세요.

 

See also:

• MergeableMaterial, a piece of material that can split and re-merge.
• Card, a wrapper for a Material of type MaterialType.card.
• material.io/design/
• m3.material.io/styles/color/the-color-system/color-roles

 

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• Material

 

Constructors

Material({

Key? key, 

MaterialType type = MaterialType.canvas, 

double elevation = 0.0, 

Color? color, 

Color? shadowColor, 

Color? surfaceTintColor, 

TextStyle? textStyle, 

BorderRadiusGeometry? borderRadius, 

ShapeBorder? shape, 

bool borderOnForeground = true, 

Clip clipBehavior = Clip.none, 

Duration animationDuration = kThemeChangeDuration, 

Widget? child

})