[flutter] 플러터 훅 위젯을 활용한 웹 앱 개발 방법

21 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 모바일 앱 개발 프레임워크로, 휴대전화, 웹, 데스크톱에 동일한 앱을 만들 수 있습니다. 최근에는 훅(hook)이라는 개념을 활용하여 상태 관리를 보다 간편하게 할 수 있습니다. 이번 포스트에서는 플러터 훅 위젯을 활용하여 웹 앱을 개발하는 방법에 대해 살펴보겠습니다.

1. 플러터 훅(hook)이란?

훅은 함수형 프로그래밍과 믹스인을 활용하여 상태 관리와 비지니스 로직을 분리하여 관리할 수 있는 방법입니다. flutter_hooks 패키지를 사용하면 상태 변화를 감지하고 위젯을 새로 고쳐 렌더링할 수 있습니다.

2. 플러터 훅 패키지 설치

먼저, flutter_hooks 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter_hooks: ^1.1.0

그리고 터미널에서 아래 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

3. 플러터 훅을 활용한 웹 앱 예제

다음은 플러터 훅을 사용하여 간단한 카운터 앱을 웹 앱으로 개발하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

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

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('플러터 훅 웹 앱'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '버튼을 누르면 카운트가 증가합니다:',
              ),
              Text(
                '${count.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => count.value++,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

4. 결론

플러터 훅을 활용하면 상태 관리를 보다 간편하게 할 수 있으며, 함수형 프로그래밍과 믹스인을 활용하여 더욱 유연한 앱을 개발할 수 있습니다. 플러터 훅을 활용하여 웹 앱을 개발하는 방법에 대해 알아보았습니다.

더 많은 정보를 원하신다면 플러터 공식 문서를 참고하시기 바랍니다.