플러터 기본 위젯만 알면 UI를 그릴 수 있다! - 텍스트, 아이콘, 컨테이너, 이미지 위젯 활용법 완벽 가이드

플러터는 다양한 기능을 가진 강력한 UI 툴킷이지만, 초보자에게는 다소 복잡하게 느껴질 수 있습니다.

하지만 걱정하지 마세요!

플러터에는 텍스트, 아이콘, 컨테이너, 이미지와 같은 기본 위젯만으로도 다양한 UI를 구현할 수 있습니다.

이 블로그 글에서는 플러터 기본 위젯 4가지에 대해 자세히 살펴보고, 실제 코드 예시와 함께 간단한 UI를 만들어 보겠습니다.

 

1. 텍스트 위젯 (Text)

 

텍스트 위젯은 화면에 텍스트를 표시하는 데 사용됩니다. 다양한 속성을 사용하여 폰트 스타일, 크기, 색상, 정렬 등을 설정할 수 있습니다.

 

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

 

2. 아이콘 위젯 (Icon)

 

아이콘 위젯은 화면에 아이콘을 표시하는 데 사용됩니다. Flutter에서 제공하는 다양한 기본 아이콘을 사용하거나, SVG 파일을 사용하여 사용자 정의 아이콘을 만들 수 있습니다.

 

Icon(
  Icons.home,
  size: 32.0,
  color: Colors.red,
)

 

3. 컨테이너 위젯 (Container)

 

컨테이너 위젯은 다른 위젯들을 포함하고 감싸는 데 사용됩니다.

배경색, 여백, 패딩 등을 설정하여 위젯들의 레이아웃을 제어할 수 있습니다.

 

Container(
  color: Colors.yellow,
  padding: EdgeInsets.all(16.0),
  child: Text('플러터 배우기'),
)

 

4. 이미지 위젯 (Image)

 

이미지 위젯은 화면에 이미지를 표시하는 데 사용됩니다. 로컬 파일이나 네트워크 URL로부터 이미지를 로드할 수 있습니다.

 

Image.asset('assets/images/flutter_logo.png')

 

간단한 UI 만들기

 

위에서 소개한 기본 위젯들을 사용하여 간단한 UI를 만들어 보겠습니다.

 

Column(
  children: [
    Container(
      color: Colors.blue,
      padding: EdgeInsets.all(16.0),
      child: Text('플러터 UI'),
    ),
    Row(
      children: [
        Icon(Icons.home),
        Text('홈'),
        Icon(Icons.settings),
        Text('설정'),
      ],
    ),
  ],
)

 

위 코드는 다음과 같은 UI를 생성합니다.

마무리

 

플러터 기본 위젯 4가지에 대해 알아보았습니다.

이 외에도 다양한 위젯들이 존재하지만, 기본 위젯만으로도 충분히 다양한 UI를 구현할 수 있습니다.

플러터를 처음 사용하시는 분들께서는 먼저 기본 위젯부터 익숙해지고, 이후 더 복잡한 UI를 만들어 나가시길 바랍니다.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release