Cross-Platform Mobile App Development Tutorial (React Native and Flutter Side by Side) - Part 1

notes-app/
├── src/
│   └── app/            // Screens: each file is a route
│       ├── _layout.tsx // Root layout (navigation container)
│       └── index.tsx   // Route "/"
├── assets/             // Static assets like images
├── app.json            // Expo configuration
├── package.json        // Project metadata and dependencies
└── tsconfig.json       // TypeScript configuration

npm run reset-project

import { StyleSheet, Text, View } from 'react-native';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

notes_app/
├── lib/            // Source code
│   └── main.dart   // Main entry point
├── pubspec.yaml    // Project configuration and dependencies
├── android/        // Android-specific code
├── ios/            // iOS-specific code
├── web/            // Web-specific code
└── test/           // Test files

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: Text(
            'Hello, Flutter!',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

import { StyleSheet, Text, View } from 'react-native';

export default function StyleDemo() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>Styled Component</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f5f5f5',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: '#3498db',
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    // Cross-platform shadow (works on iOS, Android and web)
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.25)',
  },
  text: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            color: const Color(0xFF3498DB),
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                // withValues(alpha:) replaces the deprecated withOpacity()
                color: Colors.black.withValues(alpha: 0.25),
                blurRadius: 4,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: const Center(
            child: Text(
              'Styled Component',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

import { StyleSheet, Text, View } from 'react-native';

export default function LayoutDemo() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Header</Text>
      </View>
      <View style={styles.content}>
        <Text style={styles.contentText}>Content</Text>
      </View>
      <View style={styles.footer}>
        <Text style={styles.footerText}>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  header: {
    height: 80,
    backgroundColor: '#3498db',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    justifyContent: 'center',
    alignItems: 'center',
  },
  contentText: {
    fontSize: 18,
  },
  footer: {
    height: 60,
    backgroundColor: '#2c3e50',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footerText: {
    color: 'white',
    fontSize: 16,
  },
});

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 80,
            color: const Color(0xFF3498DB),
            alignment: Alignment.center,
            child: const Text(
              'Header',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: const Color(0xFFECF0F1),
              alignment: Alignment.center,
              child: const Text('Content', style: TextStyle(fontSize: 18)),
            ),
          ),
          Container(
            height: 60,
            color: const Color(0xFF2C3E50),
            alignment: Alignment.center,
            child: const Text(
              'Footer',
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
}

notes-app/
└── src/
    ├── app/
    │   ├── _layout.tsx   // Navigation stack
    │   ├── index.tsx     // "/"        -> Home
    │   └── notes.tsx     // "/notes"   -> Notes
    ├── components/
    │   ├── NoteItem.tsx
    │   └── NoteInputModal.tsx
    └── types.ts

// src/app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Notes App' }} />
      <Stack.Screen name="notes" options={{ title: 'My Notes' }} />
    </Stack>
  );
}

flutter pub add go_router

notes_app/
└── lib/
    ├── main.dart
    ├── models/
    │   └── note.dart
    ├── screens/
    │   ├── home_screen.dart
    │   └── notes_screen.dart
    └── widgets/
        ├── note_item.dart
        └── note_input_dialog.dart

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import 'screens/home_screen.dart';
import 'screens/notes_screen.dart';

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

final _router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => const HomeScreen()),
    GoRoute(path: '/notes', builder: (context, state) => const NotesScreen()),
  ],
);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Notes App',
      theme: ThemeData(colorSchemeSeed: const Color(0xFF208AEF)),
      darkTheme: ThemeData(
        colorSchemeSeed: const Color(0xFF208AEF),
        brightness: Brightness.dark,
      ),
      routerConfig: _router,
    );
  }
}

// src/app/index.tsx
import { Link } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Notes App</Text>
      <Text style={styles.subtitle}>React Native + Expo Router</Text>

      <Link href="/notes" style={styles.link}>
        Open my notes →
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 12,
    backgroundColor: '#fff',
  },
  title: { fontSize: 32, fontWeight: 'bold' },
  subtitle: { fontSize: 16, color: '#60646c' },
  link: {
    marginTop: 16,
    padding: 12,
    fontSize: 18,
    color: '#208AEF',
  },
});

// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;

    return Scaffold(
      appBar: AppBar(title: const Text('Notes App')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          spacing: 12,
          children: [
            Text('Notes App', style: textTheme.headlineLarge),
            const Text('Flutter + go_router'),
            const SizedBox(height: 16),
            FilledButton(
              onPressed: () => context.go('/notes'),
              child: const Text('Open my notes →'),
            ),
          ],
        ),
      ),
    );
  }
}

// src/types.ts
export type Note = {
  id: string;
  title: string;
  content: string;
};

// src/app/notes.tsx
import { useState } from 'react';
import { Alert, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

import type { Note } from '../types';

export default function NotesScreen() {
  const [notes, setNotes] = useState<Note[]>([
    { id: '1', title: 'Welcome', content: 'Tap + to add a note.' },
    { id: '2', title: 'Shopping', content: 'Milk, bread, coffee.' },
  ]);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const openNew = () => {
    setEditingId(null);
    setTitle('');
    setContent('');
    setModalVisible(true);
  };

  const openEdit = (note: Note) => {
    setEditingId(note.id);
    setTitle(note.title);
    setContent(note.content);
    setModalVisible(true);
  };

  const save = () => {
    if (!title.trim()) {
      Alert.alert('Title required', 'Please enter a title.');
      return;
    }
    if (editingId) {
      // Never mutate state: create a new array
      setNotes(notes.map((n) => (n.id === editingId ? { ...n, title, content } : n)));
    } else {
      setNotes([{ id: Date.now().toString(), title, content }, ...notes]);
    }
    setModalVisible(false);
  };

  const remove = (id: string) => setNotes(notes.filter((n) => n.id !== id));

  return (
    <View style={styles.container}>
      <FlatList
        data={notes}
        keyExtractor={(note) => note.id}
        contentContainerStyle={styles.list}
        ListEmptyComponent={<Text style={styles.empty}>No notes yet.</Text>}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <Pressable style={styles.cardBody} onPress={() => openEdit(item)}>
              <Text style={styles.cardTitle}>{item.title}</Text>
              <Text numberOfLines={2}>{item.content}</Text>
            </Pressable>
            <Pressable onPress={() => remove(item.id)} hitSlop={8}>
              <Text>🗑️</Text>
            </Pressable>
          </View>
        )}
      />

      <Pressable style={styles.fab} onPress={openNew}>
        <Text style={styles.fabText}>+</Text>
      </Pressable>

      <Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>
        <View style={styles.backdrop}>
          <View style={styles.dialog}>
            <Text style={styles.dialogTitle}>{editingId ? 'Edit note' : 'New note'}</Text>
            <TextInput style={styles.input} placeholder="Title" value={title} onChangeText={setTitle} />
            <TextInput
              style={[styles.input, styles.multiline]}
              placeholder="Content"
              value={content}
              onChangeText={setContent}
              multiline
            />
            <View style={styles.actions}>
              <Pressable onPress={() => setModalVisible(false)}>
                <Text style={styles.action}>Cancel</Text>
              </Pressable>
              <Pressable onPress={save}>
                <Text style={styles.action}>Save</Text>
              </Pressable>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  list: { padding: 16, gap: 12 },
  empty: { textAlign: 'center', color: '#60646c' },
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 12,
    gap: 12,
    backgroundColor: '#f0f0f3',
  },
  cardBody: { flex: 1, gap: 4 },
  cardTitle: { fontSize: 16, fontWeight: 'bold' },
  fab: {
    position: 'absolute',
    right: 20,
    bottom: 28,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#208AEF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  fabText: { color: '#fff', fontSize: 28, lineHeight: 32 },
  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', padding: 24 },
  dialog: { backgroundColor: '#fff', borderRadius: 16, padding: 20, gap: 12 },
  dialogTitle: { fontSize: 20, fontWeight: 'bold' },
  input: { backgroundColor: '#f0f0f3', borderRadius: 8, padding: 12, fontSize: 16 },
  multiline: { minHeight: 100, textAlignVertical: 'top' },
  actions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 24 },
  action: { color: '#208AEF', fontSize: 16 },
});

// lib/models/note.dart
/// Immutable data class: to change a note, create a copy.
class Note {
  const Note({required this.id, required this.title, required this.content});

  final String id;
  final String title;
  final String content;

  Note copyWith({String? title, String? content}) =>
      Note(id: id, title: title ?? this.title, content: content ?? this.content);
}

// lib/screens/notes_screen.dart
import 'package:flutter/material.dart';

import '../models/note.dart';

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

  @override
  State<NotesScreen> createState() => _NotesScreenState();
}

class _NotesScreenState extends State<NotesScreen> {
  final List<Note> _notes = [
    const Note(id: '1', title: 'Welcome', content: 'Tap + to add a note.'),
    const Note(id: '2', title: 'Shopping', content: 'Milk, bread, coffee.'),
  ];

  Future<void> _showNoteDialog({Note? note}) async {
    final titleController = TextEditingController(text: note?.title);
    final contentController = TextEditingController(text: note?.content);

    final saved = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(note == null ? 'New note' : 'Edit note'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          spacing: 12,
          children: [
            TextField(
              controller: titleController,
              decoration: const InputDecoration(labelText: 'Title'),
            ),
            TextField(
              controller: contentController,
              decoration: const InputDecoration(labelText: 'Content'),
              maxLines: 4,
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('Cancel'),
          ),
          FilledButton(
            onPressed: () => Navigator.pop(context, true),
            child: const Text('Save'),
          ),
        ],
      ),
    );

    final title = titleController.text.trim();
    final content = contentController.text.trim();
    // NOTE: these controllers are never disposed here. Disposing them right
    // after the dialog closes would crash, because the closing animation still
    // uses them. We fix this properly in section 5.4.

    if (saved != true || title.isEmpty) return;

    setState(() {
      if (note == null) {
        _notes.insert(
          0,
          Note(id: DateTime.now().microsecondsSinceEpoch.toString(), title: title, content: content),
        );
      } else {
        final index = _notes.indexWhere((n) => n.id == note.id);
        _notes[index] = note.copyWith(title: title, content: content);
      }
    });
  }

  void _deleteNote(String id) {
    setState(() => _notes.removeWhere((n) => n.id == id));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Notes')),
      body: _notes.isEmpty
          ? const Center(child: Text('No notes yet.'))
          : ListView.builder(
              padding: const EdgeInsets.all(8),
              itemCount: _notes.length,
              itemBuilder: (context, index) {
                final note = _notes[index];
                return Card(
                  key: ValueKey(note.id),
                  child: ListTile(
                    title: Text(note.title),
                    subtitle: Text(note.content, maxLines: 2, overflow: TextOverflow.ellipsis),
                    onTap: () => _showNoteDialog(note: note),
                    trailing: IconButton(
                      tooltip: 'Delete ${note.title}',
                      icon: const Icon(Icons.delete_outline),
                      onPressed: () => _deleteNote(note.id),
                    ),
                  ),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _showNoteDialog(),
        tooltip: 'Add note',
        child: const Icon(Icons.add),
      ),
    );
  }
}

// src/components/NoteItem.tsx
import { Pressable, StyleSheet, Text, View } from 'react-native';

import type { Note } from '../types';

type Props = {
  note: Note;
  onEdit: (note: Note) => void;
  onDelete: (id: string) => void;
};

export function NoteItem({ note, onEdit, onDelete }: Props) {
  return (
    <View style={styles.card}>
      <Pressable style={styles.body} onPress={() => onEdit(note)} accessibilityRole="button">
        <Text style={styles.title}>{note.title}</Text>
        <Text numberOfLines={2}>{note.content}</Text>
      </Pressable>
      <Pressable
        onPress={() => onDelete(note.id)}
        accessibilityRole="button"
        accessibilityLabel={`Delete ${note.title}`}
        hitSlop={8}>
        <Text>🗑️</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 12,
    gap: 12,
    backgroundColor: '#f0f0f3',
  },
  body: { flex: 1, gap: 4 },
  title: { fontSize: 16, fontWeight: 'bold' },
});

// src/components/NoteInputModal.tsx
import { useState } from 'react';
import { Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

import type { Note } from '../types';

export type NoteDraft = Pick<Note, 'title' | 'content'>;

type Props = {
  visible: boolean;
  initial?: NoteDraft; // undefined = creating a new note
  onSave: (draft: NoteDraft) => void;
  onCancel: () => void;
};

export function NoteInputModal({ visible, initial, onSave, onCancel }: Props) {
  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
      {/* A different key re-creates the form, which resets its fields */}
      <Form key={initial ? initial.title + initial.content : 'new'} initial={initial} onSave={onSave} onCancel={onCancel} />
    </Modal>
  );
}

function Form({ initial, onSave, onCancel }: Omit<Props, 'visible'>) {
  const [title, setTitle] = useState(initial?.title ?? '');
  const [content, setContent] = useState(initial?.content ?? '');
  const canSave = title.trim().length > 0;

  return (
    <View style={styles.backdrop}>
      <View style={styles.dialog}>
        <Text style={styles.heading}>{initial ? 'Edit note' : 'New note'}</Text>
        <TextInput style={styles.input} placeholder="Title" value={title} onChangeText={setTitle} />
        <TextInput
          style={[styles.input, styles.multiline]}
          placeholder="Content"
          value={content}
          onChangeText={setContent}
          multiline
        />
        <View style={styles.actions}>
          <Pressable onPress={onCancel}>
            <Text style={styles.action}>Cancel</Text>
          </Pressable>
          <Pressable
            disabled={!canSave}
            onPress={() => onSave({ title: title.trim(), content: content.trim() })}
            style={{ opacity: canSave ? 1 : 0.4 }}>
            <Text style={styles.action}>Save</Text>
          </Pressable>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', padding: 24 },
  dialog: { backgroundColor: '#fff', borderRadius: 16, padding: 20, gap: 12 },
  heading: { fontSize: 20, fontWeight: 'bold' },
  input: { backgroundColor: '#f0f0f3', borderRadius: 8, padding: 12, fontSize: 16 },
  multiline: { minHeight: 100, textAlignVertical: 'top' },
  actions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 24 },
  action: { color: '#208AEF', fontSize: 16 },
});

// src/app/notes.tsx
import { useState } from 'react';
import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';

import { NoteInputModal, type NoteDraft } from '../components/NoteInputModal';
import { NoteItem } from '../components/NoteItem';
import type { Note } from '../types';

export default function NotesScreen() {
  const [notes, setNotes] = useState<Note[]>([
    { id: '1', title: 'Welcome', content: 'Tap + to add a note.' },
    { id: '2', title: 'Shopping', content: 'Milk, bread, coffee.' },
  ]);
  // null = dialog closed, 'new' = creating, a Note = editing it
  const [editing, setEditing] = useState<Note | 'new' | null>(null);

  const save = (draft: NoteDraft) => {
    if (editing === 'new') {
      setNotes([{ id: Date.now().toString(), ...draft }, ...notes]);
    } else if (editing) {
      setNotes(notes.map((n) => (n.id === editing.id ? { ...n, ...draft } : n)));
    }
    setEditing(null);
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={notes}
        keyExtractor={(note) => note.id}
        contentContainerStyle={styles.list}
        ListEmptyComponent={<Text style={styles.empty}>No notes yet.</Text>}
        renderItem={({ item }) => (
          <NoteItem
            note={item}
            onEdit={setEditing}
            onDelete={(id) => setNotes(notes.filter((n) => n.id !== id))}
          />
        )}
      />

      <Pressable
        style={styles.fab}
        onPress={() => setEditing('new')}
        accessibilityRole="button"
        accessibilityLabel="Add note">
        <Text style={styles.fabText}>+</Text>
      </Pressable>

      <NoteInputModal
        visible={editing !== null}
        initial={editing && editing !== 'new' ? editing : undefined}
        onSave={save}
        onCancel={() => setEditing(null)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  list: { padding: 16, gap: 12 },
  empty: { textAlign: 'center', color: '#60646c' },
  fab: {
    position: 'absolute',
    right: 20,
    bottom: 28,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#208AEF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  fabText: { color: '#fff', fontSize: 28, lineHeight: 32 },
});

// lib/widgets/note_item.dart
import 'package:flutter/material.dart';

import '../models/note.dart';

class NoteItem extends StatelessWidget {
  const NoteItem({
    super.key,
    required this.note,
    required this.onEdit,
    required this.onDelete,
  });

  final Note note;
  final VoidCallback onEdit;
  final VoidCallback onDelete;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(note.title),
        subtitle: Text(note.content, maxLines: 2, overflow: TextOverflow.ellipsis),
        onTap: onEdit,
        trailing: IconButton(
          tooltip: 'Delete ${note.title}',
          icon: const Icon(Icons.delete_outline),
          onPressed: onDelete,
        ),
      ),
    );
  }
}

// lib/models/note.dart (add at the end)

/// Title and content typed by the user, before an id is assigned.
typedef NoteDraft = ({String title, String content});

// lib/widgets/note_input_dialog.dart
import 'package:flutter/material.dart';

import '../models/note.dart';

/// Shows the dialog and returns the draft, or null if the user cancelled.
Future<NoteDraft?> showNoteInputDialog(BuildContext context, {Note? initial}) {
  return showDialog<NoteDraft>(
    context: context,
    builder: (_) => _NoteInputDialog(initial: initial),
  );
}

class _NoteInputDialog extends StatefulWidget {
  const _NoteInputDialog({this.initial});

  final Note? initial;

  @override
  State<_NoteInputDialog> createState() => _NoteInputDialogState();
}

class _NoteInputDialogState extends State<_NoteInputDialog> {
  late final _title = TextEditingController(text: widget.initial?.title);
  late final _content = TextEditingController(text: widget.initial?.content);

  @override
  void dispose() {
    _title.dispose();
    _content.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(widget.initial == null ? 'New note' : 'Edit note'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: [
          TextField(
            controller: _title,
            decoration: const InputDecoration(labelText: 'Title'),
            onChanged: (_) => setState(() {}), // re-evaluate the Save button
          ),
          TextField(
            controller: _content,
            decoration: const InputDecoration(labelText: 'Content'),
            maxLines: 4,
          ),
        ],
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Cancel'),
        ),
        FilledButton(
          // null disables the button
          onPressed: _title.text.trim().isEmpty
              ? null
              : () => Navigator.pop(
                    context,
                    (title: _title.text.trim(), content: _content.text.trim()),
                  ),
          child: const Text('Save'),
        ),
      ],
    );
  }
}

// lib/screens/notes_screen.dart
import 'package:flutter/material.dart';

import '../models/note.dart';
import '../widgets/note_input_dialog.dart';
import '../widgets/note_item.dart';

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

  @override
  State<NotesScreen> createState() => _NotesScreenState();
}

class _NotesScreenState extends State<NotesScreen> {
  final List<Note> _notes = [
    const Note(id: '1', title: 'Welcome', content: 'Tap + to add a note.'),
    const Note(id: '2', title: 'Shopping', content: 'Milk, bread, coffee.'),
  ];

  Future<void> _add() async {
    final draft = await showNoteInputDialog(context);
    if (draft == null) return;
    setState(() {
      _notes.insert(
        0,
        Note(
          id: DateTime.now().microsecondsSinceEpoch.toString(),
          title: draft.title,
          content: draft.content,
        ),
      );
    });
  }

  Future<void> _edit(Note note) async {
    final draft = await showNoteInputDialog(context, initial: note);
    if (draft == null) return;
    setState(() {
      final index = _notes.indexWhere((n) => n.id == note.id);
      _notes[index] = note.copyWith(title: draft.title, content: draft.content);
    });
  }

  void _delete(String id) => setState(() => _notes.removeWhere((n) => n.id == id));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Notes')),
      body: _notes.isEmpty
          ? const Center(child: Text('No notes yet.'))
          : ListView.builder(
              padding: const EdgeInsets.all(8),
              itemCount: _notes.length,
              itemBuilder: (context, index) {
                final note = _notes[index];
                return NoteItem(
                  key: ValueKey(note.id),
                  note: note,
                  onEdit: () => _edit(note),
                  onDelete: () => _delete(note.id),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: _add,
        tooltip: 'Add note',
        child: const Icon(Icons.add),
      ),
    );
  }
}