Flutter电子书阅读插件epubber的使用

本指南将详细介绍如何在Flutter项目中使用epubber插件来创建一个电子书阅读器。该插件基于epub包，能够在所有平台上使用Flutter小部件（而非原生视图）来渲染EPUB文档。

展示

开始前的准备

首先，在你的Flutter项目中添加epubber依赖项：

dependencies:
  epubber: any

确保你已经配置好了pubspec.yaml文件，并运行flutter pub get以安装该依赖项。

使用示例

以下是一个完整的示例，展示了如何使用epubber插件来创建一个基本的EPUB电子书阅读器。

主要代码

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:epubber/epubber.dart';
import 'package:flutter/services.dart' show rootBundle;

Future<Uint8List> _loadFromAssets(String assetName) async {
  final bytes = await rootBundle.load(assetName);
  return bytes.buffer.asUint8List();
}

EpubController _epubController;

@override
void initState() {
  _epubController = EpubController(
    // 加载文档
    document: EpubReader.readBook(_loadFromAssets('assets/book.epub')),
    // 设置起始点
    epubCfi: 'epubcfi(/6/6[chapter-2]!/4/2/1612)',
  );
  super.initState();
}

@override
Widget build(BuildContext context) => Scaffold(
  appBar: AppBar(
    // 显示当前章节名称
    title: EpubActualChapter(
      controller: _epubController,
      builder: (chapterValue) => Text(
        'Chapter ${chapterValue.chapter.Title ?? ''}',
        textAlign: TextAlign.start,
      ),
    ),
  ),
  // 显示目录
  drawer: Drawer(
    child: EpubReaderTableOfContents(
      controller: _epubController,
    ),
  ),
  // 显示EPUB文档
  body: EpubView(
    controller: _epubController,
  ),
);

详细代码解释

main.dart 文件

import 'dart:typed_data';

import 'package:epubber/epubber.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show SystemChrome, SystemUiOverlayStyle, rootBundle;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    _setSystemUIOverlayStyle();
  }

  Brightness get platformBrightness =>
      MediaQueryData.fromWindow(WidgetsBinding.instance.window).platformBrightness;

  void _setSystemUIOverlayStyle() {
    if (platformBrightness == Brightness.light) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: Colors.grey[50],
        systemNavigationBarIconBrightness: Brightness.dark,
      ));
    } else {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Colors.grey[850],
        systemNavigationBarIconBrightness: Brightness.light,
      ));
    }
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Epub demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          brightness: Brightness.light,
        ),
        darkTheme: ThemeData(
          primarySwatch: Colors.blue,
          brightness: Brightness.dark,
        ),
        debugShowCheckedModeBanner: false,
        home: MyHomePage(),
      );
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  EpubController _epubReaderController;

  @override
  void initState() {
    final loadedBook = _loadFromAssets('assets/New-Findings-on-Shirdi-Sai-Baba.epub');
    _epubReaderController = EpubController(
      document: EpubReader.readBook(loadedBook),
      // document: EpubReader,
      // epubCfi: 'epubcfi(/6/26[id4]!/4/2/2[id4]/22)', // book.epub Chapter 3 paragraph 10
      // epubCfi: 'epubcfi(/6/6[chapter-2]!/4/2/1612)', // book_2.epub Chapter 16 paragraph 3
    );
    super.initState();
  }

  @override
  void dispose() {
    _epubReaderController.dispose();
    super.dispose();
  }

  Future<Uint8List> _loadFromAssets(String assetName) async {
    final bytes = await rootBundle.load(assetName);
    return bytes.buffer.asUint8List();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: EpubActualChapter(
            controller: _epubReaderController,
            builder: (chapterValue) => Text(
              (chapterValue?.chapter?.Title?.trim() ?? '').replaceAll('\n', ''),
              textAlign: TextAlign.start,
            ),
          ),
          actions: [
            IconButton(
              icon: Icon(Icons.save_alt),
              color: Colors.white,
              onPressed: () => _showCurrentEpubCfi(context),
            ),
          ],
        ),
        drawer: Drawer(
          child: EpubReaderTableOfContents(controller: _epubReaderController),
        ),
        body: EpubView(
          controller: _epubReaderController,
          onDocumentLoaded: (document) {
            print('isLoaded: $document');
          },
          dividerBuilder: (_) => Divider(),
        ),
      );

  void _showCurrentEpubCfi(context) {
    final cfi = _epubReaderController.generateEpubCfi();

    if (cfi != null) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(cfi),
          action: SnackBarAction(
            label: 'GO',
            onPressed: () {
              _epubReaderController.gotoEpubCfi(cfi);
            },
          ),
        ),
      );
    }
  }
}

如何从上次阅读位置开始？

此方法允许你在章节内部保持精确的阅读位置：

_epubController = EpubController(
  // 初始化时使用EPUB CFI字符串以从上次位置打开书籍
  epubCfi: 'epubcfi(/6/6[chapter-2]!/4/2/1612)',
);

// 添加控制器
EpubView(
  controller: _epubController,
);

// 获取EPUB CFI字符串
// 例如输出 - epubcfi(/6/6[chapter-2]!/4/2/1612)
final cfi = _epubController.generateEpubCfi();

// 或者使用控制器进行导航
_epubController.gotoEpubCfi('epubcfi(/6/6[chapter-2]!/4/2/1612)');