Skip to content
Flutter for React Developers

Everything is a Widget

In React you reach for CSS or inline styles to add spacing, center content, or arrange items in a row. In Flutter there is no CSS. Every visual concern — padding, centering, clipping, shadows, rows, columns — is expressed as a widget in the tree. This is the single biggest paradigm shift, and once it clicks, the rest of Flutter follows naturally.

Layout is part of the widget tree

Section titled “Layout is part of the 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)),
        ],
      ),
    );
  }
}
In Flutter, how do you add 16px of padding around a widget?
What is the Flutter equivalent of CSS display: flex + flex-direction: column?
Which widget gives the same result as CSS margin: auto for centering?
What is SizedBox(height: 8) equivalent to in React/CSS?