Flutter vs React Native comparison - Build Both & Compare

Build: Comparison Screen

This screen shows a simple comparison between Flutter and React Native with key points listed side by side.

Target UI

----------------------------------
| Flutter       | React Native   |
|--------------|----------------|
| Fast compile | JavaScript run |
| Uses Dart    | Uses JavaScript|
| Rich widgets | Native modules |
| Single code  | Single code    |
|--------------|----------------|

Create a screen with two columns labeled 'Flutter' and 'React Native'.

List 4 comparison points under each column.

Use simple Text widgets for labels and points.

Use a Row widget to place columns side by side.

Add padding around text for readability.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ComparisonScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter vs React Native')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          // TODO: Add two columns here
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class ComparisonScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter vs React Native')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Flutter', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                  SizedBox(height: 10),
                  Text('Fast compile'),
                  SizedBox(height: 6),
                  Text('Uses Dart'),
                  SizedBox(height: 6),
                  Text('Rich widgets'),
                  SizedBox(height: 6),
                  Text('Single codebase'),
                ],
              ),
            ),
            SizedBox(width: 24),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('React Native', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                  SizedBox(height: 10),
                  Text('JavaScript runtime'),
                  SizedBox(height: 6),
                  Text('Uses JavaScript'),
                  SizedBox(height: 6),
                  Text('Native modules'),
                  SizedBox(height: 6),
                  Text('Single codebase'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a Row to place two columns side by side. Each column is wrapped in an Expanded widget to share space equally. Inside each column, a title is shown with bold text, followed by four comparison points with spacing in between using SizedBox. Padding around the whole row improves readability. This simple layout clearly shows the differences and similarities between Flutter and React Native.

Final Result

Completed Screen

----------------------------------
| Flutter       | React Native   |
|--------------|----------------|
| Fast compile | JavaScript run |
| Uses Dart    | Uses JavaScript|
| Rich widgets | Native modules |
| Single code  | Single code    |
|--------------|----------------|

Screen shows static comparison text side by side.

No interactive elements on this screen.

Stretch Goal

Add a toggle button to switch between light and dark mode for the comparison screen.

💡 Hint

Use a StatefulWidget and ThemeMode to switch themes. Add a Switch widget in the AppBar.