[Flutter] 플러터 시작! 기초 사용법 - 자주 쓰는 위젯 정리

플러터 시작! 기초 사용법(자주 쓰는 위젯 정리)

Flutter는 Google에서 개발한 오픈소스 UI 프레임워크입니다. android, ios, 웹, desktop 등 다양한 플랫폼에서 사용할 수 있는 애플리케이션을 한 번에 개발할 수 있다는 장점이 있습니다. 이전에 언급했듯, Dart라는 프로그래밍 언어가 사용됩니다. Flutter가 UI 프레임워크라고 설명드렸는데요, 이 UI는 위젯(Widget)으로 구성됩니다. 이번 글에서는 위젯에 대해 소개하겠습니다.

 

Widget (위젯)

플러터는 정말 다양한 위젯을 제공합니다. 자주 쓰는 요소를 우리가 일일히 구현할 필요없이 Widget을 가져다가 사용하기만 하면 됩니다. 플러터의 장점이죠! 글자를 넣고싶으면 Text 위젯을, 버튼을 넣고 싶으면 Button 위젯을, 상자를 넣고 싶으면 Container 위젯을 넣는 식으로요. 정말 다양한 위젯을 제공하기 때문에, 전부 소개하기에는 힘들고, 자주 쓰는 것만 소개해보겠습니다.

 

Text

Text 위젯을 사용하면 텍스트를 표시할 수 있습니다. 여러가지 속성을 지정해서 내 맘대로 Text 모양을 바꿀 수 있습니다. textAlign 속성을 사용해 텍스트 정렬을 바꾼다던가, style 속성을 사용해 text를 꾸민다거나 하는 등 많은 일을 할 수 있습니다. 후에 Text 위젯을 갖고 노는 시간을 가져보겠습니다.

 

▼코드

Text('텍스트 위젯입니다!')

 

▼실행 결과

 

Container

Container 위젯을 사용하면 박스를 만들 수 있습니다. 이 박스는 다양한 속성을 지정할 수 있습니다. width, height를 사용해 너비와 높이를 지정할 수 도 있고, color를 사용해 색을 채울 수도 있습니다.

▼코드

Container(
 width: 200,
 height: 100,
 color: Colors.black,
)

 

▼실행 결과

 

Row, Column

개인적으로 가장 많이 사용하는 위젯인 것 같습니다. Row 위젯은 요소를 가로로 배치할 때 사용하고, Column 위젯은 세로로 배치할 때 사용합니다. 여러개의 요소를 주르륵 배치하고 싶을 때 많이 사용하곤 합니다. 마찬가지로 속성을 지정해서, 정렬 위치 같은 것을 지정할 수 있습니다.

▼코드

const Column(
 children: <Widget>[
    Text('플러터', style: TextStyle(fontSize: 32),),
    Text('재미있는 플러터',
      style: TextStyle(color: Colors.black54),),
    SizedBox(child: FlutterLogo(size: 100,))
 ],
)

 

▼실행결과

 

Stack

Stack 위젯은 겹치고 싶을 때 사용합니다. 디자인 툴이나 사진 툴 같은 거 다뤄보신 분들은 익숙하실 텐데, 레이어를 쌓는다고 생각하면 쉽습니다.

▼코드

Stack(
 children: <Widget>[
  Container(
    width: 100,
   height: 100,
   color: Colors.red,
  ),
  Container(
   width: 90,
   height: 90,
   color: Colors.green,
  ),
  Container(
    width: 80,
   height: 80,
   color: Colors.blue,
  ),
 ],
)

 

▼실행 결과

 

Image

Image 위젯을 사용하면 이미지를 표시할 수 있습니다. 이미지는 프로젝트 폴더 내에서 읽어올 수도 있고, 온라인 상에서 가져올 수도 있습니다. 후에 Image 위젯 사용법에 대해서도 이야기해보겠습니다.

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

 

Button

Button 위젯을 사용하면 버튼을 표시할 수 있습니다. Flutter는 다양한 형태의 Button을 제공합니다. Flutter 공식문서랑 Material design flutter 관련 페이지에 예쁘게 나와있습니다. 저는 주로 ElevatedButton 이랑 FilledButton 많이 쓰네요.

ElevatedButton(
 onPressed: () {
  num += 1 //버튼을 누르면 num 1 증가
 },
 child: Text('Click me'),
)

 

 

이 외에도 사용자에게 입력을 받고 싶다면 Form 위젯과 TextField 위젯도 사용할 수 있고, 스크롤이 있는 목록을 구현하고 싶다면 ListView 위젯을 사용하고, 애니메이션 효과를 넣고 싶다면 Tween, AnimationController, AnimatedBuilder 등을 사용할 수 있습니다. 굉장히 다양한 위젯을 제공하고 있어, 편리하게 ui를 구성할 수 있습니다. 어떤 위젯을 조합해서 화면을 구성할지, Flutter 공식 문서를 참고하며 개발하는 것을 추천드립니다.

 

▶ Flutter 공식문서 바로가기 - ui

Blogger