DEV Community: Cristovão F.

Responsive Flutter without a single package — and what building it with AI actually taught me

Cristovão F. — Tue, 25 Aug 2026 21:07:34 +0000

I built my portfolio in Flutter Web with one hard rule: no responsive package, no responsive_builder, no sizer, nothing. Just MediaQuery and LayoutBuilder, by hand. I also built most of it pairing with an AI coding agent (Claude Code). Those two choices ended up teaching me something neither would have taught me alone.

The theory, in two sentences

Responsive and adaptive aren't the same thing. Responsive means the UI adjusts its own positioning to the space it has. Adaptive means the UI picks a different layout or input method for that space — a tablet choosing a side rail over a bottom nav bar, for instance. A hand-rolled system needs to do both, and Flutter gives you exactly two primitives to work with: MediaQuery and LayoutBuilder.

They answer different questions. MediaQuery.sizeOf(context) tells you the size of the whole app window — global truth, cheap to read if you only need size (that's why sizeOf exists instead of the heavier MediaQuery.of, which subscribes to the entire MediaQueryData and rebuilds on every field, not just the one you read). LayoutBuilder tells you the constraints of the specific parent in the tree where you placed it — the true answer when a widget isn't full-window width, which in practice is most widgets past the root scaffold.

What actually got built

An enum instead of scattered breakpoint numbers:

enum ScreenSize {
  mobile, tablet, desktop, wide;

  bool get isDesktopUp => index >= ScreenSize.desktop.index;

  T pick<T>({required T mobile, T? tablet, T? desktop, T? wide}) {
    return switch (this) {
      ScreenSize.mobile => mobile,
      ScreenSize.tablet => tablet ?? mobile,
      ScreenSize.desktop => desktop ?? tablet ?? mobile,
      ScreenSize.wide => wide ?? desktop ?? tablet ?? mobile,
    };
  }
}

pick is the whole trick. Only mobile is required — everything above inherits from the tier below unless overridden. That single method replaced every if (width > 768) ... else if (width > 1024) ... chain across the codebase with screen.pick(mobile: 16, desktop: 24).

The breakpoints themselves are just constants — tablet: 720, desktop: 1024, wide: 1440 — and a spacing scale (4, 8, 16, 24, 32, 48, 96) so no magic number ever gets typed twice.

The one non-obvious layout problem: a card grid where rows need equal height, but Wrap doesn't know what a "row" is — it just flows. The fix is building rows explicitly and wrapping each one in IntrinsicHeight with Row(crossAxisAlignment: stretch), then padding the last row with empty SizedBoxes so leftover cards don't stretch to fill space alone. It's a two-pass layout (IntrinsicHeight measures twice), which is expensive on a huge list — irrelevant here, since the content is static and rendered once.

Where the AI pairing actually helped — and where it didn't

Claude Code was fast at generating the pick-based breakpoint calls across a dozen sections once the pattern existed, and good at catching redundant const after a refactor moved code between const and non-const contexts. That's real, useful acceleration.

What it did not do reliably: notice that its own generated code was visually broken. At one point, a light-mode pass hardcoded a dark hex value straight into the hero section instead of pulling it from the palette. flutter analyze was clean. The types checked. The build succeeded. It looked completely fine — as a diff. It was only visibly wrong: dark text painted over a cream background, unreadable, in exactly the mode meant to be the polished "default" of the design system.

Static analysis has no opinion on contrast. It doesn't know what your background color is at runtime, doesn't render a frame, doesn't know "cream" and "ink" are supposed to be different things. The bug only exists as pixels — and pixels are the one artifact an AI reading a diff never sees unless someone forces the loop to include them.

The fix wasn't more prompting. It was a screenshot, taken at the actual breakpoint width, in the actual failing mode — a discipline copied straight from CI visual regression testing: cheap headless browser, fixed device metrics, before/after comparison, done automatically instead of trusted by eye. Once that step existed in the workflow, the category of bug stopped shipping.

The actual takeaway

AI is a legitimate accelerator for writing the mechanism of responsive layout — the enum, the pick calls, the constants, the boilerplate that used to be tedious to keep consistent across twelve files by hand. It is not a substitute for looking at the rendered result at the breakpoints that actually matter. flutter analyze passing means the code is valid Dart. It says nothing about whether the layout works — and neither, it turns out, does an AI's confidence that it does.

If you're pairing with an AI agent on UI work, the one habit worth keeping non-negotiable: verify with a real screenshot at real widths, every time, regardless of how clean the diff looks. That's not a limitation specific to AI-written code — it was always true of your own code too. AI just makes it easier to forget, because the diff reads so plausibly.

Flutter Web is invisible to Google (and nobody warns you)

Cristovão F. — Sun, 23 Aug 2026 22:00:51 +0000

I published my portfolio in Flutter Web, sent the link to a few people on LinkedIn, and noticed two strange things:

Sharing the link on WhatsApp generated no preview card — just the raw link.
Searching my own name on Google didn't surface a single line of the site's content.

The cause is the same for both, and it's kind of obvious once you understand it: Flutter Web, on its default renderer (CanvasKit), draws everything on a <canvas>. There's no <h1>, no <p>, no text at all in the DOM. For the visitor's browser, nothing changes — they see the app running smoothly, with all the responsiveness and animation you wrote in Dart. But for anything that only reads HTML — Google's crawler, the bot that generates WhatsApp link previews, a screen reader without semantics support — the page is, literally, a blank screen with a <canvas> tag inside it.

You can confirm this in 10 seconds:

curl -s https://your-site.netlify.app/ | grep -c "your name"
# 0

Zero. It doesn't matter how much text you wrote inside a Text() widget — none of it becomes a character in the HTML the server actually serves.

What actually fixes this

There's no magic switch that makes Flutter render to the DOM instead (there was an HTML renderer, but it's been deprecated and had its own visual-fidelity problems). The realistic path is accepting that the app runs on canvas and complementing index.html with what a crawler needs, without depending on Dart to generate it.

1. A block of real text, hidden visually — not with display: none.

This part matters: display: none and visibility: hidden have historically been associated with keyword stuffing, and search engines tend to discount or ignore that content. The correct technique is the same one used for years for accessibility — the sr-only class:

#seo-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

The content stays in the DOM, takes up zero space on screen, and isn't treated as cloaking — as long as it's the same content the page actually has, just in plain text. In my case, it's literally the same text that Flutter's Semantics tree already exposes to screen readers: name, role, summary, experience, skills. It's a genuine win-win — the same block improves both accessibility and indexability.

2. Complete Open Graph and Twitter Card tags, including a fixed-size og:image (1200×630). Without this, every link you send falls flat with no preview — and that's the kind of thing that decides whether someone clicks or scrolls past.

3. JSON-LD with schema.org/Person. It's not text for a human to read — it's a structured block that tells Google "this is a person, their role is X, their site is Y":

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Your Name",
  "jobTitle": "Mobile Software Engineer",
  "url": "https://yoursite.com/",
  "sameAs": ["https://linkedin.com/in/..."]
}
</script>

4. robots.txt and sitemap.xml. Sounds obvious, but on a fresh project scaffolded with flutter create, neither comes by default — and without them you have no way to tell Google to crawl the page for the first time.

The practical result

After these changes, the same curl that used to return zero lines now shows the full content — because it's there, in plain HTML, before any JavaScript runs:

curl -s https://your-site.netlify.app/ | grep -c "your name"
# 1

And the link, when pasted into any app, now comes with an image, title, and description.

None of these four things require touching a single line of Dart. It's all in web/index.html and the static files next to it — which makes sense, because the problem was never the app. It was what exists (or doesn't) before the app even loads.

If you've got a portfolio or product running on Flutter Web, it's worth running that curl right now. There's a good chance the result is zero.

Cristovao Farias

Flutter vs React Native — what changes once you've shipped both

Cristovão F. — Sun, 23 Aug 2026 21:58:45 +0000

"Flutter or React Native?" is the question every mobile dev eventually gets asked. After more than 6 years shipping production apps — including real projects in both, not just tutorials — I've landed on an answer that isn't about which framework is "better" in the abstract. It's about what each one costs you day to day.

The difference that matters most: who draws the screen

Both follow declarative UI, but they get there through very different paths.

React Native uses JSX and resolves the interface by bridging over to native components — the same mental model as someone coming from web front-end.

Flutter has no bridge: it draws its own widget tree directly, with Dart compiling to native code. That shows up in practice — no bridge latency, no "this library doesn't have a native binding for this RN version."

The classic "hello world" already makes this visible:

// React Native
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello world!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default App;

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

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

It's not just fewer lines — it's fewer moving parts in transit. In React Native, styling, layout, and the native component behind it live in three different places that need to agree with each other. In Flutter, it's all the same tree.

Where each one gave me the most trouble

I worked with React Native on products ranging from a smart home app (sensor control, 3D visualization) to virtual reality projects. The recurring friction wasn't writing the logic itself — it was every time the app needed something RN didn't cover natively: that's when it turns into a native module, into debugging Swift/Kotlin underneath a JS abstraction, into Fast Refresh — which is supposed to be fast — turning into a noticeably slower rebuild cycle than Flutter's Hot Reload.

With Flutter, the friction moves elsewhere: less "this library doesn't support that," more "I need to write this native integration myself via a platform channel" — which takes more upfront setup, but fewer surprises later.

Differences that matter in practice

	Flutter	React Native
Compilation	To native code	Bridge/JSI to native components
Language	Dart	JavaScript/TypeScript + JSX
UI customization	Full control, own widget library	Depends on the native component behind it
Dev-time reload	Hot Reload	Fast Refresh
Native integration	Platform channels, more upfront setup	Native modules, more third-party dependency

What I'd actually recommend

Starting a new project today: I go with Flutter, no hesitation. The predictability of owning the entire rendering tree pays off the Dart learning curve — especially as the app grows and maintenance starts to matter more than initial setup.

That's not saying React Native is a bad choice — entire teams (Meta, Airbnb for a while, Discord) prove it scales. It's saying that, in my track record, the maintenance cost paid off more on the Flutter side than the learning cost paid off on the RN side.

The right question isn't "which framework is better." It's "which friction would I rather pay: learning Dart now, or depending on someone else's native module later?"

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

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!

DEV Community: Cristovão F.

Responsive Flutter without a single package — and what building it with AI actually taught me

The theory, in two sentences

What actually got built

Where the AI pairing actually helped — and where it didn't

The actual takeaway

Flutter Web is invisible to Google (and nobody warns you)

What actually fixes this

The practical result

Flutter vs React Native — what changes once you've shipped both

The difference that matters most: who draws the screen

Where each one gave me the most trouble

Differences that matter in practice

What I'd actually recommend

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: