기본 위젯 (Widget) 2/2

제스처 처리

사용자의 입력 제스처를 감지 하여 처리 하는 방법.

간단한 버튼을 만들어 확인해 보겠다.

lib/basic_widget/gesture.dart

import 'package:flutter/material.dart';

class GestureButton extends StatelessWidget {
  const GestureButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('MyButton was tapped!');
      },
      child: Container(
        height: 50.0,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: const Center(
          child: Text('Engage'),
        ),
      ),
    );
  }
}

onTap: 속성을 통해 GestureButton 을 tap(click, touch 등등) 했을때  print 를 찍는다.

AndroidStrudio debugging 창에 표시될 것이다.

 

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter3/basic_widget/gesture.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: SafeArea(
        child: GestureButton(),
      ),
    ),
  );
}

 

 

StatelessWidget 

: 상태를 가지고 있지 않다. widget 내부 변수의 변경이 widget 의 build 를 다시 호출 하지 않기 때문에

화면의 변화가 없다. 즉 한번 widget 의 속성이 정해지면 동적(runtime 시, click 등의 동작)으로 변경되지 않는다. 

 

button 을 누르면 counter 를  1씩 증가시키는 간단한 widget을 만들어 보자

 

lib/basic_widget/stateless_widget_counter.dart

import 'package:flutter/material.dart';

class StatelessCounter extends StatelessWidget {
  StatelessCounter({super.key});

  int _counter = 0;

  void _increment() {
      _counter++;
      print("counter = ${_counter}");
  }
  
  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        ElevatedButton(
        onPressed: _increment,
        child: const Text('Increment'),
    ),
    const SizedBox(width: 16),
    Text('Count: $_counter'),
    ],
    );
  }
}

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter3/basic_widget/stateless_widget_counter.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: Scaffold(
        body: Center(
          child: StatelessCounter(),
        ),
      ),
    ),
  );
}

 

 

 

print 로 counter 의 변경사항은 debug 창에 표시 되지만 실제 Text Widget 의 Count 내용은 변경되지 않는다.

위에서 말했듯이 counter 의 변경이 stateless 의 build 를 다시 호출 하지 않기 때문에 Text Widget 은 변경되지 않는다.

 

StatefulWidget

stateless 위젯이 속성의 변경에도 화면에 값을 update 하지 않는다면

stateful 위젯은 state 를 포함하며 속성이 변경되면

setState 라는 method 를 통해 화면을 update 하게 한다. 

setState 가 발생할때 마다 build 과정이 다시 일어나고 동적 화면을 쉽게 구현하게 한다.

 

위에 stateless 위젯에서 생성한  counter 앱을 다시 작성해 보자

 

lib/basic_widget/stateful_widget_counter.dart

import 'package:flutter/material.dart';

class StatefulCounter extends StatefulWidget {
  const StatefulCounter({super.key});

  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<StatefulCounter> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
        const SizedBox(width: 16),
        Text('Count: $_counter'),
      ],
    );
  }
}

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter3/basic_widget/stateful_widget_counter.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: Scaffold(
        body: Center(
          child: StatefulCounter(),
        ),
      ),
    ),
  );
}

 

onTap 이 실행될때마다 화면의 Count 가 변경된다. 

StatefulWidget 은 이렇게 화면의 변경이 필요할 경우 사용하는 위젯이다

 

사실 위에서는 이 두가지 widget 을 구분하였지만

나중에 bloc, provider, riverpod 같은 state management library 를 사용하게 되면

stateless 를 통해 화면의 변경을 처리 하게 된다. 굳이 구분하지 않고 사용할 수 있게 된다. 

 

 

 

관련영상

https://youtu.be/kibwe8XM5aY