Flutter电子书阅读及高亮插件epub_reader

Flutter电子书阅读及高亮插件epub_reader_highlight的使用

EPub Reader Highlight

EPub Reader Highlight 是一个基于Flutter的应用程序，用于以完整的解决方案阅读Epub格式的书籍。它具有直观的界面和高级功能，使开发人员能够为用户提供个性化且高效的阅读体验。

特性

文本高亮：选择书中的重要段落并应用不同的高亮颜色，以便于复习和组织内容。
章节列表：轻松导航到书中的各个章节，查看标题和每个章节的数量。
高亮管理：访问所有添加的高亮条目列表，并根据颜色或章节进行过滤。
自定义界面：根据您的喜好调整读者的外观，包括字体大小、行间距和阅读模式。
最后段落访问：访问书中已读的最后一段，并管理选中文本的高亮，允许开发者保存和管理阅读进度以及选中文本。

示例代码

import 'package:epub_reader_highlight/epub_reader_highlight.dart';
import 'package:epub_reader_highlight/ui/actual_chapter.dart';
import 'package:epub_reader_highlight/ui/table_of_contents.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State&lt;MainApp&gt; createState() =&gt; _MainAppState();
}

class _MainAppState extends State&lt;MainApp&gt; {
  late EpubController _epubReaderController;

  @override
  void initState() {
    super.initState();
    _epubReaderController = EpubController(
      document: EpubDocument.openAsset('assets/gentle-green-obooko.epub'),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.white,
        child: SafeArea(
          bottom: false,
          child: Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              title: EpubViewActualChapter(
                controller: _epubReaderController,
                builder: (chapterValue) =&gt; Text(
                  'Chapter: ${chapterValue?.chapter?.Title?.replaceAll('\n', '').trim() ?? ''}',
                  textAlign: TextAlign.start,
                ),
              ),
            ),
            drawer: Drawer(
              child: EpubViewTableOfContents(
                controller: _epubReaderController,
              ),
            ),
            body: EpubView(
              builders: EpubViewBuilders&lt;DefaultBuilderOptions&gt;(
                options: const DefaultBuilderOptions(
                  textStyle: TextStyle(
                    fontSize: 166,
                    height: 1.5,
                    color: Colors.amber,
                  ),
                ),
                chapterDividerBuilder: (_) =&gt; Container(),
              ),
              onHighlightTap: (selectedTextModel) {
                debugPrint('Highlighted Text: $selectedTextModel');
              },
              paragraphIndexOnDispose: (paragraphIndex) {
                debugPrint('Last paragraph Index: $paragraphIndex');
              },
              controller: _epubReaderController,
            ),
          ),
        ),
      ),
    );
  }
}

使用示例

克隆仓库：

git clone https://github.com/danielmaques/epub_reader_highlight.git

导航到项目目录：
```
cd epub_reader_highlight
```
安装依赖：
```
flutter pub get
```
运行应用程序：
```
flutter run
```

文本高亮

要高亮一段文字，请简单地选择所需的文字并选择不同的高亮颜色。

章节导航

使用章节菜单轻松浏览书籍中的各个章节。

界面定制

访问应用程序设置以调整字体、行距和阅读模式。

最后段落访问

onHighlightTap: (selectedTextModel) {
  print('Highlighted Text: $selectedTextModel');
},
paragraphIndexOnDispose: (paragraphIndex) {
  print('Last paragraph Index: $paragraphIndex');
},

更多关于Flutter电子书阅读及高亮插件epub_reader_highlight的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•6 天前

更多关于Flutter电子书阅读及高亮插件epub_reader_highlight的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用epub_reader_highlight插件来实现电子书阅读及高亮功能的示例代码。这个插件允许你加载EPUB文件并在文本中进行高亮。

首先，确保你已经在pubspec.yaml文件中添加了epub_reader_highlight依赖：

dependencies:
  flutter:
    sdk: flutter
  epub_reader_highlight: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个简单的示例代码，展示如何使用epub_reader_highlight插件：

import 'package:flutter/material.dart';
import 'package:epub_reader_highlight/epub_reader_highlight.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EPUB Reader with Highlight',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: EpubReaderScreen(),
    );
  }
}

class EpubReaderScreen extends StatefulWidget {
  @override
  _EpubReaderScreenState createState() => _EpubReaderScreenState();
}

class _EpubReaderScreenState extends State<EpubReaderScreen> {
  late EpubController _epubController;
  late List<EpubLocation> _highlightedLocations;

  @override
  void initState() {
    super.initState();
    _epubController = EpubController();
    _highlightedLocations = [];

    // Load EPUB file from assets or any other source
    _loadEpub();
  }

  Future<void> _loadEpub() async {
    // For demonstration, we'll load from assets. You can also load from network or local storage.
    final ByteData data = await rootBundle.load('assets/your_book.epub');
    final Uint8List bytes = data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);

    _epubController.loadData(bytes);
    _epubController.listen((event) {
      if (event is EpubLoaded) {
        // EPUB loaded successfully
        setState(() {});
      }
    });
  }

  void _highlightText(EpubLocation location) {
    setState(() {
      _highlightedLocations.add(location);
      _epubController.highlightText(location);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EPUB Reader with Highlight'),
      ),
      body: _epubController.isEpubLoaded
          ? EpubReaderView(
              controller: _epubController,
              onTextTap: (location) {
                _highlightText(location);
              },
              highlightedLocations: _highlightedLocations,
            )
          : Center(
              child: CircularProgressIndicator(),
            ),
    );
  }

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

说明：

依赖安装：确保epub_reader_highlight已经添加到你的pubspec.yaml文件中。
加载EPUB文件：在_loadEpub方法中，我们从assets中加载EPUB文件。你也可以从网络或本地存储加载文件。
监听加载状态：通过_epubController.listen监听EPUB加载状态，一旦加载完成，刷新UI。
高亮文本：_highlightText方法用于高亮指定的文本位置。当用户点击文本时，会调用此方法。
显示EPUB阅读器：使用EpubReaderView小部件显示EPUB内容，并处理文本点击事件。

注意：确保你的assets文件夹中确实有一个名为your_book.epub的EPUB文件，或者根据你的实际文件路径进行调整。

这个示例代码提供了一个基础框架，你可以根据需要进行扩展和自定义，例如添加更多的高亮管理功能、搜索功能等。