Right to Left (RTL) in Flutter PDF Viewer (SfPdfViewer)

24 Dec 20245 minutes to read

The SfPdfViewer supports right-to-left rendering. All the user interface elements will be rendered based on LTR and RTL direction, and the functionalities like text search and copying text also support RTL languages.

RTL rendering ways

Right to left rendering can be switched in the following ways:

Wrapping the SfPdfViewer with Directionality widget

To change the rendering direction from right to left, wrap the SfPdfViewer widget inside the Directionality widget and set the textDirection property as TextDirection.rtl.

final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter PDF Viewer'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(
              Icons.bookmark,
              color: Colors.white,
              semanticLabel: 'Bookmark',
            ),
            onPressed: () {
              _pdfViewerKey.currentState?.openBookmarkView();
            },
          ),
        ],
      ),
      body: Directionality(
        textDirection: TextDirection.rtl,
        child: SfPdfViewer.network(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
          key: _pdfViewerKey,
        ),
      ),
    );
  }

Changing the locale to RTL languages

To change the SfPdfViewer rendering direction from right to left, change the locale to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.

To use flutter_localizations, add the package as dependency to pubspec.yaml file.

  • DART
    • dependencies:
flutter_localizations:
  sdk: flutter

    Then, import the flutter_localizations library, specify localizationsDelegates and supportedLocales for MaterialApp.

    final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const <Locale>[
        Locale('en'),
        Locale('ar'),
        // ... other locales the app supports
      ],
      locale: const Locale('ar'),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter PDF Viewer'),
          actions: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.bookmark,
                color: Colors.white,
                semanticLabel: 'Bookmark',
              ),
              onPressed: () {
                _pdfViewerKey.currentState?.openBookmarkView();
              },
            ),
          ],
        ),
        body: SfPdfViewer.network(
          'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
          key: _pdfViewerKey,
        ),
      ),
    );
  }

    NOTE

    RTL scrolling is not supported in single page layout mode when the scrollDirection property is set to PdfScrollDirection.horizontal.