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.

Practice

1. Which programming language does Flutter primarily use for app development?

easy

A. Kotlin

B. JavaScript

C. Swift

D. Dart

Solution

1. Step 1: Identify Flutter's language

   Flutter uses Dart as its main programming language for building apps.

2. Step 2: Compare with other options

   JavaScript is used by React Native, Kotlin and Swift are for native Android and iOS development respectively.

3. Final Answer:

   Dart -> Option D

4. Quick Check:

   Flutter = Dart [OK]

Hint: Flutter always uses Dart language for coding apps [OK]

Common Mistakes:

• Confusing Flutter's Dart with React Native's JavaScript
• Thinking Flutter uses native languages like Kotlin or Swift

2. Which of the following is the correct way to create a simple button in React Native?

easy

A. alert('Hello')}>Click me

B. ElevatedButton(onPressed: () => print('Hello'), child: Text('Click me'))

C. alert('Hello')} />

D. Button('Click me', onPress: () => alert('Hello'))

Solution

1. Step 1: Recognize React Native button syntax

   React Native uses JSX syntax with <Button> component and props like title and onPress.

2. Step 2: Eliminate other options

   ElevatedButton(onPressed: () => print('Hello'), child: Text('Click me')) is Flutter syntax, C is HTML, D is invalid syntax.

3. Final Answer:

   <Button title='Click me' onPress={() => alert('Hello')} /> -> Option C

4. Quick Check:

   React Native button uses <Button title=... onPress=... /> [OK]

Hint: React Native buttons use JSX with title and onPress props [OK]

Common Mistakes:

• Using Flutter button syntax in React Native
• Confusing HTML button with React Native
• Incorrect event handler names

3. What is a key difference in UI rendering between Flutter and React Native?

medium

A. Flutter uses native UI components; React Native uses custom widgets.

B. Flutter uses a single rendering engine with widgets; React Native uses native platform components.

C. Both Flutter and React Native use native UI components directly.

D. React Native uses a custom rendering engine; Flutter uses native components.

Solution

1. Step 1: Understand Flutter's rendering

   Flutter draws UI using its own rendering engine and widgets, not native components.

2. Step 2: Understand React Native's rendering

   React Native uses native platform UI components for rendering.

3. Final Answer:

   Flutter uses a single rendering engine with widgets; React Native uses native platform components. -> Option B

4. Quick Check:

   Flutter = custom engine; React Native = native components [OK]

Hint: Flutter draws widgets itself; React Native uses native UI elements [OK]

Common Mistakes:

• Thinking Flutter uses native UI components
• Confusing React Native with Flutter rendering
• Assuming both use same rendering method

4. You wrote this Flutter code but the app crashes on start:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('Hello World')
      )
    );
  }
}

What is the likely cause?

medium

A. No error; code runs fine

B. Text widget must be inside a Center widget in Scaffold body

C. StatelessWidget requires a const constructor

D. Missing a MaterialApp widget around Scaffold

Solution

1. Step 1: Analyze Scaffold body usage

   Scaffold body can accept a Text widget directly; it does not cause a crash.

2. Step 2: Confirm no crash

   The code runs fine as is; wrapping Text in Center is optional for layout but not required to prevent crash.

3. Final Answer:

   No error; code runs fine -> Option A

4. Quick Check:

   Scaffold body accepts Text widget directly [OK]

Hint: Text widget can be used directly in Scaffold body without crash [OK]

Common Mistakes:

• Assuming MaterialApp is missing
• Thinking StatelessWidget needs const constructor
• Incorrectly assuming Text alone causes crash

5. You want your app to look exactly the same on Android and iOS with smooth animations and consistent UI. Which framework is better suited and why?

hard

A. Flutter, because it uses its own rendering engine and widgets for consistent UI

B. Flutter, because it uses JavaScript for faster development

C. React Native, because it compiles to native code for performance

D. React Native, because it uses native components for each platform

Solution

1. Step 1: Understand UI consistency needs

   To have identical UI on Android and iOS, a single rendering engine controlling UI is best.

2. Step 2: Match framework to need

   Flutter uses its own rendering engine and widgets, ensuring consistent UI and smooth animations across platforms.

3. Step 3: Eliminate wrong options

   React Native uses native components, so UI differs per platform; Flutter does not use JavaScript.

4. Final Answer:

   Flutter, because it uses its own rendering engine and widgets for consistent UI -> Option A

5. Quick Check:

   Consistent UI = Flutter's custom rendering [OK]

Hint: For identical UI on all platforms, choose Flutter [OK]

Common Mistakes:

• Choosing React Native for consistent UI
• Thinking Flutter uses JavaScript
• Confusing native components with consistent UI