ข้ามไปยังเนื้อหา
Flutter for React Developers

Everything is a Widget

ใน React เวลาที่คุณต้องการเพิ่ม spacing, จัดตำแหน่ง content หรือเรียง item เป็นแถว คุณจะนึกถึง CSS หรือ inline styles ทันที แต่ใน Flutter ไม่มี CSS ทุกสิ่งที่เกี่ยวกับการแสดงผล — padding, centering, clipping, shadows, rows, columns — ล้วนถูก express เป็น widget ในต้นไม้ นี่คือการเปลี่ยนแปลงทางความคิดที่ใหญ่ที่สุด และเมื่อคุณ “คลิก” กับแนวคิดนี้ได้ Flutter ที่เหลือก็จะตามมาได้อย่างเป็นธรรมชาติ

Layout เป็นส่วนหนึ่งของ widget tree

หัวข้อที่มีชื่อว่า “Layout เป็นส่วนหนึ่งของ widget tree”
React
// React — layout via CSS / inline styles
function UserCard({ name, role }) {
  return (
    <div style={{ padding: 16, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ fontWeight: 'bold', fontSize: 20 }}>{name}</div>
      <div style={{ color: '#666', marginTop: 4 }}>{role}</div>
    </div>
  );
}
Flutter
// Flutter — layout via widgets
class UserCard extends StatelessWidget {
  final String name;
  final String role;
  const UserCard({super.key, required this.name, required this.role});


  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(name, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
          const SizedBox(height: 4),
          Text(role, style: const TextStyle(color: Colors.grey)),
        ],
      ),
    );
  }
}
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 MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[100],
        body: Center(
          child: UserCard(
            name: 'Ava Tavos',
            role: 'React Developer → Flutter Developer',
          ),
        ),
      ),
    );
  }
}

class UserCard extends StatelessWidget {
  final String name;
  final String role;
  const UserCard({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: 32,
            backgroundColor: Colors.blue,
            child: Icon(Icons.person, size: 32, 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)),
        ],
      ),
    );
  }
}
ใน Flutter คุณเพิ่ม padding 16px รอบ widget อย่างไร?
Flutter equivalent ของ CSS display: flex + flex-direction: column คืออะไร?
Widget ใดให้ผลลัพธ์เหมือน CSS margin: auto สำหรับการจัดกึ่งกลาง?
SizedBox(height: 8) เทียบเท่ากับอะไรใน React/CSS?