플러터(Flutter) 앱을 구성하는 위젯(Widget) 개념 정리해보기. (ft.부의 추월차선 서막!)

블로그 목적

플러터(Flutter) 앱을 구성하는 위젯(Widget) 개념을 정리해본다.

블로그 요약

플러터에서 말하는 위젯의 개념을 알아본다.
플러터의 위젯에서 말하는 StatelessWidget과 StatefulWidget 을 알아본다.
플러터 위젯의 속성과 레이아웃을 간단하게 알아본다.

블로그 상세 내용

플러터 기술 블로그를 시작하기전 어떻게 하면 기술블로그가 지루해지지 않을 수 있을까? 고민하던중 ....
모든사람의 관심이자 목표(?) 가 될 수 있을지도 모르는 부의추월차선과 저만의 IT기술을 융합(?) 해보면 어떨까?
라는 고민을 바탕으로 이 블로그 글이 쓰여졌음을 먼저 상기해드리겠습니다.

그럼, 우선 엠제이드마코가 말한 부의추월차선 5가지에 대해서 말씀드리고자 합니다.
(참고로, 엠제이드마코의 부의추월차선이라는 책은 정말 제가 사랑하는 책입니다.)
첫번째, 임대및배당시스템
두번째, 컴퓨터소프트웨어시스템
세번째, 컨텐츠시스템
네번째, 유통시스템
다섯번째, 인적자원시스템

해당 시스템들의 내용이 궁금하시거나 모르신다면 엠제이 드마코의 부의추월차선을 꼭 읽어보시길 추천드립니다.

그런데 말입니다. 왜 뜬금없이 플러터 기술 블로그에 "부의추월차선"이 등장하냐고요?
현재 제가 가지고 있는 돈나무는 배당시스템, 컨텐츠시스템(유튜브등등) 이렇게 2가지를 이중화(?) 해서 가지고 있었습니다...
그런데 곰곰히 생각해보니, 저의 삶의 가장 많은 부분을 차지하고 있고 열심히 평소에 노력하고 있는컴퓨터소프트웨어 기술은 서행차선(?)에서 굴리고 있더라고요..

그리고, 요즘에 제가 개인적으로 좋아하는 글과 영상을 찍으면서 수익을 발생시키고있는 컨텐츠시스템의 6종을 마무리해보니 이제 새로운 도전을 해보려고요..

정리하자면, 이제 플러터를 통해서 아래 씨앗2: 컴퓨터 소프트웨어 시스템을 만들어보고자 합니다.
물론 아직은 플러터를 공부하는단계라서요...꾸준히 한번 해보려고요..

개인적인 썰(?)은 여기서 그만하고요 ...

본격적으로 플러터에 대해서 알아보시죠..
우선, 플러터(Flutter)의 개념과 플러터 앱에서 말하는 위젯의 개념은 무엇일까요?
플러터는 구글에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱 개발을 위해 사용됩니다.
플러터 앱은 위젯을 기반으로 구성되며, 위젯은 앱의 UI 요소를 구축하는 데 필요한 기본 단위입니다.
그럼 위젯에 대해 자세히 알아보도록 하겠습니다.

1.위젯의 개념

위젯은 플러터 앱의 모든 시각적 요소를 표현합니다.
버튼, 텍스트, 이미지 등 사용자 인터페이스의 모든 요소는 위젯으로 표현됩니다. 플러터에서는 모든 것이 위젯이라고 할 수 있습니다.

2.위젯의 종류

플러터에서는 크게 두 가지 종류의 위젯을 사용합니다: StatelessWidget과 StatefulWidget.

가.StatelessWidget
- 한 번 그려진 후에는 변경되지 않는 위젯입니다. 예를 들어, 앱의 로고 이미지나 정적인 텍스트를 표시하는 데 사용됩니다.

이 상속 트리에서 StatelessWidget은 최상위 부모 클래스입니다.
StatelessWidget을 상속하는 다양한 클래스들이 있으며, 여기에는 Text, Image, Container, Row, Column, ListView 등의 클래스가 포함됩니다.
그리고 Text 에 대해서 좀 더 자세하게 보시면 아래와 같습니다.

위에서 아래로 내려갈수록 상속 관계가 깊어지며, 가장 아래에 있는 Text가 최종적인 위젯입니다.

Object: 모든 플러터 객체의 기본 클래스입니다.
Diagnosticable: 진단 정보를 제공하기 위한 추상 클래스입니다.
DiagnosticableTree: 진단 정보를 트리 구조로 제공하기 위한 추상 클래스입니다.
Widget: 플러터의 위젯을 나타내기 위한 추상 클래스입니다.
StatelessWidget: 상태를 가지지 않는 위젯을 나타내기 위한 추상 클래스입니다.
Text: 텍스트를 나타내는 위젯입니다. 주어진 텍스트를 화면에 표시할 수 있습니다.

나.StatefulWidget
- 상태를 가지고 있으며, 상태가 변경될 때마다 UI가 업데이트됩니다. 예를 들어, 사용자의 입력에 따라 동적으로 변경되는 버튼이나 폼 필드 등에 사용됩니다.

이 상속 트리에서 StatefulWidget은 최상위 부모 클래스입니다.
StatefulWidget을 상속하는 다양한 클래스들이 있으며, 여기에는 TextButton, IconButton, Checkbox, Radio, TextFormField, DropdownButton 등의 클래스가 포함됩니다.
그리고 TextButton 에 대해서 좀 더 자세하게 보시면 아래와 같습니다.

위에서 아래로 내려갈수록 상속 관계가 깊어지며, 가장 아래에 있는 TextButton이 최종적인 위젯입니다.

Object: 모든 플러터 객체의 기본 클래스입니다.
Diagnosticable: 진단 정보를 제공하기 위한 추상 클래스입니다.
DiagnosticableTree: 진단 정보를 트리 구조로 제공하기 위한 추상 클래스입니다.
Widget: 플러터의 위젯을 나타내기 위한 추상 클래스입니다.
StatefulWidget: 상태를 가지는 위젯을 나타내기 위한 추상 클래스입니다. 내부적으로 State 객체를 가집니다.
MaterialButton: 머티리얼 디자인 스타일을 가지는 버튼 위젯을 나타냅니다. TextButton은 MaterialButton의 하위 클래스입니다.
TextButton: 텍스트를 보여주고 사용자 입력에 반응하는 버튼 위젯입니다. 일반적으로 눌렀을 때 어떤 작업을 수행하기 위해 사용됩니다.

3.위젯의 계층 구조

플러터 앱은 위젯의 계층 구조로 이루어져 있습니다.
각 위젯은 부모 위젯과 자식 위젯을 가질 수 있으며, 이를 통해 복잡한 UI를 구성할 수 있습니다.
부모 위젯은 자식 위젯을 가지고 있으며, 자식 위젯은 다시 자신의 부모가 될 수 있습니다.

4.위젯의 속성과 레이아웃

위젯은 다양한 속성을 가지고 있어서 해당 위젯의 모양, 크기, 색상 등을 조절할 수 있습니다.
플러터에서는 위젯의 속성을 변경하여 레이아웃을 조정하거나 스타일을 적용할 수 있습니다.

예를들자면요..
다음은 플러터에서 위젯의 속성을 변경하여 레이아웃을 조정하고 스타일을 적용하는 예시 코드입니다.
이 예시에서는 Container 위젯을 사용하여 레이아웃을 구성하고, BoxDecoration을 사용하여 스타일을 적용합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Widget Styling Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widget Styling Example'),
        ),
        body: Center(
          child: Container(
            width: 200, // 너비 조절
            height: 200, // 높이 조절
            decoration: BoxDecoration(
              color: Colors.blue, // 배경색상 변경
              borderRadius: BorderRadius.circular(10), // 테두리 모서리 둥글게 조절
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  offset: Offset(0, 2), // 그림자 위치 조절
                  blurRadius: 4, // 그림자 흐릿한 정도 조절
                ),
              ],
            ),
            child: Text(
              'Styled Container',
              style: TextStyle(
                color: Colors.white, // 텍스트 색상 변경
                fontSize: 20, // 텍스트 크기 조절
                fontWeight: FontWeight.bold, // 텍스트 굵기 조절
              ),
            ),
          ),
        ),
      ),
    );
  }
}

이 코드는 앱의 화면에 한 가운데에 위치한 스타일이 적용된 Container 위젯을 생성합니다. Container의 속성을 변경하여 위젯의 크기, 배경색, 테두리 모양, 그림자 등을 조정할 수 있습니다. 또한, Container 안에 Text 위젯을 추가하여 텍스트의 색상, 크기, 굵기 등도 조절할 수 있습니다.

위의 예시 코드 내용을 간단하게 설명해보자면요..
Container의 속성을 변경하여 레이아웃을 조정합니다.
예시에서는 width와 height 속성을 사용하여 박스의 크기를 200x200으로 조절하였습니다.

Container의 decoration 속성을 사용하여 스타일을 적용합니다.
BoxDecoration은 박스의 배경색, 테두리, 그림자 등을 설정하는 데 사용됩니다.
예시에서는 color 속성을 사용하여 박스의 배경색을 파란색으로 변경하였고,
borderRadius 속성을 사용하여 테두리의 모서리를 둥글게 조절하였습니다.
또한, boxShadow 속성을 사용하여 박스에 그림자 효과를 추가하였습니다.

Container 내부에 Text 위젯을 추가하여 텍스트를 표시하고 스타일을 적용합니다. Text 위젯의 style 속성을 사용하여 텍스트의 색상, 크기, 굵기 등을 조절할 수 있습니다. 예시에서는 텍스트의 색상을 흰색으로, 크기를 20로, 굵기를 굵은 글꼴로 변경하였습니다.

위의 예시 코드를 실행하면 앱 화면에는 스타일이 적용된 박스가 중앙에 표시됩니다.
이 예시를 통해 플러터에서 위젯의 속성을 변경하여 레이아웃을 조정하고 스타일을 적용하는 방법을 이해할 수 있습니다.

안드로이드 스튜디오를 사용해서 한번 실행해보면요
에뮬레이터에서 아래와 같은 결과를 확인할 수 있습니다.

간단하게 색상을 빨간색으로 변경해볼까요?

아래와 같이 color 를 기존 blud 에서 red 로 바꿔볼께요

그럼, 아래와 같이 배경색상이 red로 바뀐것을 확인해볼 수 있습니다.

5.위젯 트리와 화면 그리기

플러터는 위젯 트리를 사용하여 화면을 그립니다.
참고로, 위젯 트리는 부모 위젯과 자식 위젯들이 계층 구조로 연결된 구조를 말합니다.
앱의 시작점은 최상위 위젯인 MaterialApp 위젯입니다.
MaterialApp은 앱의 전반적인 구성을 정의하고, 화면 라우팅, 테마 설정 등의 기능을 제공합니다.
MaterialApp 위젯의 자식으로는 주로 Scaffold 위젯이 사용되며, Scaffold는 앱의 기본 레이아웃 구조를 정의합니다.

Scaffold 위젯 내부에는 AppBar 위젯과 Body 위젯이 포함됩니다. AppBar 위젯은 상단에 앱의 타이틀이나 액션 버튼을 표시하는 데 사용되며, Body 위젯은 앱의 실제 콘텐츠를 표시하는 데 사용됩니다. Body 위젯은 다양한 위젯으로 구성될 수 있으며, 예를 들어 Column, ListView, Container 등을 사용하여 콘텐츠를 배치하고 스크롤 가능한 영역을 만들 수 있습니다.

또한, 위젯은 특정 이벤트에 반응하거나 사용자 입력을 처리하기 위해 사용될 수도 있습니다.
예를 들어, RaisedButton 위젯은 사용자가 버튼을 클릭할 때 특정 동작을 수행하도록 할 수 있습니다. 플러터는 위젯의 상태 변화를 감지하고 자동으로 UI를 업데이트하는 "핫 리로딩" 기능을 제공하여 개발자가 쉽게 UI를 수정하고 확인할 수 있도록 합니다.

위젯은 다양한 속성과 메서드를 가지고 있어 개발자가 원하는 대로 UI를 구성하고 조작할 수 있습니다.
또한, 플러터는 다양한 내장 위젯을 제공하며, 필요에 따라 사용자 정의 위젯을 만들 수도 있습니다.

마지막으로, 플러터에서는 위젯 간의 효율적인 통신을 위해 상태 관리 패턴인 Provider, Riverpod, Bloc 등을 사용할 수 있습니다. 이를 통해 위젯 간 데이터 공유와 상태 관리를 용이하게 할 수 있습니다.
위의 패턴들도 한번 다음 블로그에서 다뤄보도록 하겠습니다.

이상으로 플러터 앱에서 말하는 위젯의 개념에 대해 간략하게 정리해보았고요..

위젯은 플러터 앱의 구성 요소를 형성하며, 계층 구조를 가지고 있어 다양한 UI를 구성할 수 있습니다.
위젯의 속성과 상태를 조작하여 앱의 외형과 동작을 제어할 수 있으며, 효율적인 상태 관리 패턴을 활용하여 개발을 더욱 편리하게 할 수 있습니다.

앞으로도 플러터관련 공부한 내용들을 정리해나갈까 합니다.

그리고, 저의 목표인 부의 추월 차선 2번째 씨앗 컴퓨터소프트웨어시스템을 통한 돈나무를 세워볼까 하니깐요~
많은 관심과 애정 부탁드려요~~^^:

오늘의 블로그는 여기까지고요..
항상 믿고 봐주셔서 감사합니다.

저작자표시 비영리 변경금지

'좋아하는 것_매직IT > 19.flutter' 카테고리의 다른 글

Naver Papago Openapi 를 활용한 간단한 번역 기능 앱 만들기 (0)	2023.09.12
Flutter 개발 시 StatefulWidget의 생명주기를 알아야하는 이유? (ft. ICT 챌린지 2023 멘토참여 후기) (0)	2023.08.13
flutter와 함께하는 openai 관련 Completions api 공부하기 (ft.openai_client) (0)	2023.02.13
1.flutter, 플러터(flutter)에 대해서 알아볼까요? (0)	2021.02.07

모든 실수에는 마술이 숨어있다.

플러터(Flutter) 앱을 구성하는 위젯(Widget) 개념 정리해보기. (ft.부의 추월차선 서막!)

블로그 목적

블로그 요약

블로그 상세 내용

'좋아하는 것_매직IT > 19.flutter' 카테고리의 다른 글

티스토리툴바

플러터(Flutter) 앱을 구성하는 위젯(Widget) 개념 정리해보기. (ft.부의 추월차선 서막!)

블로그 목적

블로그 요약

블로그 상세 내용

'좋아하는 것_매직IT > 19.flutter' 카테고리의 다른 글

'좋아하는 것_매직IT/19.flutter' Related Articles

티스토리툴바