DEV Community: Mostafa Ead

Auto-Generate Flutter Translations

Mostafa Ead — Mon, 03 Nov 2025 20:51:03 +0000

Stop forgetting to regenerate your Flutter translations! 🚀

I got tired of manually running dart run intl_utils:generate every time I edited my .arb translation files. So I automated it with a simple file watcher script.

How to use it:
Just run this command in your terminal:

dart run scripts/watch_translations.dart

The script will watch your lib/l10n directory and automatically regenerate translations whenever you modify any .arb file.

Here's the implementation:

import 'dart:io';

void main() async {
  final l10nDir = Directory('lib/l10n');

  if (!l10nDir.existsSync()) {
    print('Error: lib/l10n directory does not exist');
    exit(1);
  }

  print('Watching for changes in lib/l10n/*.arb files...');
  print('Press Ctrl+C to stop\n');

  // Watch the directory
  await for (final event in l10nDir.watch()) {
    if (event.path.endsWith('.arb') && event.type == FileSystemEvent.modify) {
      print('Detected change in: ${event.path}');
      print('Generating translations...');

      final result = await Process.run(
        'dart',
        ['run', 'intl_utils:generate'],
        runInShell: true,
      );

      if (result.exitCode == 0) {
        print('✓ Translations generated successfully\n');
      } else {
        print('✗ Error generating translations:');
        print(result.stderr);
      }
    }
  }
}

What it does:
✅ Monitors the lib/l10n directory for changes to .arb files
✅ Detects when translation files are modified
✅ Automatically runs the translation generation command
✅ Provides clear feedback on success or failure

Now I can edit translation files and the generated code updates automatically. No more manual steps or missed regenerations.

The script uses Dart's built-in Directory.watch() API to monitor file system events. It's lightweight, runs in the background, and has been a huge time-saver.

Sometimes the best solutions are the simplest ones that remove friction from your workflow.

Flutter #Dart #MobileDevelopment #DeveloperProductivity #Automation #FlutterDev #Coding #SoftwareDevelopment

Understanding Concurrency in Dart: A Deep Dive

Mostafa Ead — Sun, 15 Oct 2023 11:43:30 +0000

Introduction

Concurrency is a fundamental aspect of modern software development, enabling applications to perform multiple tasks simultaneously. Dart, the language behind the popular Flutter framework, offers robust support for concurrent programming. In this post, we'll explore how Dart handles concurrency, focusing on its unique Isolate model.

Async/Await: The Basics

Before diving into isolates, it's essential to understand Dart's async/await syntax. This feature allows you to write asynchronous code that looks almost like synchronous code. Here's a quick example:

Future<void> fetchData() async {
  var data = await someAsyncFunction();
  print("Data fetched: $data");
}

The await keyword pauses the function's execution until someAsyncFunction() completes, allowing other tasks to run in the meantime.

Future and Stream: Asynchronous Data Types

Dart uses Future and Stream objects to represent values that will be provided in the future. A Future is like a promise that will eventually complete with a value or an error. A Stream is similar but can provide multiple values over time.

Future<int> fetchInt() async {
  return 42;
}

Stream<int> countStream(int to) async* {
  for (int i = 1; i <= to; i++) {
    yield i;
  }
}

Isolates: Dart's Concurrency Model

Now, let's talk about the star of the show: Isolates. Unlike traditional shared-memory threads, each Dart isolate has its own memory heap and runs in its own thread. This design eliminates many complexities associated with shared-state concurrency, such as data races and deadlocks.

Creating an Isolate

Here's how you can create a new isolate:

import 'dart:isolate';

void foo(var message) {
  print('Isolate received: $message');
}

void main() {
  Isolate.spawn(foo, 'Hello, Isolate!');
}

Communication Between Isolates

Isolates communicate with each other using message passing. You can send simple data types like numbers, strings, and lists between isolates.

// Code for sending and receiving messages between isolates
import 'dart:isolate';

void newIsolate(SendPort mainSendPort) {
  ReceivePort newIsolateReceivePort = ReceivePort();
  mainSendPort.send(newIsolateReceivePort.sendPort);

  newIsolateReceivePort.listen((message) {
    print('Message received in new isolate: $message');
  });
}

void main() async {
  ReceivePort mainReceivePort = ReceivePort();
  Isolate.spawn(newIsolate, mainReceivePort.sendPort);

  SendPort? newIsolateSendPort = await mainReceivePort.first;

  newIsolateSendPort?.send('Hello from main isolate');
}

Conclusion

Dart's approach to concurrency, especially its use of isolates, offers a robust and straightforward way to write concurrent programs. Whether you're building a CPU-intensive computation or a responsive UI, Dart has got you covered.

Integration of Machine Learning Models in Flutter: A Comprehensive Guide

Mostafa Ead — Wed, 11 Oct 2023 11:35:14 +0000

Introduction

Flutter has been a game-changer in the mobile development world, offering a rich set of features for creating beautiful and functional apps. But what if you want to take your Flutter app to the next level by integrating machine learning (ML) models? This article aims to guide you through the process, considering the latest Flutter documentation.

Prerequisites

Basic understanding of Flutter and Dart
Familiarity with Machine Learning concepts
Flutter SDK installed and set up

Why Integrate Machine Learning in Flutter?

Machine learning can enhance your Flutter app in various ways:

Personalization: Tailor user experiences based on their behavior.
Automation: Automate tasks like sorting, tagging, and filtering.
Enhanced Features: Add capabilities like image recognition, language translation, and more.

Steps to Integrate ML Models in Flutter

Step 1: Choose the Right ML Model

Before you start coding, decide what kind of ML model suits your needs. You can either train a model from scratch or use pre-trained models.

Step 2: Convert the Model to a Mobile-Friendly Format

If your model is not in a mobile-friendly format like .tflite for TensorFlow Lite, you'll need to convert it. Tools like TensorFlow Lite Converter can help.

Step 3: Add Dependencies

Add the necessary dependencies to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  tflite: ^latest_version

Run flutter pub get to install the packages.

Step 4: Import the Model into Your Project

Place your .tflite model in the assets folder and update the pubspec.yaml:

flutter:
  assets:
    - assets/my_model.tflite

Step 5: Load the Model

Import the TFLite package and load your model:

import 'package:tflite/tflite.dart';

void loadModel() async {
  await Tflite.loadModel(
    model: "assets/my_model.tflite",
  );
}

Step 6: Make Predictions

Use the model to make predictions:

void makePrediction(input) async {
  var output = await Tflite.runModelOnFrame(
    bytesList: input,
  );
  print(output);
}

Step 7: Dispose of the Model

Don't forget to dispose of the model when you're done:

void disposeModel() {
  Tflite.close();
}

Example: Image Classification App

Here's a simple example of an image classification app in Flutter:

import 'package:flutter/material.dart';
import 'package:tflite/tflite.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

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

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

class ImageClassifier extends StatefulWidget {
  @override
  _ImageClassifierState createState() => _ImageClassifierState();
}

class _ImageClassifierState extends State<ImageClassifier> {
  File? _image;
  List? _output;

  @override
  void initState() {
    super.initState();
    loadModel().then((value) {
      setState(() {});
    });
  }

  loadModel() async {
    await Tflite.loadModel(
      model: 'assets/model.tflite',
      labels: 'assets/labels.txt',
    );
  }

  classifyImage(File image) async {
    var output = await Tflite.runModelOnImage(
      path: image.path,
      numResults: 2,
      threshold: 0.5,
      imageMean: 127.5,
      imageStd: 127.5,
    );
    setState(() {
      _output = output;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Classifier'),
      ),
      body: Container(
        child: Column(
          children: [
            _image == null ? Container() : Image.file(_image!),
            SizedBox(height: 20),
            _output == null ? Text('') : Text('${_output![0]['label']}')
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          var image = await ImagePicker().pickImage(source: ImageSource.gallery);
          if (image == null) return;
          setState(() {
            _image = File(image.path);
          });
          classifyImage(_image!);
        },
        child: Icon(Icons.image),
      ),
    );
  }
}

Conclusion

Integrating machine learning models into your Flutter app can significantly enhance its capabilities. The process is straightforward, thanks to Flutter's flexibility and the power of TensorFlow Lite. Happy coding!

I hope you found this guide useful. If you have any questions or suggestions, feel free to leave a comment below.

Mastering Physics-based Animation in Flutter

Mostafa Ead — Tue, 10 Oct 2023 19:11:30 +0000

Hello, Flutter developers and enthusiasts! 👋

Animations are a crucial part of modern UI/UX design. They can make your app feel alive, guide user interactions, and enhance the overall user experience. While traditional animations are great, Physics-based Animations offer a whole new level of realism and interactivity. Today, let's dive deep into this fascinating topic. 🚀

Why Physics-based Animation?

Natural Motion

Physics-based animations simulate real-world behavior, making them feel more natural and intuitive.

User Engagement

These animations respond to user interactions, offering a dynamic and engaging user experience.

Flexibility

Unlike traditional animations, physics-based animations are not bound by a fixed timeline, offering more flexibility in how they can be controlled.

Key Classes in Flutter 🛠️

Flutter provides several classes for creating physics-based animations:

1. SpringSimulation

Simulates the motion of a spring. It requires parameters like stiffness, damping, and initial conditions.

import 'package:flutter/physics.dart';

final SpringDescription spring = SpringDescription(
  mass: 1,
  stiffness: 100,
  damping: 1,
);

final SpringSimulation simulation = SpringSimulation(spring, 0, 1, 0);

2. GravitySimulation

Simulates motion under the influence of gravity.

import 'package:flutter/physics.dart';

final GravitySimulation simulation = GravitySimulation(
  0.1, // acceleration
  0,   // starting point
  100, // end point
  0,   // initial velocity
);

3. FrictionSimulation

Simulates the motion of an object subject to friction.

import 'package:flutter/physics.dart';

final FrictionSimulation simulation = FrictionSimulation(
  0.1, // friction coefficient
  0,   // initial position
  1,   // initial velocity
);

Implementing Physics-based Animation

Here's a simple example using SpringSimulation:

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

class PhysicsBasedAnimation extends StatefulWidget {
  @override
  _PhysicsBasedAnimationState createState() => _PhysicsBasedAnimationState();
}

class _PhysicsBasedAnimationState extends State<PhysicsBasedAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController.unbounded(vsync: this)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanEnd: (details) {
        _runAnimation(details.velocity.pixelsPerSecond.dx);
      },
      child: Container(
        color: Colors.blue,
        width: _controller.value,
        height: 100,
      ),
    );
  }

  void _runAnimation(double velocity) {
    final simulation = SpringSimulation(
      SpringDescription(
        mass: 1,
        stiffness: 1,
        damping: 1,
      ),
      _controller.value,
      300, // end position
      velocity,
    );

    _controller.animateWith(simulation);
  }

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

Conclusion 🎯

Physics-based animations offer a way to create more interactive and realistic animations. Understanding how to use Flutter's physics-based animation classes can significantly enhance the user experience of your apps.

Given your goal to be one of the best software developers and your interest in Flutter, mastering physics-based animations could be a valuable addition to your skill set. Feel free to share your thoughts, experiences, and questions in the comments below. Let's learn and grow together! 🌱

Flutter #PhysicsBasedAnimations #UserExperience #MobileDevelopment #SoftwareEngineering

Unlocking the Power of Advanced Animations in Flutter

Mostafa Ead — Tue, 10 Oct 2023 18:58:49 +0000

Hello, Flutter enthusiasts and fellow developers! 👋

As we all know, animations can make or break a user's experience with an app. While basic animations are great for simple interactions, advanced animations can truly set your app apart. Today, I want to delve into the world of Advanced Animations in Flutter and explore how they can elevate your apps to the next level. 🚀

Why Advanced Animations Matter

Animations are not just visual flair; they serve a functional purpose. They guide user interactions, provide immediate feedback, and contribute to a memorable user experience. Advanced animations allow for more complex and engaging interactions, which can be a key differentiator for your app in a crowded marketplace.

Tools for Advanced Animations 🛠️

1. Flare

Flare is an incredible tool for vector animations that allows real-time manipulation. It's perfect for creating intricate animations that can be controlled programmatically.

2. Rive

Rive is another powerful platform for creating interactive animations that respond to various triggers like user input or app events. It's excellent for adding a layer of interactivity to your animations.

3. CustomPaint

For those who like to get their hands dirty with custom drawing and animation logic, CustomPaint provides the canvas for your imagination.

Key Concepts in Advanced Animations 📚

1. Physics-based Animation

Flutter offers classes like SpringSimulation and GravitySimulation to simulate real-world behavior in your animations.

import 'package:flutter/physics.dart';

final SpringDescription spring = SpringDescription(
  mass: 1,
  stiffness: 100,
  damping: 1,
);

final SpringSimulation simulation = SpringSimulation(spring, 0, 1, 0);

2. Staggered Animations

Staggered animations allow you to create a sequence of animations with varying durations and delays.

import 'package:flutter/material.dart';

// Inside your build method
return TweenSequence([
  TweenSequenceItem(
    tween: Tween(begin: 0.0, end: 100.0),
    weight: 1,
  ),
  TweenSequenceItem(
    tween: Tween(begin: 100.0, end: 200.0),
    weight: 2,
  ),
]).animate(yourAnimationController);

3. AnimatedBuilder & AnimatedWidget

These widgets give you more control over the animation lifecycle.

// Using AnimatedBuilder
AnimatedBuilder(
  animation: yourAnimationController,
  builder: (context, child) {
    return Transform.rotate(
      angle: yourAnimationController.value,
      child: child,
    );
  },
  child: YourChildWidget(),
);

// Using AnimatedWidget
class YourAnimatedWidget extends AnimatedWidget {
  // Implement your build method here
}

4. Tween Sequences

Combine multiple tweens to create complex animations.

final Animation<double> animation = TweenSequence<double>([
  TweenSequenceItem<double>(
    tween: Tween<double>(begin: 0, end: 1),
    weight: 50,
  ),
  TweenSequenceItem<double>(
    tween: Tween<double>(begin: 1, end: 0),
    weight: 50,
  ),
]).animate(yourAnimationController);

Tips for Mastering Advanced Animations 🌟

Plan Ahead: Before diving into code, sketch out your animation flow and identify the keyframes.
Optimize: Use RepaintBoundary to isolate widgets that need to be redrawn during the animation. This can significantly improve performance.
Test Extensively: Always test your animations on multiple devices and screen sizes to ensure consistent behavior.

Real-world Applications 🌍

1. E-commerce

Smooth transitions between product listings and detailed views can enhance the shopping experience.

2. Gaming

Advanced animations can create more immersive experiences, especially when they are physics-based.

3. Data Visualization

Interactive charts and graphs can make data more accessible and easier to understand.

Conclusion 🎯

Advanced animations can significantly enhance your Flutter apps, making them more intuitive and enjoyable. As a Flutter developer, understanding the intricacies of advanced animations is crucial for delivering top-notch products.

Given your goal to be one of the best software developers, diving into advanced topics like this can be a game-changer. I hope you find this guide useful, and I'm eager to see the amazing animations you'll create in your next Flutter project!

Feel free to share your thoughts, experiences, and questions in the comments below. Let's learn and grow together! 🌱

Flutter #AdvancedAnimations #UserExperience #MobileDevelopment #SoftwareEngineering