[추가학습] Dart와 Flutter / Flutter 위젯과의 상호작용

 

 

Flutter는 하나의 코드베이스로 iOS, Android, 웹, 데스크톱 애플리케이션을 개발할 수 있는 강력한 프레임워크입니다.

이 Flutter에서 앱의 UI를 구성하는 핵심 요소가 바로 위젯입니다.

이번 블로그에서는 Dart를 사용해 Flutter 위젯과 상호작용하는 방법을 초보자도 이해할 수 있도록 쉽게 설명하겠습니다.

1. Flutter 위젯이란?

Flutter의 핵심 개념 중 하나는 위젯(widget)입니다.

위젯은 Flutter에서 화면을 구성하는 기본 단위로, Flutter에서 보여지는 모든 요소가 위젯으로 이루어져 있습니다.

예를 들어, 텍스트, 이미지, 버튼 등 눈에 보이는 모든 UI 요소는 Flutter에서 위젯이라고 부릅니다.

위젯은 단순히 화면에 표시되는 것뿐만 아니라 앱의 레이아웃이나 상태(state)를 관리하는 중요한 역할을 합니다.

위젯의 종류

1. StatelessWidget: 상태를 가지지 않는 위젯. 즉, 변경되지 않는 UI 요소를 나타냅니다.
2. StatefulWidget: 상태가 변할 수 있는 위젯. 사용자의 상호작용에 따라 UI가 업데이트됩니다.

2. 위젯의 기본 구조와 역할

Flutter에서 모든 UI는 위젯 트리(widget tree)로 구성됩니다. 즉, 하나의 위젯은 다른 위젯을 포함할 수 있으며, 이 트리가 화면에 표시될 전체 UI를 정의합니다.

위젯은 기본적으로 두 가지 중요한 역할을 합니다.

• UI 구성: Flutter의 UI 요소를 위젯으로 구성합니다.
• 상태 관리: 사용자가 상호작용할 때 UI를 업데이트하거나 변경할 수 있습니다.

3. StatefulWidget과 StatelessWidget의 차이

Flutter 위젯은 두 가지 유형으로 나뉩니다: StatelessWidget과 StatefulWidget.

1) StatelessWidget

• 상태가 없는 위젯입니다. 즉, 사용자가 상호작용하더라도 이 위젯의 상태는 변경되지 않습니다.
• 주로 텍스트, 이미지 등 고정된 UI 요소를 나타낼 때 사용됩니다.

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('이 위젯은 변경되지 않습니다.');
  }
}

2) StatefulWidget

• 상태를 가지는 위젯으로, 사용자의 상호작용에 따라 UI가 변경될 수 있습니다.
• 버튼 클릭, 텍스트 입력 등 동적인 UI 요소에 적합합니다.

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('카운터: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('카운터 증가'),
        ),
      ],
    );
  }
}

설명: StatefulWidget은 상태가 변할 수 있는 위젯을 의미하며, setState() 메서드를 호출해 상태를 변경하고 UI를 업데이트합니다. 이 위젯은 버튼을 클릭할 때마다 카운터 값이 증가하는 동작을 보여줍니다.

4. Dart로 Flutter 위젯과 상호작용하기

Flutter에서 Dart 언어를 사용해 위젯과 상호작용하는 방법은 매우 직관적입니다. 사용자는 클릭, 터치, 입력 등의 동작을 통해 UI와 상호작용하며, Dart 코드는 이 상호작용에 대한 반응을 처리합니다.

주요 상호작용 방법

1. onPressed: 버튼이나 클릭 가능한 요소에서 주로 사용됩니다. 사용자가 클릭했을 때 실행할 동작을 정의합니다.
2. onChanged: 사용자가 입력 필드에 데이터를 입력할 때 발생하는 이벤트를 처리합니다.
3. GestureDetector: 탭, 스와이프 같은 다양한 제스처 상호작용을 처리하는 위젯입니다.

5. 버튼 클릭 시 상태 변경 예제

Flutter 위젯과 상호작용하는 가장 간단한 예시는 버튼을 클릭할 때 상태가 변경되는 동작입니다.

StatefulWidget을 사용해 버튼을 클릭할 때마다 카운터 값이 증가하는 앱을 만들어보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterApp(),
    );
  }
}

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;  // 초기 카운터 값

  // 카운터 증가 함수
  void _incrementCounter() {
    setState(() {
      _counter++;  // 카운터 값 증가
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 위젯 상호작용 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('버튼을 누른 횟수:'),
            Text(
              '$_counter',  // 현재 카운터 값을 화면에 표시
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,  // 버튼 클릭 시 카운터 증가 함수 호출
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

설명

• CounterApp은 StatefulWidget으로, 사용자와의 상호작용에 따라 카운터 값을 변경합니다.
• FloatingActionButton은 사용자가 클릭할 수 있는 버튼을 제공하며, 클릭할 때마다 _incrementCounter 함수가 호출되어 카운터 값이 증가합니다.
• setState() 함수는 UI를 업데이트하는 중요한 함수로, 상태 변경이 일어날 때 이를 반영하여 화면을 다시 그립니다.

이 예제는 사용자와 Flutter 위젯이 상호작용하는 기본적인 패턴을 보여줍니다. 버튼을 클릭할 때마다 setState()가 호출되어 상태가 변경되고, 그 결과 화면에 표시되는 숫자가 업데이트됩니다.

 

 

Flutter에서 위젯은 앱의 모든 UI를 구성하는 핵심 요소이며, 사용자는 Dart 코드를 통해 이 위젯들과 상호작용합니다.

Flutter에서는 위젯이 정적이거나 동적일 수 있으며, 사용자의 입력이나 이벤트에 따라 위젯의 상태가 변할 수 있습니다.

 

이번 포스팅에서는 Flutter 위젯의 기본 개념과 함께, StatelessWidget과 StatefulWidget의 차이를 살펴보고, Dart 코드로 위젯과 상호작용하는 방법을 알아보았습니다.

특히, 버튼을 클릭하여 상태를 변경하는 간단한 예제를 통해 실습을 해보았으니, 이를 기반으로 더 복잡한 앱을 개발해보세요!

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱