Flutter Interview Questions and Answers

Junior Verbal Questions

Question 1

What’s the difference between hot reload and hot restart?

[spoiler title=”Solution”]

Hot reload maintains the app state while updating the UI almost instantaneously. Hot restart, by comparison, takes a little longer because it resets the app state to its initial conditions before updating the UI. Both of these are faster than doing a full restart, which requires recompiling the app.

When making significant changes, you need to stop and restart the app. On rare occasions, you might have to delete the app from your simulator/emulator or device and reinstall it.
[/spoiler]

Question 2

What is the difference between StatelessWidget and StatefulWidget?

[spoiler title=”Solution”]

StatelessWidget is an immutable class that acts as a blueprint for some part of the UI layout. You use it when the widget doesn’t change while displaying and, therefore, has no State.

StatefulWidget is also immutable, but it’s coupled with a State object that allows you to rebuild the widget with new values whenever calling setState(). Use StatefulWidget whenever the UI can change dynamically.

If the state becomes more complex or the same state is in two different widgets, then you should consider a more sophisticated state management solution.

You can read more about stateless and stateful widgets in the Flutter docs.
[/spoiler]

Question 3

What is the difference between WidgetsApp and MaterialApp?

[spoiler title=”Solution”]
WidgetsApp provides basic navigation. Together with the widgets library, it includes many of the foundational widgets that Flutter uses.

MaterialApp and the corresponding material library is a layer built on top of WidgetsApp and the widgets library. It implements Material Design, which gives the app a unified look and feel on any platform or device. The material library has many additional widgets that come with it.

You certainly aren’t required to use MaterialApp in your project. You can use CupertinoApp to make iOS users feel at home, or you can even build your own set of custom widgets to fit your brand.
[/spoiler]

Question 4

Can you nest a Scaffold? Why or why not?

[spoiler title=”Solution”]
Yes, you can absolutely nest a Scaffold. That’s the beauty of Flutter. You control the entire UI.

Scaffold is just a widget, so you can put it anywhere a widget might go. By nesting a Scaffold, you can layer drawers, snack bars and bottom sheets.

[/spoiler]

Question 5

When is it appropriate to use packages, plugins or third-party dependencies?

[spoiler title=”Solution”]
Packages and plugins are great for saving you time and work. There’s no need to solve a complex problem yourself when someone else has done it already, especially if the solution is highly rated.

On the other hand, there’s also a danger of being too reliant on third party packages. They can break, have bugs or even be abandoned. When you need to switch to a new package down the road, you might have to make huge changes to your code.

That’s why it’s important to isolate packages from your core business logic. You can do that by creating an abstract Dart class that acts as an interface for the package. Once you’ve set up that kind of architecture, all you have to do to switch packages is to rewrite the concrete wrapper class that implements your interface.
[/spoiler]

Intermediate Written Questions

Question 1

You’re making a shopping app called RubberBaby, which sells dolls. Unfortunately, you’ve run into a problem on the order page. If a customer makes one order for blue dolls and another order for red dolls but then tries to delete the blue doll order, the red doll order is wrong.

Given only the following code, how would you fix the RubberBaby buggy buttons?

class OrderPage extends StatefulWidget {
  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage> {
  bool isShowing = true;
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      RaisedButton(
        child: (Text('Delete blue')),
        onPressed: () {
          setState(() {
            isShowing = false;
          });
        },
      ),
      if (isShowing) CounterButton(color: Colors.blue),
      CounterButton(color: Colors.red),
    ]);
  }
}

[spoiler title=”Solution”]

When you have a stateful widget and something about the widget tree changes, the framework compares widget types to see what it can reuse.

Since both CounterButton widgets are of the same type, Flutter doesn’t know which widget to assign the state to. That results in the red button updating with the blue button’s internal counter state.

To address this, use the key property for each widget. This property adds an ID for the widget:

CounterButton(
  key: ValueKey('red'),
  color: Colors.red,
),

By adding key, you’ve uniquely identified the red counter button and Flutter will be able to preserve its state. You can read more about using keys in the Medium article, Keys! What are they good for?.
[/spoiler]

Question 2

GitHub Jobs has an open API for querying software engineering-related job positions. The following URL returns a list of remote jobs:

https://jobs.github.com/positions.json?location=remote

Given the following simple data class, in which you only care about the company name and job title, write a function that returns a Future with a List of Jobs. You can ignore error checking for this question.

class Job {
  Job(this.company, this.title);

  final String company;
  final String title;
}

[spoiler title=”Solution”]
Since the API returns a list of JSON maps, adding a fromJson constructor to Job will make your life easier:

class Job {
  Job(this.company, this.title);

  Job.fromJson(Map<String, dynamic> json)
      : company = json['company'],
        title = json['title'];

  final String company;
  final String title;
}

There are a number of packages that you could use to make HTTP requests, but the Dart team maintains the basic http package. To use it, add the dependency in pubspec.yaml:

dependencies:
  http: ^0.12.1

You import the package and create a function to pull the data from GitHub Jobs in the background:

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<Job>> fetchJobs() async {
  final host = 'jobs.github.com';
  final path = 'positions.json';
  final queryParameters = {'location': 'remote'};
  final headers = {'Accept': 'application/json'};
  final uri = Uri.https(host, path, queryParameters);
  final results = await http.get(uri, headers: headers);
  final jsonList = json.decode(results.body) as List;
  return jsonList.map((job) => Job.fromJson(job)).toList();
}

After defining the Uri statement, you make the http.get request, which returns a JSON string.

Next, using json.decode the JSON results are parsed into a map, which is converted to a List of Job objects.

Our article, Parsing JSON in Flutter, will teach you more about using a web API, making models and more advanced JSON parsing.
[/spoiler]