[flutter] Flutter Riverpod에서 사운드 레코더 앱 만들기

14 Dec 2023

flutter

안녕하세요! 이번 포스트에서는 Flutter와 Riverpod를 사용하여 간단한 사운드 레코더 앱을 만드는 방법에 대해 알아보겠습니다.

Riverpod이란?

Riverpod은 Flutter 어플리케이션의 상태 관리를 위한 Dependency Injection 프레임워크입니다. 이를 사용하면 Flutter 어플리케이션의 상태를 효율적으로 관리할 수 있어요.

프로젝트 설정

먼저, Riverpod를 프로젝트에 추가해야 해요. 먼저 pubspec.yaml 파일에 다음과 같이 riverpod 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

이제 pubspec.yaml 파일을 저장하고, 터미널에서 flutter pub get을 실행하여 패키지를 설치해줘요.

코드 작성

아래 코드는 Riverpod를 사용하여 사운드 레코딩을 관리하고, UI를 업데이트하는 방법을 보여줍니다. 해당 코드를 main.dart 파일에 추가해주세요.

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

final soundProvider = StateProvider<String>((ref) => 'Not Recording');

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sound Recorder'),
        ),
        body: Center(
          child: Consumer(
            builder: (context, watch, child) {
              final soundState = watch(soundProvider).state;
              return Text(soundState);
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
						// Start/stop recording logic here
            context.read(soundProvider).state = 'Recording...';
          },
          tooltip: 'Record',
          child: Icon(Icons.mic),
        ),
      ),
    );
  }
}

결론

이제 Riverpod를 사용하여 간단한 사운드 레코더 앱을 만드는 방법에 대해 알아보았습니다. Riverpod를 사용하면 어플리케이션의 상태 관리를 쉽게 할 수 있어요. 이를 응용하여 더 복잡하고 기능적인 어플리케이션을 만들 수 있습니다.

이제 Flutter와 Riverpod로 놀라운 어플리케이션을 만들어보세요!