Flutter Interview Questions and Answers

Flutter is a relatively new framework for building cross-platform apps, but its popularity is rapidly increasing. Employers recognize the benefits of a single code base that lets them merge two or three teams down to one. The number of jobs for Flutter developers is on the rise.

In this article, you’ll work through a series of Flutter and Dart job interview questions and answers.

If you’re a developer who’s looking for a new job, work through each of the questions below. Try to answer on your own before you look at the answer. This can help you identify areas where you can strengthen your skills.

If you’re here as a potential employer, browse through the questions to get ideas for what to ask your candidates.

Everyone else — have fun testing your own Flutter and Dart knowledge! :]

The questions are separated into three levels:

• Junior: Suitable for a junior developer in Flutter. You’re familiar with the basics, and you’ve made a few sample apps.
• Intermediate: Suitable for an intermediate developer with a strong interest in how Flutter and Dart work. You’ve read a lot and experimented even more.
• Senior: Suitable for a senior-level developer. This is someone who enjoys thoroughly exploring the Flutter framework and Dart language and knows how to manage a project.

At each level, you’ll find two types of questions:

• Written questions: Good for emailed or online programming tests, since they involve writing code.
• Verbal questions: Good to ask on a video call or in a face-to-face interview.

While you work through the questions, open your favorite IDE.

Junior Written Questions

Question 1

Given the following class:

class Recipe {
  int cows;
  int trampolines;

  Recipe(this.cows, this.trampolines);
  
  int makeMilkshake() {
    return cows + trampolines;
  }
}

Convert makeMilkshake() to a getter called milkshake using the shorthand “fat arrow” syntax.

[spoiler title=”Solution”]
If a method contains only a single line of code, you can reduce the number of lines of code by returning the result using the => syntax:

methodName(parameters) => statement;

Note that you don’t use the keyword return when using =>.

The makeMilkshake() conversion would be:

int get milkshake => cows + trampolines;

[/spoiler]

Question 2

Given the following widget:

class MyWidget extends StatelessWidget {
  final personNextToMe = 'That reminds me about the time when I was ten and our neighbor, her name was Mrs. Mable, and she said...';

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Icon(Icons.airline_seat_legroom_reduced),
      Text(personNextToMe),
      Icon(Icons.airline_seat_legroom_reduced),
    ]);
  }
}

There is a text overflow on some narrow devices:

How would you fix this?

[spoiler title=”Solution”]

Expanded(
  child: Text(
    personNextToMe,
  ),
),

Wrapping the Text widget with an Expanded widget tells Row to ignore the Text widget’s intrinsic width and assign it a width based on the remaining space in the row.

Using more than one Expanded widget in a Row, Column or Flex evenly splits the space among all the Expanded widgets. Use flex to prioritize space allocations when there’s more than one Expanded widget.

If you also used the Text widget’s overflow property, then bonus points for you.

Read more about layout constraints in the Flutter docs.
[/spoiler]

Question 3

Refactor the code below so that the children of Row will wrap to the next line when the display width is too narrow for them to fit.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Chip(label: Text('I')),
      Chip(label: Text('really')),
      Chip(label: Text('really')),
      Chip(label: Text('really')),
      Chip(label: Text('really')),
      Chip(label: Text('really')),
      Chip(label: Text('really')),
      Chip(label: Text('need')),
      Chip(label: Text('a')),
      Chip(label: Text('job')),
    ]);
  }
}

[spoiler title=”Solution”]

All you need to do is replace Row with Wrap.

Read more about the Wrap widget in the Medium article, Flutter Wrap Widget.
[/spoiler]

Question 4

You’ve declared list1 with var, list2 with final and list3 with const. What’s the difference between these keywords? Will the last two lines compile?

var list1 = ['I', '💙', 'Flutter'];

final list2 = list1;
list2[2] = 'Dart';   // Will this line compile?
  
const list3 = list1; // Will this line compile?

[spoiler title=”Solution”]
When using the var keyword, the Data type is inferred and its value can change. The following line is equivalent to the first line above, except that you explicitly declare the data type:

List<String> list1 = ['I', '💙', 'Flutter'];

With final and const, you can’t reassign a new value after the initial assignment. final values are assigned once at runtime and a const variable value has to be either known at compile time, set, or hard coded before you run your app.

The third line will compile. You’re not reassigning the list2 list itself, but changing the value of an item in the third index position (remember, indexes start with 0). Lists are mutable by default in Dart.

If you tried to do the following, though, it wouldn’t compile because you’re trying to reassign a final variable:

list2 = ['I', '💙', 'Dart'];

The fourth line will not compile because the value of list1 isn’t assigned until runtime. Read Dartlang’s article, Const, Static, Final, Oh my!, to learn more.
[/spoiler]

Question 5

Given the following class:

class Pizza {
  String cheese = 'cheddar';
}

How would you make cheese private? How would you make it a global variable? When should you use globals?

[spoiler title=”Solution”]

Prefixing a variable with an underscore _ makes it private within the library.

class Pizza {
  String _cheese = 'cheddar';
}

Dart doesn’t have the concept of class private variables. A library is generally a file and a file can contain multiple classes.

If you want to make a global variable, just move it outside of the class:

String cheese = 'cheddar';

Putting it outside the class makes it a top-level variable, which is available anywhere you import the file.

Global variables are generally frowned upon because it’s easy to lose track of what’s changing them. This makes debugging and testing difficult. However, they can be useful sometimes, like when:

• Hacking together a quick demo that you aren’t going to maintain.
• Creating Singletons to provide services like a database or network authenticator.
• Making const variables to share things like colors, dimensions, styles and themes. These types of global variables are often stored in a separate file, like constants.dart, which the libraries then import.

See the Dart language’s library and visibility documentation for more details.
[/spoiler]