docx_file_viewer #

A high-fidelity native Flutter DOCX viewer that renders Word documents using pure Flutter widgets. No WebView, no PDF conversion—just native rendering for maximum performance and cross-platform compatibility.

✨ Features #

📦 Installation #

Add docx_file_viewer to your pubspec.yaml:

dependencies:
  docx_file_viewer: ^1.0.1

Then run:

flutter pub get

🚀 Quick Start #

import 'package:docx_file_viewer/docx_file_viewer.dart';

// From file
DocxView.file(myFile)

// From bytes
DocxView.bytes(docxBytes)

// From path
DocxView.path('/path/to/document.docx')

// With configuration
DocxView(
  file: myFile,
  config: DocxViewConfig(
    enableSearch: true,
    enableZoom: true,
    pageMode: DocxPageMode.paged,
    theme: DocxViewTheme.light(),
  ),
)

📖 Usage Examples #

Basic Viewer #

Scaffold(
  body: DocxView.file(
    File('document.docx'),
    config: DocxViewConfig(
      enableZoom: true,
      backgroundColor: Colors.white,
    ),
  ),
)

Paged View (Print Layout) #

DocxView(
  bytes: docxBytes,
  config: DocxViewConfig(
    pageMode: DocxPageMode.paged,  // Print-style page layout
    pageWidth: 794,                 // A4 width in pixels
    pageHeight: 1123,               // A4 height in pixels
  ),
)

With Built-in Search Bar #

Scaffold(
  body: DocxViewWithSearch(
    file: myDocxFile,
    config: DocxViewConfig(
      enableSearch: true,
      searchHighlightColor: Colors.yellow,
      currentSearchHighlightColor: Colors.orange,
    ),
  ),
)

Dark Theme #

DocxView(
  bytes: docxBytes,
  config: DocxViewConfig(
    theme: DocxViewTheme.dark(),
    backgroundColor: Color(0xFF1E1E1E),
  ),
)

Programmatic Search Control #

final searchController = DocxSearchController();

// Widget
DocxView(
  file: myFile,
  searchController: searchController,
)

// Control search programmatically
searchController.search('keyword');
searchController.nextMatch();
searchController.previousMatch();
searchController.clear();

// Listen to search changes
searchController.addListener(() {
  print('Found ${searchController.matchCount} matches');
  print('Current: ${searchController.currentMatchIndex + 1}');
});

With Callbacks #

DocxView(
  file: myFile,
  onLoaded: () {
    print('Document loaded successfully');
  },
  onError: (error) {
    print('Failed to load document: $error');
  },
)

⚙️ Configuration Options #

🎨 Theming #

Create a custom theme for consistent document styling:

DocxViewTheme(
  backgroundColor: Colors.white,
  defaultTextStyle: TextStyle(fontSize: 14, color: Colors.black87, height: 1.5),
  headingStyles: {
    1: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
    2: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    3: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
    4: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
    5: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
    6: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
  },
  codeBlockBackground: Color(0xFFF5F5F5),
  codeTextStyle: TextStyle(fontFamily: 'monospace', fontSize: 13),
  blockquoteBackground: Color(0xFFF9F9F9),
  blockquoteBorderColor: Color(0xFFCCCCCC),
  tableBorderColor: Color(0xFFDDDDDD),
  tableHeaderBackground: Color(0xFFEEEEEE),
  linkStyle: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
  bulletColor: Color(0xFF333333),
)

// Or use presets
DocxViewTheme.light()
DocxViewTheme.dark()

📋 Supported DOCX Elements #

🔗 Integration with docx_creator #

This package uses docx_creator for parsing DOCX files:

import 'package:docx_creator/docx_creator.dart';
import 'package:docx_file_viewer/docx_file_viewer.dart';

// Create a document
final doc = docx()
  .h1('My Document')
  .p('This is a paragraph with some text.')
  .table([
    ['Header 1', 'Header 2'],
    ['Cell 1', 'Cell 2'],
  ])
  .build();

// Export to bytes
final bytes = await DocxExporter().exportToBytes(doc);

// View immediately
DocxView.bytes(Uint8List.fromList(bytes))

🔍 Search API #

The DocxSearchController provides full control over document search:

final controller = DocxSearchController();

// Properties
controller.query;              // Current search query
controller.matches;            // All found matches
controller.matchCount;         // Number of matches
controller.currentMatchIndex;  // Current match index (0-based)
controller.currentMatch;       // Current SearchMatch object
controller.isSearching;        // Whether search is active

// Methods
controller.search('text');     // Search for text
controller.nextMatch();        // Go to next match
controller.previousMatch();    // Go to previous match
controller.clear();            // Clear search
controller.getBlockText(idx);  // Get text at block index

// Listen to changes
controller.addListener(() => print('Search updated'));

📱 Platform Support #

🤝 Contributing #

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

📄 License #

MIT License - see LICENSE for details.

🔗 Links #

• Pub.dev Package
• GitHub Repository
• Issue Tracker
• docx_creator Package