[flutter] 플러터 Riverpod를 사용하여 앱에 북마크 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

먼저 flutter_riverpod 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음을 추가하세요:

dependencies:
  flutter_riverpod: ^1.0.0

main.dart 파일에서 Riverpod를 초기화하고 앱 전체에서 사용할 Provider를 생성하세요:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '북마크 앱',
      home: BookmarksPage(),
    );
  }
}

플러터 앱에서 북마크 기능을 구현하기 위해 bookmark_provider.dart와 같은 파일을 생성하세요:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final bookmarkProvider = StateProvider<List<Bookmark>>((ref) => []);

class Bookmark {
  final String title;
  final String url;

  Bookmark({required this.title, required this.url});
}

북마크 목록을 보여주는 페이지를 구성하세요. bookmarks_page.dart 파일을 생성하고 다음과 같이 코드를 작성하세요:

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

class BookmarksPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final bookmarks = watch(bookmarkProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('북마크'),
      ),
      body: ListView.builder(
        itemCount: bookmarks.length,
        itemBuilder: (context, index) {
          final bookmark = bookmarks[index];
          return ListTile(
            title: Text(bookmark.title),
            onTap: () {
              // 북마크를 선택한 경우, 해당 URL로 이동하도록 처리할 수 있습니다.
              // 예를 들어, WebView로 페이지를 열거나 외부 브라우저로 연결할 수 있습니다.
            },
          );
        },
      ),
    );
  }
}

북마크를 추가하는 기능을 구현해보겠습니다. 특정 페이지를 북마크로 추가하는 버튼을 bookmark_button.dart 파일로 생성하세요:

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

class BookmarkButton extends StatelessWidget {
  final String title;
  final String url;

  const BookmarkButton({required this.title, required this.url});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        final bookmarks = context.read(bookmarkProvider).state;
        final newBookmark = Bookmark(title: title, url: url);
        context.read(bookmarkProvider).state = [...bookmarks, newBookmark];
      },
      child: Text('북마크 추가'),
    );
  }
}

마지막으로, 북마크 버튼을 원하는 페이지에서 사용해보세요:

import 'package:flutter/material.dart';
import 'package:my_app/bookmark_button.dart';

class SomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('페이지'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('페이지 내용'),
            BookmarkButton(title: '페이지 제목', url: '페이지 URL'),
          ],
        ),
      ),
    );
  }
}

이제 Riverpod를 사용하여 플러터 앱에 북마크 기능을 추가하는 방법을 알게 되었습니다. 위의 단계를 따라 하면서 앱의 요구에 맞게 커스터마이즈할 수 있습니다. 추가적으로 북마크 목록을 저장하고 로드하는 방법, 북마크 삭제 기능 등을 구현할 수도 있습니다.