Flutter in one lesson: how it compares

You are learning React Native with Expo, but you will hear about Flutter in every mobile conversation, and interviewers like to ask how they compare. This lesson gives you enough Flutter to read it, compare it fairly, and choose between the two for a project. It does not teach Flutter fully.

Flutter is Google's toolkit for building apps for Android, iOS, web and desktop from one codebase. You write in the Dart language. Dart looks like a mix of Java and JavaScript, so it takes a few days to feel comfortable if you know either.

The main idea: Flutter does not use the phone's built-in buttons and text fields. It draws every pixel itself with its own rendering engine. So an app looks the same on every device and version, and animations are smooth.

React Native works differently: your JavaScript describes a UI, and React Native creates the phone's real native components (a real Android TextView, for example). The app feels native by default, and updates in the phone's design come along automatically.

Check the exact current features and versions on each project's official site, as both change every few months.

Here is a counter, the "hello world" of mobile. First React Native.

Now Flutter. A widget is anything on screen: a button, a text, a layout, even padding. Widgets are nested like JSX tags. A StatefulWidget holds data that can change, and setState tells Flutter to redraw.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Counter()));

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$count', style: const TextStyle(fontSize: 32)),
            ElevatedButton(
              onPressed: () => setState(() => count++),
              child: const Text('Add'),
            ),
          ],
        ),
      ),
    );
  }
}

Same idea: state, a build function that describes the screen, and a call that triggers a redraw. Flutter is more verbose, and styling is done with widgets instead of a style object.

Native means building each platform separately with its own language and tools: Kotlin with Jetpack Compose for Android, Swift with SwiftUI for iOS. You get the best access to new platform features, the best performance control, and the most polished platform feel. The cost: two codebases and usually two skill sets.

Even in cross-platform apps, you sometimes write a little native code for a feature the framework lacks. React Native (through Expo modules) and Flutter (through platform channels and plugins) both allow this.

There is no universal winner. Teams ship great apps with all three. For a learner, the most useful question is: which one do the jobs and companies around me ask for, and which one can I start building with this week? Look at current job posts in your city for "React Native" and "Flutter" to see local demand, rather than trusting any claim from an article.

Interviewers ask "Why React Native over Flutter (or native)?" They want reasoning, not loyalty. A good answer: "Our team knows JavaScript, we can share logic with the web app, Expo speeds up builds and updates, and our app is standard screens and lists. If we needed heavy custom graphics, I would look at Flutter, and for deep platform features I would write a native module." Also be ready to explain how each renders: native components vs own engine.