[flutter] 플러터 훅 위젯에서의 데이터 수정 방법

21 Dec 2023

flutter

플러터(Flutter)의 훅(Hook) 위젯은 상태를 관리하고 UI를 간단하게 작성하는 데 도움이 됩니다. 훅 위젯에서 상태를 수정하는 방법에 대해 알아보겠습니다.

상태 관리의 기본

먼저, 훅(Hook) 위젯에서 데이터를 수정하기 위해 상태 관리가 필요합니다. 훅 위젯에서는 useState 훅을 사용하여 상태를 관리합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('훅 위젯으로 카운터 앱 만들기'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '버튼을 누르면 카운터가 증가합니다:',
              ),
              Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 상태 수정 로직 추가
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

상태 수정

카운터의 값을 증가시키는 예제를 통해 훅 위젯에서의 데이터 수정 방법을 알아보겠습니다. floatingActionButton 위젯의 onPressed 콜백 함수 내에서 setState를 사용하여 카운터 값을 증가시킬 수 있습니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    counter.value++;
  },
  tooltip: 'Increment',
  child: Icon(Icons.add),
),

위 예제에서 counter.value++를 통해 카운터 값을 증가시킬 수 있습니다.

이제 여러분은 플러터 훅 위젯에서 데이터를 수정하는 방법을 알고 계십니다!

참고 자료: Flutter Hooks