✅Привет! Это Анна, Flutter Team Lead Friflex

Один из самых частых запросов бизнеса — отобразить важные документы внутри приложения. Это может быть все, что угодно: от политики конфиденциальности и правил сервиса до персональных документов пользователей. И как показывает практика, чаще всего такие документы приходят в формате pdf.

Сегодня поговорим о том, как удобно отображать pdf-файлы во Flutter-приложении.

На pub.dev можно найти несколько похожих плагинов для показа pdf-файлов в приложении. Но сегодня рассмотрим один из самых популярных и мною любимых плагинов — syncfusion_flutter_pdfviewer.

Первое, что привлекает в этой библиотеке — возможность открыть файл из разных источников, не только из внутреннего хранилища. Рассмотрим разные варианты.

1️⃣ SfPdfViewer.network
Этот метод позволяет загрузить файл по ссылке, достаточно передать соответствующий url. И что самое удобное — вы легко можете открыть даже защищенный паролем файл, так как метод дает возможность передать password

return Scaffold(
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf',

        password: 'syncfusion',
      ),
    );

2️⃣ SfPdfViewer.asset
Здесь можно открыть любой файл, вложенный в assets проекта

return Scaffold(body: SfPdfViewer.asset('assets/files/test_file.pdf'))

3️⃣ SfPdfViewer.file
Этот виджет дает возможность отобразить файл из локального хранилища устройства по пути

return Scaffold(
      body: SfPdfViewer.file(
        File('path_to_your_local_file'),
      ),
    );

4️⃣ SfPdfViewer.memory
А этот позволяет отобразить файл, представленный в байтах

return Scaffold(
      body: FutureBuilder(
        future: _loadFromAsset('assets/files/test_file.pdf'),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return SfPdfViewer.memory(snapshot.data!);
          } else {
            return const CircularProgressIndicator();
          }
        },
      ),
    );
...
Future<Uint8List> _loadFromAsset(String path) async {
    final data = await rootBundle.load(path);
    return data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
  }

Еще одна причина попробовать этот плагин — вид файла можно легко настраивать с помощью дополнительных параметров. Например, можно задать начальные значения страницы и зума — initialPageNumber и initialZoomLevel. А также цвет выделенного текста при поиске — otherSearchTextHighlightColor и currentSearchTextHighlightColor

SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/encrypted.pdf',
        password: 'syncfusion',
        initialPageNumber: 1,
        initialZoomLevel: 1.0,
        otherSearchTextHighlightColor: Colors.green.withValues(alpha: 0.5),
        currentSearchTextHighlightColor: Colors.blue.withValues(alpha: 0.5),
      ),

Продолжение — в комментариях 👇