Stateless Widget

ใน React function component คือฟังก์ชันที่รับ props เข้ามาแล้ว return JSX ออกไป สิ่งที่เทียบเท่าใน Flutter คือ StatelessWidget ที่เป็น class ที่มี method build() เพียงตัวเดียว โดยรับ BuildContext เข้ามาแล้ว return Widget ออกไป โมเดลการ render เหมือนกันทุกประการ ทั้งคู่อธิบายว่า UI ควรหน้าตาเป็นอย่างไรเมื่อได้ input บางอย่าง และ framework จะรันคำอธิบายนั้นใหม่เมื่อ input เปลี่ยน

ความแตกต่างหลัก ๆ อยู่ที่ syntax เท่านั้น คือแทนที่จะเขียนฟังก์ชันคุณก็เขียน class แทน แทนที่จะ return <div> คุณก็ return Widget object แทน และแทนที่จะใช้ angle-bracket ของ JSX คุณก็ซ้อน constructor เข้าไปแทน

เปรียบเทียบแบบเคียงข้างกัน

// 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 ไม่ใช่ function StatelessWidget คือ Dart class ที่ extends StatelessWidget คุณ override build() แทนการเขียน body ของฟังก์ชันธรรมดา
BuildContext context คือ argument ตัวแรกของ build() เสมอ โดยให้คุณเข้าถึง widget tree ที่อยู่เหนือ widget ตัวนี้ (theme, locale, navigator) นักพัฒนา React มอง BuildContext เป็นส่วนผสมระหว่าง React context กับตำแหน่งของ component ใน tree ได้
const constructor การทำเครื่องหมาย constructor เป็น const ช่วยให้ Flutter ข้ามการ rebuild ได้เมื่อ input ไม่เปลี่ยน เป็นการ optimize แบบเดียวกับที่ React.memo ให้ แต่ทำงานอัตโนมัติในระดับภาษา
super.key คือสิ่งที่เทียบเท่ากับ prop key ภายในของ React ควรส่งต่อผ่าน super.key ใน constructor เสมอ เพื่อให้ Flutter ทำ reconcile widget tree ได้ถูกต้อง
ไม่มี JSX การประกอบ widget คือการเรียก constructor ของ Dart เช่น Padding(padding: ..., child: ...) ตอนแรกอาจดูยืดยาวกว่า แต่ถูก type-check เต็มรูปแบบและ IDE ช่วย autocomplete ได้

ตัวอย่างที่รันได้

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)),
        ],
      ),
    );
  }
}