Flutter interview questions and answers
Whether you are a fresher or an experienced one, it is always good to enhance your knowledge by reading/practicing interview questions and answers. This way you always know in’s and out of the tools and technology that you are working on.
Hello guys, this is CodingWithTashi and in this shitty post, we are going to discuss some of the commonly asked questions during an interview.
NOTE:
- Flutter is fairly new and there is no such standard or a good resource that you can find over the internet. Also, I am not an HR or interviewer who has experience in this field.
- I am writing this post as an interviewee since I have been working on flutter for more than 3 years and interviewed on flutter more than 10 times.
- I don’t deserve all the credit here; This is an interview compilation of my experience, Artur Fijal, and power19942 post on flutter interview questions.
- I have also added a post on dart interview questions and answers, feel free to check out here.
Medium Referral Program: If you like the experience here on medium, consider supporting me and thousands of other writers by signing up for a membership. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times!
Here are some of the most common questions that your next interview might ask. I have separated the content of each group into junior, mid and senior levels.
Note: This is not the final post, I might update this post over time-to-time base on my knowledge on flutter and your feedback/comment. So, leave a comment of question you were asked to answer during an interview and I will update the same here.
With that said, Let's start with junior level
Flutter junior-level interview question and answer
Generally, general junior/fresher are expected to have basic knowledge of the programming language.
Question
- What is flutter?
Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform applications
2. What is a widget in flutter?
Widgets are the building block of flutter applications, In flutter almost everything is a widget.
3. What are the types of flutter widgets?
There are two types of widgets namely Stateful and Stateless Widget.
4. Difference between stateless and stateful widget?
Stateless Widget A stateless widget cannot change its state during the runtime of an app which means it cannot redraw itself while the app is running. Stateless widgets are immutable.
Stateful Widget A stateful widget can redraw itself multiple times, while the app is running which means its state is mutable. For example, when a button is pressed, the state of the widget is changed
5. What is the difference between flutter and another cross-platform tool?
Flutter uses only the canvas of the native platform and draws the UI and all the components from scratch. All the UI elements look the same as the native ones. This mainly reduces the burden of time for converting from some language to the native one and speeds up the UI rendering time. As a result, the UI performance is remarkably high
6. Explain flutter architecture?
for more read here.
7. What is Dart?
Dart is a programming language used for building flutter applications.
8. What is the package?
Packages are ready made tools or libraries developed by someone else which we can use instead of reinventing.
9. What is a Spacer widget?
A “Spacer ”widget is a widget that consumes all the remaining space in a widget.
10. What is the difference between hot restart and hot reload?
Flutter hot reload features works with a combination of the Small r key on the command prompt or Terminal. The hot reload feature quickly compile the newly added code in our file and sent the code to Dart Virtual Machine. After done updating the Code Dart Virtual Machine update the app UI with widgets. Hot Reload takes less time than Hot restart. There is also a drawback in Hot Reload, If you are using States in your application then Hot Reload preservers the States so they will not update on Hot Reload our set to their default values.
Hot restart is much different from a hot reload. In Hot restart, it destroys the preserved State value and set them to their default. So if you are using States value in your application then After every hot restart the developer gets a fully compiled application and all the states will be set to their defaults. The app widget tree is completely rebuilt with new typed code. Hot Restart takes much higher time than Hot reload
11. What is a pubspec file in Dart?
The “pubspec” file manages the assets, app name, and dependencies for a Flutter app.
12. Explain async, await and Future?
Async means that this function is asynchronous, and you might need to wait a bit to get its result. Await literally means — wait here until this function is finished and you will get its return value. Future is a type that “comes from the future” and returns a value from your asynchronous function. It can complete with success(.then) or with an error(.catchError)
13. What does stateState do in flutter?
Whenever we call setState, the build method gets called. It is a good practice to avoid calling setState when we don’t need to rebuild the whole widget.
14. How would you access StatefulWidget properties from its State?
Using the widget property
15. What is the purpose of a SafeArea?
SafeArea is basically a glorified Padding widget. If you wrap another widget with SafeArea, it adds any necessary padding needed to keep your widget from being blocked by the system status bar, notches, holes, rounded corners, and other “creative” features by manufactures
16. Can we use Color and Decoration property simultaneously in the Container?
No, the color property is a shorthand for creating a BoxDecoration with a color field. If you are adding a box decoration, simply place the color on the BoxDecoration.
17. when should we use a resizeToAvoidBottomInset?
If true the body and the scaffold’s floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient MediaQuery’s MediaQueryData.viewInsets bottom property.
For example, if there is an onscreen keyboard displayed above the scaffold, the body can be resized to avoid overlapping the keyboard, which prevents widgets inside the body from being obscured by the keyboard
18. What is TextEditingController?
Whenever the user modifies a text field with an associated TextEditingController, the text field updates the value and the controller notifies its listeners.
19. Why does the flutter app take a very long developing time when we run it for the first time?
When you are going to build the Flutter app for the first time, it takes a very long time than usual because Flutter builds a device-specific IPA or APK file. In this process, the Xcode and Gradle are used to build a file, which usually takes a long time
20. Expandedvs Flexible?
While Flexible takes the minimal size required to fit the child widget and “Expanded ” takes the rest of the size in a widget.
21. What is the difference between final and const in Flutter?
final means single-assignment: A final variable or field must have an initializer. Once assigned a value, a final variable's value cannot be changed. final modifies variables.
const has a meaning that's a bit more complex and subtle in Dart. const modifies values. You can use it when creating collections, like const [1, 2, 3], and when constructing objects (instead of new) like const Point(2, 3). Here, const means that the object's entire deep state can be determined entirely at compile time and that the object will be frozen and completely immutable.
Mid-level interview question and answer
When you are experienced, you should have general knowledge about the development to deployment of applications.
This includes a basic understanding of native code as well. Examples would be Android AndroidManifest.xml, build.gradle and IOS Info.plist, pod install, etc
Question
- Explain flutter stateful life cycle?
For more read here.
2. Difference between package and plugin?
- Dart Packages: General packages written in Dart, for example, the path package. Some of these might contain Flutter-specific functionality and thus have a dependency on the Flutter framework, restricting their use to Flutter only, for example, the fluro package.
- Plugin Packages: A specialized Dart package that contains an API written in Dart code combined with one or more platform-specific implementations. Plugin packages can be written for
Android (using Kotlin or Java),iOS (using Swift or Objective-C),web,macOS,Windows, orLinux, or any combination thereof. A concrete example is the url_launcher plugin package.
3. What is animation and animation controller?
AnimationController is for how long the animation would be and how to control from time, upper and lower boundary, how to control data with time, length, sequence, etc. while AnimationTween is for the range of animation with time, color, range, sequence, etc.
4. Explain state management in flutter?
State management is as the name says managing the state of an application. The most popular package such as Provider and BLoc is used for state management.
5. What is InheritedWidget?
In flutter, the inherited widget is a base class that allows those classes to extend the information under the tree from it. Inherited widgets are also a kind of state management technique.
6. What is isolate?
To gain concurrency Dart makes use of the Isolates method which works on its own without sharing memory but uses passing or message communication.
7. What is Flutter tree shaking (flutter web)?
When compiling a Flutter web application, the JavaScript bundle is generated by the dart2js compiler. A release build has the highest level of optimization, which includes tree-shaking your code. Tree shaking is the process of eliminating dead code, by only including code that is guaranteed to be executed.
8. Why is the build() method on State and not Stateful Widget?
The reason why StatefulWidget uses a separate State class and not having “build” method inside its body is because all fields inside a Widget are immutable, and this includes all its sub-classes
9. What are the keys in Flutter and when should you use it?
If you need to differentiate between widgets by their keys, ObjectKey and ValueKey can be useful for defining how the widgets are differentiated
10. What are GlobalKeys?
GlobalKeys have two uses: they allow widgets to change parents anywhere in your app without losing state, or they can be used to access information about another widget in a completely different part of the widget tree.
11. What is aAspectRatio widget used for?
12. How is an Inherited Widget different from a Provider?
Provider basically takes the logic of InheritedWidgets but reduces the boilerplate to the strict minimum
13. Difference between these operators ?? and ?.
?? expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2.
?. Like. but the leftmost operand can be null.
14. What is the purpose of ModalRoute.of()?
ModalRoute.of() method. This method returns the current route with the arguments.
final args = ModalRoute.of(context).settings.arguments;
15. What is a vsync?
Vsync basically keeps the track of screen, so that Flutter does not render the animation when the screen is not being displayed
16. State the importance of a Ticker ?
“Ticker ”is the refresh rate of our animations. This is what we want to pause when our clock is hidden.
17. Why do we need a mixins ?
Mixins are very helpful when we want to share behavior across multiple classes that don’t share the same class hierarchy, or when it doesn’t make sense to implement such behavior in a superclass
18. When do you use the WidgetsBindingObserver?
To check when the system puts the app in the background or returns the app to the foreground
19. What are the two types of Streams available in Flutter?
Single subscription streams and Broadcast streams
20. What is a Flutter inspector?
Flutter inspector is a tool that helps in visualizing and exploring widget trees. It helps in understanding the present layout and diagnoses various layout issues
21. Stream vs Future?
The difference is that Futures are about one-shot requests/responses. whereas Streams are a continuous series of responses to a single request.
22. What’s the difference between async and async* in Dart?
while async is used in Future and async* is used in stream
23. Debug vs Profile mode?
In debug mode, the app is set up for debugging on the physical device, emulator, or simulator.
Profile In profile mode, some debugging ability is maintained — enough to profile your app’s performance. Profile mode is disabled on the emulator and simulator
24. How do you handle l10n in your apps?
Internationalization can be handled with l10n, Read here for more.
25. What is isMounted property, why is it important, and when to use it?
In an async method before using set State to see if the widget is still in the tree, otherwise, you get the exception.
26. What are “assert ”in dart?
assert statements are useful for debugging a dart project. It is used mainly in development mode. assert takes one expression and checks if it is true or false. If it is true, the program runs normally and if it is false, it stops the execution and throws one error called AssertionError.
27. How do you validate a form in Flutter?
We can validate the form using keys in a flutter. For more read here.
28. What’s a callable class?
Callable classes are those classes that contain implementations of a method called “call” and this “call” method itself is responsible for making the instance a callable instead of the calling method belonging to that instance.
Senior-level interview question and answer
When you are senior level, you should have knowledge about building plugins, how to communicate with natives, Multithreading, etc. Open source contribution is a plus.
Question
- How to communicate between dart and native?
We can communicate using MethodChannel and invoke the method for more read here.
2. How to achieve “isolate ”in flutter?
When you run a dart or flutter program, all code is executed one after another line by line in a single thread which is the main thread.
To perform parallel tasks, we can use isolate. They are two approaches to achieve “isolate”. using Spawn and compute method. For more read here.
3. What is a Platform view?
If you want to render the native view in flutter we can use platform view.
for more read here.
4. How does Flutter rendering work, I mean widget tree?
Watch this keynote.
5. Name the 3 trees. Explain the responsibilities of each tree.
Trees: Widget tree, Element tree, Render tree
Widget tree:
The documentation says: “A Widget is an immutable description of a part of a user interface”. The word immutable here is very important. This basically means that any changes we want to perform on the user interface need a new Widget to be created. Here the concept of trees comes into play. Under the hood, Flutter uses 3 instances of trees. Each one of them has slightly different purposes but combined together they allow for fast User Interface rendering and great performance.
Element tree:
Elements are mutable when compared to Widgets. It means that properties inside an element can be changed without the need of creating a new one. The documentation states that the element is: “An instantiation of a Widget at a particular location in the tree”. Element is the one who is responsible for updating the user interface, being a kind of a link between Widget and Render Object.
Render tree:
Render Object is the source of information for drawing the user interface components. Instead of looking at the tree of Widgets, Flutter looks at the tree of Render Objects. A single instance of Render Object contains all of the info about sizes, painting, and layout logic of the Widget. That makes it very expensive to create, so Flutter is trying to create a new Render Object only when necessary.
6. How do you create a custom widget?
For more in-depth, read here.
7. How do you use the extension method on flutter?
Extension methods are adding new functionality to an existing feature.
Eg. to convert a string to an integer we use int.parse('42')but with extension, we can add function like '42'.parseInt()instead of int.parse('42') .
8. What are AOT and JIT and how flutter is used?
Just in time, JIT-based fast development cycle that allows for shape-changing and stateful hot reloads in a language with types
Ahead-of-Time AOT compiler that emits efficient ARM code for fast startup and predictable performance of production deployments.
For more read here.
9. Why does flutter chooses to use dart? What are the key features of Dart?
One of the primary reasons is robust, AOT, JIT. For more read here.
10. How do use custom painting in flutter?
You can implement this by extending CustomPainter class. For more watch a video here.
11. How do you theme your app?
You can update the theme via ThemeData, We can also implement a custom theme base on our requirement. For more read here.
Note: This is not the end of post, I will actively update this post base on my knowledge and your feedback. If there is any mistake, please do let me know.
That’s all for now, Thanks guys, I hope you like this shitty post. please make sure to give a clap 👏 and leave some engagement.
If any of my shitty posts help you in any way, you can consider buying me a cup of coffee. I will personally thank you 🙏.
Check out more similar posts from CodingWithTashi. Connect me on Twitter, Linkedin
