Stateless Widget

In React, a function component is a function that receives props and returns JSX. Flutter’s equivalent is a StatelessWidget: a class with a single build() method that receives a BuildContext and returns a Widget. The rendering model is identical — both describe what the UI should look like given some input, and the framework re-runs the description when inputs change.

The main differences are syntax-deep: instead of a function you write a class, instead of return <div> you return Widget objects, and instead of JSX angle-brackets you nest constructor calls.

Side-by-side comparison

// React function component
function Greeting({ name }) {
  return (
    <div style={{ padding: 16 }}>
      <h2>Hello, {name}!</h2>
      <p>Welcome to Flutter for React Devs.</p>
    </div>
  );
}

// Usage
<Greeting name="Ava" />

// Flutter StatelessWidget
class Greeting extends StatelessWidget {
  final String name;
  const Greeting({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Hello, $name!',
              style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
          const Text('Welcome to Flutter for React Devs.'),
        ],
      ),
    );
  }
}

// Usage
const Greeting(name: 'Ava')

🔀 Function component → StatelessWidget

Class, not function. A StatelessWidget is a Dart class that extends StatelessWidget. You override build() instead of writing a plain function body.
BuildContext context is always the first argument of build(). It gives access to the widget tree above this widget (theme, locale, navigator). React developers can think of it as a mix of React context and the component’s position in the tree.
const constructors. Marking the constructor const lets Flutter short-circuit rebuilds when inputs have not changed — the same optimization React.memo provides, but automatic at the language level.
super.key is Flutter’s equivalent of React’s internal key prop. Always forward it via super.key in your constructors so Flutter can reconcile the widget tree correctly.
No JSX. Widget composition is Dart constructor calls: Padding(padding: ..., child: ...). It looks more verbose at first, but it is fully type-checked and IDE-autocompleted.

Runnable example

Flutter / DartOpen in DartPad ↗ (copies code)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: ProfileCard(
            name: 'Ava Tavos',
            role: 'React → Flutter Developer',
          ),
        ),
      ),
    );
  }
}

class ProfileCard extends StatelessWidget {
  final String name;
  final String role;

  const ProfileCard({super.key, required this.name, required this.role});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.08),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const CircleAvatar(radius: 36, backgroundColor: Colors.blue,
              child: Icon(Icons.person, size: 36, color: Colors.white)),
          const SizedBox(height: 12),
          Text(name,
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          const SizedBox(height: 4),
          Text(role,
              style: const TextStyle(fontSize: 14, color: Colors.grey)),
        ],
      ),
    );
  }
}