Flutter vs React Native comparison - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Flutter app with a centered text.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text([1]),
        ),
      ),
    );
  }
}

Drag options to blanks, or click blank then click option'

A'Hello from Flutter!'

BHello from Flutter!

CText('Hello from Flutter!')

D"Hello from Flutter!"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing a widget instead of a string inside Text

The Text widget requires a string inside quotes. Option A correctly provides a string literal.

2fill in blank

medium

Complete the code to navigate to a new screen in Flutter using Navigator.

Flutter

Navigator.of(context).[1](MaterialPageRoute(builder: (context) => NewScreen()));

Drag options to blanks, or click blank then click option'

Areplace

Bpush

Cpop

DpopAndPushNamed

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop instead of push to navigate forward

Confusing push with popAndPushNamed

Navigator.push adds a new route to the stack, showing the new screen.

3fill in blank

hard

Fix the error in the Flutter widget tree by completing the missing widget.

Flutter

return Scaffold(
  appBar: AppBar(title: Text('Title')),
  body: [1](
    children: [
      Text('Item 1'),
      Text('Item 2'),
    ],
  ),
);

Drag options to blanks, or click blank then click option'

ACenter

BRow

CColumn

DContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container which does not accept children list

Using Center which accepts only one child

Column widget arranges children vertically, which fits the list of Text widgets.

4fill in blank

hard

Fill both blanks to create a React Native component that displays a button with a press handler.

Flutter

import React from 'react';
import { Button } from 'react-native';

export default function MyButton() {
  const handlePress = () => alert('Button pressed!');

  return <Button title=[1] onPress=[2] />;
}

Drag options to blanks, or click blank then click option'

A'Click me'

BhandlePress

C'handlePress()'

Dalert('Button pressed!')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a function call instead of a function reference to onPress

Not using quotes around the title string

The title prop needs a string, and onPress needs a function reference without calling it.

5fill in blank

hard

Fill all three blanks to create a Flutter stateful widget with a counter that increments on button press.

Flutter

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int [1] = 0;

  void [2]() {
    setState(() {
      [3]++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $[1]'),
        ElevatedButton(onPressed: [2], child: Text('Increment')),
      ],
    );
  }
}

Drag options to blanks, or click blank then click option'

Acounter

BincrementCounter

Ccount

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently

Not calling setState to update UI

The variable is named counter, the function incrementCounter updates it, and the variable counter is used inside setState.