DEV Community: Destiny Ed

How I built DocTextExtractor to power NotteChat's AI-powered document chat, and how you can integrate it into your own Flutter apps. http://bit.ly/4jWr2VZ

Destiny Ed — Thu, 15 May 2025 07:33:43 +0000

DocTextExtractor: A Flutter Package to Extract Text from Word, PDF, Google Docs, and Markdown

Destiny Ed — Wed, 14 May 2025 21:06:39 +0000

How I built DocTextExtractor to power NotteChat's AI-powered document chat, and how you can integrate it into your own Flutter apps.

As a Flutter developer with a passion for simplifying complex problems, I created DocTextExtractor—a lightweight, open-source Dart package that extracts text from .doc, .docx, .pdf, Google Docs URLs, and .md files.

This tool was born from the challenges I faced while building NotteChat, an app that allows users to chat with document content using AI. In this article, I’ll share how I built DocTextExtractor, why it matters, and how you can integrate it into your own Flutter projects.

Why I Built DocTextExtractor

NotteChat empowers students, professionals, and educators to interact with documents conversationally. Users simply paste a URL or upload a file to a document and can then summarize, explore, or ask questions about the content using AI.

However, supporting multiple document formats (.doc, .docx, PDF, Google Docs, Markdown) posed a serious challenge. Most existing Flutter solutions only worked for specific formats, and there was no unified solution.

So I built DocTextExtractor, with a goal to:

Support .doc, .docx, .pdf, .md, and Google Docs URLs
Handle both local files and URLs
Enable offline parsing for .doc and .md
Power AI by providing clean, structured text
Extract real filenames for better UX

Building DocTextExtractor

1. Identifying the Need

The core feature of NotteChat—chatting with document content—meant I needed a consistent way to extract text, regardless of format or source.

Key Requirements:

Unified API for all formats
Clean filename extraction
Minimal dependencies
Cross-platform support (iOS, Android, Web)

2. Choosing the Tech Stack

I relied on the trusted Flutter/Dart ecosystem with the following tools and packages:

http: Fetch documents via URLs
syncfusion_flutter_pdf: Parse and extract PDFs
archive + xml: Extract from .docx and .doc
markdown: Convert .md to plain text
VS Code + GitHub for development and version control

GitHub repo: github.com/Destiny-Ed/doc_text_extractor

3. Designing the Core Logic

At the heart of the package is the TextExtractor class with a single extractText() method.

Key Features:

Unified Return Type: A Record(text, filename) for easy use
Smart Format Detection: Checks HTTP Content-Type or file extension
Offline Support: No internet required for .doc and .md
Error Handling: Friendly exceptions (e.g., "Unsupported document type")

4. Format-Specific Logic

Each format was tackled with custom logic:

.doc: No existing Dart parser, so I created one using raw XML parsing
.docx: Unzipped and parsed word/document.xml
.md: Used markdown package for plain-text conversion
PDF: Parsed using syncfusion_flutter_pdf
Google Docs: Converted /edit URLs to /export?format=pdf and parsed as PDF

5. Filename Extraction

To enhance UX, I added a _extractFilename() method that pulls names from:

Content-Disposition headers (e.g., filename="report.docx")
URL segments (e.g., https://example.com/readme.md)
Google Docs metadata (fallback if unavailable)

6. Testing & Refinement

I tested with:

.doc: Legacy Word file
.docx: Modern reports
.md: GitHub README files
PDF: Academic papers
Google Docs: Shared documents

Edge cases included:

Missing headers
Large files (>10MB)
Unsupported formats

7. Publishing as a Package

To make DocTextExtractor reusable, I decided to publish it on pub dev, and that is also one of the reasons I'm writing this article

Published on Pub.dev
MIT Licensed
Included example app
Wrote a detailed README with usage examples

Why It Matters to NotteChat

DocTextExtractor is the backbone of NotteChat's AI-powered chat with documents.

It enables:

AI Chat: Clean text fed into AI (e.g., "Summarize this PDF")
Offline Use: Great for areas with limited internet
Smart UX: Real filenames and helpful error messages
Versatile Support: For modern and legacy users

How to Use DocTextExtractor in Flutter

Step 1: Add the Dependency

Add doc_text_extractor to your app’s pubspec.yaml.

yaml dependencies: doc_text_extractor: ^1.0.0

Run:
flutter pub get

Step 2: Import and Initialize

Import the package and create a TextExtractor instance:

import 'package:doc_text_extractor/doc_text_extractor.dart';

final extractor = TextExtractor();

Step 3: Extract Text from a URL

Use extractText to process URLs for .doc, .docx, .md, PDF, or Google Docs:

Future<void> processDocumentUrl(String url) async {
  try {
    final result = await extractor.extractText(url);
    final text = result.text;
    final filename = result.filename;
    print('Filename: $filename');
    print('Text: ${text.substring(0, 100)}...');
    // Pass text to AI service (e.g., for NotteChat’s AI chat)
  } catch (e) {
    print('Error: $e');
    // Show user-friendly error (e.g., "Please convert .doc to .docx")
  }
}

Example usage

processDocumentUrl('https://raw.githubusercontent.com/user/repo/main/README.md');
processDocumentUrl('https://docs.google.com/document/d/EXAMPLE_ID/edit');

Step 4: Extract Text from a Local File

For local files (e.g., user-uploaded .md or .doc), set isUrl: false:

import 'package:path_provider/path_provider.dart';
import 'dart:io';

Future<void> processLocalFile(String filePath) async {
  try {
    final result = await extractor.extractText(filePath, isUrl: false);
    final text = result.text;
    final filename = result.filename;
    print('Filename: $filename');
    print('Text: ${text.substring(0, 100)}...');
    // Use text in app logic
  } catch (e) {
    print('Error: $e');
  }
}

Example usage

final dir = await getTemporaryDirectory();
processLocalFile('${dir.path}/sample.md');

Step 5: Integrate with your preferred AI API

You can now use the extracted text in your app with AI tools like OpenAI, Gemini, or Sonar APIs.

class ChatScreen extends StatelessWidget {
  Future<void> _handleDocument(String url) async {
    final result = await extractor.extractText(url);
    final text = result.text;
    final filename = result.filename;

    // Update session title
    final sessionTitle = 'Session ${DateTime.now().toIso8601String().split('T')[0]} - $filename';

    // Summarize with AI (e.g., Sonar API)
    final sonarService = SonarService();
    final summary = await sonarService.queryDocument(text, 'Summarize this document');

    // Display in UI
    print('Session: $sessionTitle');
    print('Summary: $summary');
  }
}

Step 6: Enhance UX with Error Handling

Add loading dialogs for large files and user-friendly errors:

if (e.toString().contains('Unsupported document type')) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Unsupported format. Try converting to .docx or PDF.')),
  );
}

Final Thoughts

DocTextExtractor started as a necessity for NotteChat but evolved into a powerful, standalone Flutter package. It’s now available for anyone building document-based apps, AI tools, or productivity platforms.

Try it out: https://pub.dev/packages/doc_text_extractor
View the source: GitHub Repo

If you found this helpful or end up using the package, feel free to drop a ⭐ on GitHub or share your feedback. I’d love to hear how you’re using it!

Happy coding!

DocTextExtractor #NotteChat #Flutter #AI #DestinyEd #Dart

Stop wasting time on lengthy documents! I’m excited to introduce NotteChat, an AI-powered app that reads PDFs and Word docs for you. Upload any file, ask questions, and get answers in seconds. Download at https://nottechat.com

Destiny Ed — Wed, 23 Apr 2025 14:16:15 +0000

Flutter Animations: From Beginner Basics to Heroic Transitions

Destiny Ed — Mon, 07 Apr 2025 18:16:48 +0000

Animations can transform a good Flutter app into a great one, making your UI feel alive and intuitive. Whether you’re new to Flutter or ready to level up, this tutorial will guide you from simple animations to advanced transitions. We’ll start with beginner-friendly implicit animations, move to explicit animations for more control, and finish with the stunning Hero animation that ties screens together like magic. By the end, you’ll have the skills to animate anything in Flutter.

We are going to group this into Part (From basic animations and advanced and Hero animations)

For a more visual tutorial, check out my youtube channel :

Ready to get moving? Let’s jump in!

Part 1: Basic Implicit Animations

Implicit animations are perfect for beginners because Flutter handles the animation logic for you. You define the start and end states, and Flutter smoothly transitions between them. Let’s begin with AnimatedContainer.

Example 1: Coloring and Growing a Box with AnimatedContainer

The AnimatedContainer widget animates changes to properties like size, color, or padding. Let’s make a box that grows and changes color when tapped.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: AnimatedContainerDemo());
  }
}

class AnimatedContainerDemo extends StatefulWidget {
  @override
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedContainer Demo')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _isExpanded ? 200 : 100,
            height: _isExpanded ? 200 : 100,
            color: _isExpanded ? Colors.blue : Colors.red,
            curve: Curves.easeInOut,
          ),
        ),
      ),
    );
  }
}

How It Works:

AnimatedContainer transitions its properties over a duration (1 second here).

Tapping toggles _isExpanded, changing the width, height, and color.

curve: Curves.easeInOut ensures a smooth start and stop.

If you run this and tap the box. It grows from 100x100 (red) to 200x200 (blue) with a silky-smooth animation.

Part 2: Intermediate Implicit Animations

Now that you’ve got the basics, let’s explore more implicit animations: AnimatedOpacity for fading effects and AnimatedCrossFade for switching widgets.

Example 2: Fading Text with AnimatedOpacity

Let’s fade a text widget in and out with a button press.

class AnimatedOpacityDemo extends StatefulWidget {
  @override
  _AnimatedOpacityDemoState createState() => _AnimatedOpacityDemoState();
}

class _AnimatedOpacityDemoState extends State<AnimatedOpacityDemo> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedOpacity Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              opacity: _isVisible ? 1.0 : 0.0,
              duration: Duration(seconds: 1),
              child: Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 30),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isVisible = !_isVisible;
                });
              },
              child: Text('Toggle Fade'),
            ),
          ],
        ),
      ),
    );
  }
}

How It Works:

AnimatedOpacity changes the opacity from 0.0 (invisible) to 1.0 (visible).

The button toggles _isVisible, triggering the fade over 1 second.

Example 3: Switching Widgets with AnimatedCrossFade

AnimatedCrossFade lets you transition between two widgets with a crossfade effect. Let’s switch between two colored boxes in this example.

class AnimatedCrossFadeDemo extends StatefulWidget {
  @override
  _AnimatedCrossFadeDemoState createState() => _AnimatedCrossFadeDemoState();
}

class _AnimatedCrossFadeDemoState extends State<AnimatedCrossFadeDemo> {
  bool _showFirst = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedCrossFade Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedCrossFade(
              firstChild: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
              secondChild: Container(
                width: 100,
                height: 100,
                color: Colors.purple,
              ),
              crossFadeState: _showFirst
                  ? CrossFadeState.showFirst
                  : CrossFadeState.showSecond,
              duration: Duration(seconds: 1),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showFirst = !_showFirst;
                });
              },
              child: Text('Switch'),
            ),
          ],
        ),
      ),
    );
  }
}

How It Works:

AnimatedCrossFade fades between firstChild (green box) and secondChild (purple box).

crossFadeState determines which child is visible, with a 1-second transition.

Part 3: Explicit Animations

Implicit animations are easy, but explicit animations give you full control using AnimationController and Tween. Let’s create a rotating icon.

Example 4: Spinning Icon

We’ll make a star icon spin 360 degrees repeatedly.

class RotationDemo extends StatefulWidget {
  @override
  _RotationDemoState createState() => _RotationDemoState();
}

class _RotationDemoState extends State<RotationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 2 * 3.14159).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Rotation Demo')),
      body: Center(
        child: Transform.rotate(
          angle: _animation.value,
          child: Icon(Icons.star, size: 100),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.isAnimating) {
            _controller.stop();
          } else {
            _controller.repeat();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

How It Works:

AnimationController manages the animation’s timing (2 seconds per cycle).

Tween maps values from 0 to 2π (a full rotation).

vsync: this syncs the animation to the screen refresh rate, requiring SingleTickerProviderStateMixin.

The floating action button toggles the spinning.

Part 4: Advanced Custom Animation

In this part, we are going to combine multiple animations for a more complex effect: a ball that bounces up and down while changing size.

Example 5: Bouncing Ball

This example uses AnimatedBuilder for efficiency and combines position and size animations.

class BounceDemo extends StatefulWidget {
  @override
  _BounceDemoState createState() => _BounceDemoState();
}

class _BounceDemoState extends State<BounceDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _height;
  late Animation<double> _size;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    )..repeat(reverse: true);

    _height = Tween<double>(begin: 0, end: 200).animate(
      CurvedAnimation(parent: _controller, curve: Curves.bounceOut),
    );
    _size = Tween<double>(begin: 50, end: 30).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bouncing Ball Demo')),
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Stack(
            children: [
              Positioned(
                bottom: _height.value,
                left: MediaQuery.of(context).size.width / 2 - _size.value / 2,
                child: Container(
                  width: _size.value,
                  height: _size.value,
                  decoration: BoxDecoration(
                    color: Colors.orange,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

How It Works:

AnimatedBuilder rebuilds only the animated part, improving performance.

_height uses Curves.bounceOut for a realistic bounce effect.

_size shrinks the ball as it rises, adding depth.

repeat(reverse: true) loops the animation back and forth.

Part 5: Hero Animation

For the final part, let’s create a Hero animation—a seamless transition between two screens, often used for images or icons in galleries or detail views.

Example 6: Image Transition with Hero

We’ll build a list screen with an image that, when tapped, transitions smoothly to a larger version on a detail screen.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HeroListScreen());
  }
}

class HeroListScreen extends StatelessWidget {
  final image = "https://picsum.photos/200/300";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hero Animation - List')),
      body: ListView(
        children: [
          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => HeroDetailScreen(
imageUrl : image,
heroTag : "hero_id"
)),
              );
            },
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Hero(
                tag: 'hero_id',
                child: Image.network(
                  image,
                  width: 150,
                  height: 150,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class HeroDetailScreen extends StatelessWidget {
  final String heroTag; 
  final String imageUrl;
  HeroDetailsScreen({required this.heroTag, required this.imageUrl});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hero Animation - Detail')),
      body: Center(
        child: Hero(
          tag: heroTag,
          child: Image.network(
            imageUrl,
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

How It Works:

The Hero widget wraps the image on both screens, linked by a unique tag (hero_id).

Tapping the image navigates to HeroDetailScreen, and Flutter animates the image from 150x150 to 300x300, adjusting position and scale.

The back button reverses the animation seamlessly.

Congratulations if you go to this part!

You’ve just unlocked the power of Flutter animations! Here’s how to keep going:

Experiment and try other implicit widgets like AnimatedPadding or AnimatedPositioned.

Customize the Hero animation by adding a flightShuttleBuilder property to the Hero widget for effects like rotation or fade during transitions.

Explore advanced topics by looking into PageRouteBuilder for custom page transitions or Rive for pre-designed animations.

There you have it!

You've successfully completed your crash course in Flutter animations! You’ve gone from basic boxes that grow and fade, to spinning icons, bouncing balls, and even the show-stopping Hero transition.

These skills are your toolkit to make apps that don’t just work, but wow.

Thank you for reading. Keep animating with Flutter!