본문 바로가기

개발/Flutter

뷰(View) 위젯

반응형

플러터에서 뷰(View) 위젯은 사용자 인터페이스의 구성 요소를 나타냅니다.
다른 위젯과 함께 사용되어 화면에 표시되며, 사용자 입력을 받거나 정보를 표시합니다.

 

이러한 뷰 위젯은 앱의 다양한 부분에서 사용되며,
여러 개의 위젯이 함께 사용되어 다양한 레이아웃을 만들 수 있습니다.

 

뷰 위젯 중에서 가장 기본적인 것은 Container입니다.
Container는 플러터에서 가장 일반적으로 사용되는 위젯 중 하나이며,
다른 위젯을 포함할 수 있으며, 색상, 패딩 및 여백을 설정할 수 있습니다.

 

이외에도 Text 위젯은 텍스트를 표시하는 데 사용됩니다.

 

Image 위젯은 이미지를 표시합니다.

 

Icon 위젯은 아이콘을 표시합니다.

 

Card 위젯은 정보를 담은 카드를 만들 때 사용됩니다.

 

아래는 각 뷰 위젯의 간단한 설명과 샘플 코드입니다.

 

 

Container: 다른 위젯을 포함할 수 있으며,
색상, 패딩, 여백 등을 설정할 수 있는 가장 기본적인 뷰 위젯입니다.

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(16.0),
  child: Text('Hello, World!', style: TextStyle(color: Colors.white)),
)

 

 

 

Text: 텍스트를 표시하는 데 사용되며, 폰트, 크기, 스타일 등을 설정할 수 있습니다.

Text('Hello, World!', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold))

 

 

 

mage: 이미지를 표시하는 데 사용되며, 로컬 파일 또는 URL에서 이미지를 가져올 수 있습니다.

Image.network('https://example.com/image.jpg')

 

 

 

Icon: 미리 정의된 아이콘을 표시하는 데 사용됩니다. Icons 클래스는 많은 미리 정의된 아이콘을 제공합니다.

Icon(Icons.star)

 

 

 

Card: 정보를 담은 카드를 만들 때 사용됩니다.
Card 위젯은 Container와 같은 속성을 가지며, 보통 Column 또는 Row와 함께 사용됩니다.

Card(
  child: Column(
    children: [
      Image.network('https://example.com/image.jpg'),
      Text('Title'),
      Text('Description'),
    ],
  ),
)
반응형

'개발 > Flutter' 카테고리의 다른 글

스크롤(Scroll) 위젯  (0) 2023.04.11
커스텀 위젯(Custom Widget)  (0) 2023.04.06
머티리얼(material) 디자인 위젯  (0) 2023.04.06
상태관리(State Management) 개념  (0) 2023.04.04
애니메이션(Animation) 개념  (0) 2023.04.04