DEV Community: Cristovão F.

How to Implement Video Casting in Flutter

Cristovão F. — Thu, 24 Jul 2025 02:31:43 +0000

Hey folks! Today I’ll show you how to implement a casting feature in your Flutter app —
especially useful for video apps, courses, streaming platforms, or even fitness apps, like
Netflix or YouTube.

What is Cast?

"Cast" is the ability to send media (like video or audio) from your app to another device,
such as a Chromecast-enabled TV or an AirPlay-compatible receiver. The content plays
on the external screen, while your app becomes a remote control.

How does it work?

Casting protocols work mainly in two ways:

Chromecast (Google Cast): The receiver device (usually a smart TV or dongle) runs a player and receives control commands over the network.
AirPlay (Apple): Native on Apple TVs and compatible smart TVs. iOS can also mirror the screen when casting isn't supported directly. ## Documentation and Useful Links
Cast package on pub.dev: https://pub.dev/packages/cast
Google Cast SDK Developer Docs: https://developers.google.com/cast/docs/developers
Apple AirPlay Overview: https://developer.apple.com/airplay/
flutter_to_airplay package: https://pub.dev/packages/flutter_to_airplay

How to implement it?

First, add the necessary dependencies to your pubspec.yaml:

dependencies:
 cast: ^2.1.0
 flutter_to_airplay: ^2.0.5

Then run:

flutter pub get

⚠
Important: Read the documentation for the cast package carefully — you must
configure AndroidManifest.xml, permissions, and iOS protocols as required.

Creating the Cast Service

To follow Clean Architecture, let’s encapsulate the cast logic in a service:


class VideoCastService {
  CastSession? currentSession;
  int mediaSessionId = 0;

  Result<List<CastDevice>> searchDevices() async {
    try {
      final devices = await CastDiscoveryService().search();

      return Right(devices);
    } on Exception catch (error) {
      return Left(error);
    }
  }

  Future<void> close({required CastSession session}) async {
    await session.close();
  }

  void forward10seconds(double currentTime) {
    final seekMessage = {
      "type": "SEEK",
      "mediaSessionId": mediaSessionId,
      "currentTime": currentTime + 10,
      "resumeState": "PLAY",
    };
    if (currentSession != null) {
      currentSession?.sendMessage(CastSession.kNamespaceMedia, seekMessage);
    }
  }

  void backwards10seconds(double currentTime) {
    final seekMessage = {
      "type": "SEEK",
      "mediaSessionId": mediaSessionId,
      "currentTime": currentTime - 10,
      "resumeState": "PLAY",
    };

    if (currentSession != null) {
      currentSession?.sendMessage(CastSession.kNamespaceMedia, seekMessage);
    }
  }

  void stopSession() {
    if (currentSession != null) {
      currentSession?.sendMessage(
        CastSession.kNamespaceMedia,
        {"type": "STOP", "mediaSessionId": mediaSessionId},
      );
    }
    currentSession = null;
  }

  void playMedia() {
    if (currentSession != null) {
      currentSession?.sendMessage(
        CastSession.kNamespaceMedia,
        {
          'type': "PLAY",
          'mediaSessionId': mediaSessionId,
        },
      );
    }
  }

  void setVolume({
    required bool isMuted,
  }) {
    if (currentSession != null) {
      currentSession?.sendMessage(CastSession.kNamespaceReceiver, {
        'type': "SET_VOLUME",
        'volume': {"muted": isMuted},
      });
    }
  }

  void pauseMedia() {
    if (currentSession != null) {
      currentSession?.sendMessage(CastSession.kNamespaceMedia, {
        'type': 'PAUSE',
        'mediaSessionId': mediaSessionId,
      });
    }
  }

  Future<void> connect({
    required CastDevice device,
  }) async {
    currentSession = await CastSessionManager().startSession(
      device,
      const Duration(minutes: 30),
    );

    launchDefaultMediaApp();
  }

  Stream<CastSessionState>? listenToStateStream() =>
      currentSession?.stateStream;

  Stream<Map<String, dynamic>>? listenToMessageStream() =>
      currentSession?.messageStream;

  void launchDefaultMediaApp() {
    if (currentSession != null) {
      currentSession?.sendMessage(CastSession.kNamespaceReceiver, {
        'type': 'LAUNCH',
        'appId': 'CC1AD845', // Default media device
      });
    }
  }

  void getMediaStatus() {
    if (currentSession != null) {
      currentSession?.sendMessage(
        CastSession.kNamespaceMedia,
        {"type": "GET_STATUS"},
      );
    }
  }

  void getReceiverStatus() {
    if (currentSession != null) {
      currentSession?.sendMessage(
        CastSession.kNamespaceMedia,
        {"type": "GET_STATUS"},
      );
    }
  }

  Future<void> openMedia({required VideoCastParams params}) async {
    final message = {
      'contentId': params.url,
      'contentType': 'video/dash',
      'streamType': 'BUFFERED',
      'metadata': {
        'type': 0,
        'metadataType': 0,
        'title': params.title,
        'images': [
          {
            'url': params.thumb,
          }
        ]
      }
    };

    if (currentSession != null) {
      await Future.delayed(const Duration(seconds: 5), () {
        currentSession?.sendMessage(CastSession.kNamespaceMedia, {
          'type': 'LOAD',
          'autoPlay': true,
          'currentTime': 0,
          'media': message,
        });
      });
    }
  }
}

You can inject this service using GetIt, Riverpod, or any other DI solution and Create a Cubit or a bloc to consume it, also using a enum to simplify the flow of use for that.

AirPlay support (iOS)

As a fallback for iOS, when Google Cast is not supported, we can use

flutter_to_airplay.

Displaying the AirPlay button:

AirPlayRoutePickerView(
 tintColor: Colors.white,
 activeTintColor: Colors.blue,
 backgroundColor: Colors.transparent,
)

This widget displays the native system button, opening the AirPlay or screen mirroring
interface.

Fallback: Native screen mirroring (iOS)

If the device doesn’t support AirPlay directly, the AirPlayRoutePickerView lets users
enable screen mirroring instead — ensuring your video is still shown.
✅ Tip: You can listen to the CastService stream to detect when casting starts or stops,
and adapt your UI accordingly (e.g., hiding local controls or changing the player view).

Conclusion

With the cast and flutter_to_airplay packages, you can implement a complete
casting experience on Flutter — supporting both Google Cast and AirPlay on iOS. Even
though Flutter doesn't natively handle all media controls, this solution gives you great
flexibility.
To make your app more robust, consider:

Showing visual feedback when connected.
Centralizing media controls (play, pause, seek).
Displaying a casting icon in your app bar. If you want the full example or have questions, feel free to reach out on Instagram @kiustudios or comment below!

[Boost]

Cristovão F. — Thu, 10 Apr 2025 00:41:32 +0000

Cristovão F.

Apr 10 '25

Some of my projects

#flutter #portfolio #mobile

Comments

1 min read

Some of my projects

Cristovão F. — Thu, 10 Apr 2025 00:38:54 +0000

Hey everyone! 👋

I wanted to share a quick post to give you all a better idea of what I’ve been building lately! 🚀 Here’s a list of some of my projects from the past few years — whether personal projects, client work, or apps I’ve contributed to. Check out the links and, if possible, I’ll drop some screenshots too! 😁

And there’s a lot more over on my GitHub! They might not be live apps, but they’re open-source if you want to take a look:

👉 https://github.com/CristovoXDGM

If you're into tech, mobile development, or just curious about my journey, feel free to connect! I’m always down to share experiences, ideas, or even collaborate on cool projects. 🚀✨

You can also follow me here on dev.to, and on my other platforms for more updates:

🧩 GitHub
📸 Instagram @kiustudios

Let’s build cool stuff together! 💡

Discover the Secrets of Effective Learning

Cristovão F. — Thu, 29 Aug 2024 01:23:02 +0000

Hey everyone,

I’m bringing you a topic that I believe is crucial, especially for those who are just starting out in the field. Having worked in the technology industry for several years now, I can say this to anyone who is just beginning or planning to enter this field: always study and stay updated. It may sound obvious, but it’s absolutely essential in our line of work.

When I talk about "learning to learn," I don't just mean studying for the sake of it. It’s about studying with purpose, truly understanding what you’ve studied, and discovering your own learning style. Each person will develop or adopt a study method, whether it’s through writing, making videos, reading and repeating the content, or sharing the knowledge you’ve gained.

"Your most dissatisfied customers are your best source of learning." – Bill Gates

As odd as it may sound, this quote makes a lot of sense, especially because it’s from our mistakes that we learn the most. We understand our learning process, identify areas to improve, learn how to seek out content, and figure out what to study. All of this comes with time. Of course, learning efficiently is key, so here are some tips that I follow whenever I need to master something new.

Tips for Effective Learning
I won’t go into too much detail, so I’ll keep these tips concise:

Choose a Study Technique: Find a method that works for you. Personally, I prefer sharing knowledge and creating practical projects to reinforce what I want to learn.
Read Books: Never underestimate the power of reading. It broadens our horizons and deepens our knowledge.
Create Your Own Roadmap: Have a clear vision of where you want to go in your career, how you want to evolve, and what you want to achieve in the future.
Watch Videos from Industry Professionals: Influences matter. Learn from those who are actively working in the field. Even juniors can offer valuable insights.
Accept Different Perspectives: There’s no absolute truth for everything. Be open to understanding other opinions and approaches to the problems or content you’re studying.
Avoid Comparisons: Comparing yourself to others, especially to someone with over 11 years of experience, is a quick way to stall your progress. Focus on your own journey.
Teach and Share: Sharing knowledge is the best way to identify your mistakes and improve, as it forces you to understand the subject deeply enough to explain it to others.
Focus on One Thing at a Time: Don’t rush to learn everything at once. Take your time, as there will be phases where studying becomes repetitive.
Build Projects: In the tech field, having a portfolio and personal projects is vital. Use these projects as opportunities to gain experience.
Finish What You Start: Completing a project, even if it’s not perfect, is essential for designing better ones in the future. Learn from your mistakes and keep improving.
Know When to Rest: Resting is crucial for consolidating what you’ve learned. It’s not about playing games or watching movies, but taking a shower, going for a walk, or even taking a nap.

I’m not here to be a coach; I just want to share this knowledge because I believe it’s essential for everyone. If you've made it this far, don't forget to follow me here and on my other social networks.

@kiustudios - Instagram, YouTube, and Twitter

Make flutter builds easier

Cristovão F. — Thu, 06 Jun 2024 13:45:30 +0000

The joy of the Service pattern and Dependency inversion

Cristovão F. — Sat, 04 May 2024 02:41:21 +0000

I believe that every Dev has come across the situation of needing to do something and having to look for something ready to solve their problem, such as libs and database packages, external services that seek to facilitate our day-to-day lives as developers.
Eventually the Dev will come across an update that breaks the current code to use a new implementation or etc. For small projects, this doesn't have such an impact, but for large projects, it can cost you your job or hours of time updating and hoping that something doesn't break in the process.

For this we have a Project Pattern and a rule that helps a lot, they are the Service pattern and the Depency inversion of solid, together they help us to make a structure that allows us to scale the system and not depend on packages or external changes, only ours.

I don't intend to put the whole pattern here to encourage you to study it, but believe me, it's very worthwhile. My recommendation is always Uncle Bob's book and the refactoring guru's website. Finally, studying solid will help you understand more about it.

Site mentioned:
https://refactoring.guru/

How to create a similar to Google maps pan an a zoom movement in Flutter flame

Cristovão F. — Sun, 11 Feb 2024 01:42:03 +0000

Hello everyone, how are you? Here I am with another mini-tutorial that I learned in my day-to-day work. Recently, we needed a camera movement in our app similar to what Google does in Google Maps, and since we are using Flutter and, in conjunction, Flame, there wasn't much material available on this. So, with this challenge in mind, I researched extensively and tested various possibilities until one day I decided to try ScaleDetector and Pandetect from Flame. I discovered that ScaleDetector was nothing more than a superset of PanDetector.

In summary, we were able to create the solution, and here I am to document this code for you.

Note: Remember to check the Flutter Flame documentation to implement everything correctly, using the ScaleDetector mixin.

Flame doc -> https://docs.flame-engine.org/

void clampZoom() {
    camera.viewfinder.zoom = camera.viewfinder.zoom.clamp(0.8, 5);
  }

  static const zoomPerScrollUnit = 0.01;
  late double startZoom;
  @override
  void onScaleStart(info) {
    startZoom = camera.viewfinder.zoom;
  }

  @override
  void onScaleUpdate(ScaleUpdateInfo info) {
    final currentScale = info.scale.global;
    if (!currentScale.isIdentity()) {
      camera.viewfinder.zoom = startZoom * currentScale.y;
      camera.moveBy(info.delta.global);
      clampZoom();
    } else {
      final delta = -info.delta.global;
      camera.moveBy(delta);
    }
  }

I would also like to thank Lukas (@spydon ), who has been doing an excellent job in the development of Flame and its community.

What is use for work as a developer - Basic Flutter setup

Cristovão F. — Sat, 27 Jan 2024 17:09:50 +0000

Mobile Dev Roadmap

Cristovão F. — Thu, 07 Sep 2023 13:49:12 +0000

Programming Foundation

Get a clear idea of what an algorithm is.
Learn the difference between data, information, knowledge, and intelligence.
Understand the basics of programming logic.
Explore common data structures.
Get familiar with databases (both relational and non-relational) at a basic level.
Learn how RESTful APIs work (GraphQL is a nice extra if you want).
Dive into Object-Oriented Programming (OOP), especially if your language focuses on it.
Study some design patterns.
Understand the SOLID principles (like Single Responsibility, Open/Closed, and the others).
Get to know the idea of Clean Code and why it matters for writing maintainable code.

Choose Your Development Stack

Pick your mobile programming language (like Swift for iOS or Kotlin for Android).
Learn the language well — its syntax and core concepts.
Choose a framework for mobile development (like SwiftUI for iOS or Flutter for cross-platform).
Understand how the app lifecycle works on your chosen platform.
Learn how to style components and build user interfaces.
Practice breaking your code into components and modules.
Check out the design guidelines for your platform (like Material Design for Android or Human Interface Guidelines for iOS).
Get the basics of state management (like Flutter's State Management or Android's ViewModels).
Explore reactive programming with things like Streams and Observables (depending on your platform).
Spend time reading the official docs for your language and framework.
Build small projects to practice and solidify what you’ve learned.

Architecture and Beyond

Start digging into mobile architecture patterns (like MVVM, MVP, MVC, and Clean Architecture).
Go deeper into Clean Architecture and how to use it in real projects.
Keep improving your Clean Code skills — naming things right, refactoring, following best practices.
Learn more design patterns (like Singleton, Observer, and Factory).
Get a good sense of UX/UI principles to make your apps feel intuitive and smooth.
Master layouts on your platform (like ConstraintLayout on Android or SwiftUI layouts on iOS).
Make sure your app works well on different devices and screen sizes (responsiveness and adaptability).
Learn about accessibility so your app is usable for everyone.
Level up your state management skills with advanced tools (like Redux, MobX, or Provider).
Stay up to date with what's happening in mobile development — join communities, attend events, and take courses.

And remember:

Mobile development is always changing. Stay curious, keep learning, and tweak your roadmap as new tech and tools come out. That’s how you stay ahead!

Resolve your routes

Cristovão F. — Tue, 16 May 2023 11:29:56 +0000

There are times when we want to work with a login feature and need to create different routes based on the user's status, redirecting them to the registration page or even identifying a user with a bonus. In these cases, we often place the code directly on the page and send the user to the appropriate route based on their state or status.

class AuthState {
  final bool isAuthenticated;

  AuthState(this.isAuthenticated);
}

void main() {
  final authState = AuthState(isAuthenticated: false);

  String initialRoute;
  if (authState.isAuthenticated) {
    initialRoute = '/home';
  } else {
    initialRoute = '/login';
  }

  runApp(MyApp(initialRoute: initialRoute));
}

However, this is not always the best solution because, depending on the number of routes, the logic in the view can become extensive and unwieldy if there is no standard or pattern in place. With this in mind, we can consider a solution to the problem, something that allows for unit testing if necessary.

We will create a simple abstraction using generic types, where we will have a method that returns the route string. The method's return can be an enum of routes or something similar, as long as we have control over it.

abstract class RouteResolver<T> {
  String resolveRoute(T states);
}

With our abstraction created, let's now implement our Resolver by module. This way, we separate the logic from the view, allowing us to inject our resolver as a dependency or, for simpler cases, instantiate it on the page where we need to use it.

class AuthState {
  bool isAuthenticated;

  AuthState(this.isAuthenticated);
}

class AuthRouteResolver implements RouteResolver<AuthState> {
  @override
  String resolveRoute(AuthState states) {
    if (states.isAuthenticated) {
      return '/home';
    } else {
      return '/login';
    }
  }
}

Instantiating our route resolver.

void main() {
  final authState = AuthState(isAuthenticated: true);

  final routeResolver = AuthRouteResolver();
  final initialRoute = routeResolver.resolveRoute(authState);

  runApp(MyApp(initialRoute: initialRoute));
}

I believe this is a simple solution to a common problem. Of course, there are other ways to work with routes. In this particular case, we are working based on a state, status, or even a class type, hence the importance of using generic types. To better understand the topic discussed here, I recommend reading about clean architecture, clean code, and code refactoring.

Mastering Conventional Commits: A Guide to Consistent and Clear Commit Messages

Cristovão F. — Sun, 26 Feb 2023 03:45:25 +0000

Let's say you're a software development team working on a codebase. Clear and consistent commit messages are essential to keep track of changes over time. However, maintaining a standardized format for commit messages can be challenging when multiple developers are involved. Without a consistent standard, it can be harder to understand the context and impact of each change. That's where Conventional Commits come in. They provide a naming convention that makes it easier to understand the changes made and their purpose. In this post, we'll explore what Conventional Commits are, why they matter, and how to use them in your development workflow.

Conventional Commits is a commit message naming convention that focuses on providing a consistent standard for commits in a source code repository. The goal is to make it easier to read and interpret changes made to a project, helping understand what was changed and the impact of those changes.

The convention follows a specific pattern of message prefixes that indicate the nature of the change and its intention. The prefix is followed by a descriptive text that details the change made.

The most common prefixes are:

feat: a new feature or significant improvement was added
fix: a problem was fixed
docs: changes were made to the project documentation
style: changes were made to code formatting without changing its function
refactor: the code was refactored without adding or removing functionality
test: tests were added or modified
chore: changes to files or settings that do not affect the code itself (e.g. updating dependencies)

By following this convention, it is possible to use automated tools to generate change logs, version histories, and even to perform automated deployment actions in production environments, for example.

In summary, the use of Conventional Commits is a best practice for maintaining organization and clarity in the change history of a software project, making communication between development team members and external contributors easier.

How to internationalize your Flutter app for a global audience

Cristovão F. — Thu, 23 Feb 2023 02:57:56 +0000

In today's globalized world, developing an app that caters to a diverse audience is critical. This is where internationalization comes in - the process of designing an app to support different languages, regions, and cultures. In this video, we'll show you how to internationalize a Flutter app to reach a wider audience. You'll learn the step-by-step process of integrating localization, translation, and language support in your app's user interface.

DEV Community: Cristovão F.

How to Implement Video Casting in Flutter

What is Cast?

How does it work?

How to implement it?

Creating the Cast Service

AirPlay support (iOS)

Displaying the AirPlay button:

Fallback: Native screen mirroring (iOS)

Conclusion

[Boost]

Some of my projects

Some of my projects

Discover the Secrets of Effective Learning

Make flutter builds easier

The joy of the Service pattern and Dependency inversion

How to create a similar to Google maps pan an a zoom movement in Flutter flame

What is use for work as a developer - Basic Flutter setup

Mobile Dev Roadmap

Programming Foundation

Choose Your Development Stack

Architecture and Beyond

And remember:

Resolve your routes

Mastering Conventional Commits: A Guide to Consistent and Clear Commit Messages

The most common prefixes are:

How to internationalize your Flutter app for a global audience