Material()

샤워실의 바보·2024년 3월 13일
0
post-thumbnail
post-custom-banner

플러터(Flutter)에서 Material 위젯은 구글의 머티리얼 디자인(Material Design) 가이드라인을 따르는 UI를 구성하는 데 사용됩니다. 머티리얼 디자인은 시각적으로 풍부하고 직관적인 인터페이스를 제공하기 위한 디자인 언어로, 다양한 위젯, 애니메이션, 스타일링 옵션을 포함하고 있습니다. Material 위젯은 머티리얼 디자인의 시각적, 기능적 기반을 제공합니다.

주요 특징

  • 물리적 속성 시뮬레이션: Material 위젯은 종이와 같은 물리적 특성을 시뮬레이션합니다. 예를 들어, 그림자, 모양(둥근 모서리 등), 그리고 빛 반사 같은 효과를 나타낼 수 있습니다.
  • 빛과 그림자: 머티리얼 디자인은 빛의 방향과 소스에 따라 그림자를 생성하여 깊이감을 제공합니다. Material 위젯은 elevation 속성을 통해 이러한 그림자의 깊이를 조절할 수 있습니다.
  • 잉크 반응: 머티리얼 디자인의 잉크 효과는 사용자 입력(예: 탭)에 반응하여 시각적 피드백을 제공합니다. Material 위젯을 사용하면 InkWell과 같은 다른 위젯과 함께 사용하여 이러한 효과를 구현할 수 있습니다.
  • 모양 변형: Material 위젯은 shape 속성을 통해 모양을 커스터마이징할 수 있습니다. 이를 통해 둥근 모서리 또는 다양한 모양의 카드를 만들 수 있습니다.
  • 색상과 테마: Material 위젯은 머티리얼 디자인의 색상 시스템을 활용하여 앱의 전반적인 테마와 일관성을 유지할 수 있도록 합니다. color 속성을 통해 위젯의 배경색을 설정할 수 있습니다.

기본 사용법

Material 위젯은 다음과 같이 사용할 수 있습니다:

Material(
  color: Colors.blue,
  elevation: 5.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Container(
    width: 100,
    height: 100,
    alignment: Alignment.center,
    child: Text('Hello, Material!'),
  ),
)

위 예제에서 Material 위젯은 파란색 배경, 5.0의 그림자 깊이(elevation), 10.0의 둥근 모서리를 가진 사각형 모양을 가집니다. 그 안에 'Hello, Material!' 텍스트를 표시하는 Container를 포함하고 있습니다.

주의할 점

  • Material 위젯은 Scaffold 위젯과 같이 사용할 때 최고의 호환성을 보입니다. Scaffold는 머티리얼 디자인 앱의 레이아웃을 위한 뼈대를 제공합니다.

  • Material 위젯 안에 또 다른 Material 위젯을 중첩할 때는 각각의 위젯이 독립적인 물리적 특성을 가지므로 주의해야 합니다. 예를 들어, 중첩된 Material 위젯은 부모

    위젯의 그림자나 모양 설정을 상속받지 않습니다.

플러터에서 Material 위젯을 사용하면, 사용자가 머티리얼 디자인의 다양한 기능을 손쉽게 적용하여 시각적으로 매력적이고 일관성 있는 앱 인터페이스를 구축할 수 있습니다.

profile
공부하는 개발자
post-custom-banner

0개의 댓글