Most Asked Flutter Interview Questions & Answers [2024]

Flutter is an open-source UI software development kit developed by Google and creates one of the most popular kits used among companies and developers. The more frequent the need to hire Flutter developers, the greater will be the preparation in regard to Flutter-related interview questions. This article gives some of the most frequently asked Flutter interview questions, probably serving as a guide for both beginner and experienced developers.

Basic Flutter Interview Questions

1. What is Flutter?

Flutter is an open-source engine developed by Google in May 2017. It helps developers compile natively the applications on mobile, web, and desktop from a single codebase. Flutter is not a language but an SDK. The Dart programming languages are used in Flutter apps during the development of an app.

2) What is Dart?

One of the languages is Dart. This language, developed by Google in 2011 and open source, has the goal of the Dart programming to create front-end user interface components for the web and thus for mobile applications.

Dart is a language optimized for clients and aimed at the development of fast apps on any platform. It strives to be the most productive programming language available for multi-platform development.

3. What are the advantages of using Flutter?

Some key advantages of using Flutter include:

• Fast development with hot reload
• Expressive and flexible UI
• Native performance
• Single codebase for multiple platforms

4. How do you install Flutter?

To install Flutter, follow these steps:

• Download the Flutter SDK from the official Flutter website.
• Extract the SDK to a desired location.
• Add the Flutter bin directory to your system's PATH.
• Run Flutter Doctor to check for any dependencies and to ensure everything is set up correctly.

5. What are the limitations of Flutter?

Since Flutter is still a relatively new tool, it has some limitations. They are as follows:

• The number of third-party libraries is very small
• The release size of Flutter is larger than expected
• Flutter requires to be used along with another OOP language, Dart which cannot compete with other OOP languages such as Java, C#
• Due to Flutter’s limited complexity, mobile ad platforms do not support it
• Flutter is still not used by a wide audience.

6. What are the types of widgets present in Flutter?

In Flutter, widgets can be divided into two categories:

• Stateless Widget: A widget that does nothing is a Stateless Widget. In essence, they are static and don’t store any state.   Thus, they don't save values that may change.
• Stateful Widget: A widget that does anything is a Stateful Widget. Stateful widgets are dynamic by nature, which means they can monitor changes and update the UI accordingly.

7. How do you create a new Flutter project?

To create a new Flutter project, use the following command in the terminal:

flutter create project_name

8. What are the different build modes in Flutter?

Depending on your development phase, the Flutter framework compiles your code in different build modes. Flutter's tooling allows the application to be compiled in three modes: Debug, Profile, and Release.

Debug Mode

• Purpose: Enables debugging of apps on a physical device, emulator, or simulator.
• Features: Assertions and service extensions are enabled.
• Optimization: Quick deployment is achieved by optimizing compilation.
• Command: flutter run

Profile Mode

• Purpose: Analyzes the app's performance while testing.
• Features: Some debugging abilities are maintained, with tracing and some extensions enabled. Disabled on emulators and simulators.
• Command: flutter run --profile

Release Mode

• Purpose: Used when deploying the app to minimize footprint size and maximize optimization.
• Features: Debugging, assertions, and service extensions are disabled. It offers faster startup, execution, and reduced size.
• Command: flutter run --release

9. What are the most useful editors for Flutter apps?

Flutter tools make use of plugins to code mobile phone apps. The plugins can help in Dart code compilation, analysis of the code, and development of apps. Some used Flutter tools for IDE development are

• Visual Studio
• Android Studio
• Xcode
• IntelliJ IDEA
• Eclipse
• Emacs

10. Name some apps that mostly use Flutter.

Flutter is used today by many organizations for developing apps. The following are some of the most popular apps built on Flutter:

• Google Ads
• Reflectly
• Alibaba
• Dream11
• Hamilton
• Tencent, etc.

11. Can you tell us the four main elements of Flutter?

The four main elements of Flutter are:

• Flutter engine
• Widgets
• Design-specific widgets
• Foundation Library

Intermediate Flutter Interview Questions

1. What is Flutter Architecture?

Flutter architecture is comprised of three layers:

Flutter Framework Layer: This is the highest layer in the Flutter architecture and includes the widgets and the Material Design widgets. It also includes APIs for animations, gestures, and routing.

Engine Layer: This is the core layer of the Flutter architecture that contains the rendering engine, which handles graphics and text rendering. It also includes the Skia graphics library, used to draw graphics on the screen.

Platform Layer: This is the most basic of all the layers in the Flutter architecture; it provides theta-based access to the platform's native API. It comprises plugins and packages allowing Flutter to access, and subsequently communicate with the hardware and software of the device, such as the camera, location services, and sensors.

2. Explain the Primary Axis and Cross Axis Alignment.

An alignment defines how a row or a column is aligned with respect to the horizontal or vertical axis. For example, for a row, its main axis is horizontal so its cross axis will be vertical.

• PrimaryAxisAlignment: the rows run horizontally, and the columns run vertically.
• CrossAxisAlignment: the rows run vertically, and the columns run horizontally.

3. Difference between runApp() and main() in flutter.

main()

• It is a function used to start the program.
• In Flutter, it is impossible to write any program without the main() function.

runApp()

• It is used to return the widgets that are connected to the screen as the root of the widget tree to be rendered on the screen.
• This function is called the main function and is also the driver of the app.

4. List the responsibilities of FlutterActivity.

The roles of a FlutterActivity are:

• Configuring the appearance of the status bar
• Displaying Android launch screen
• Displaying flutter splash screen
• Choosing an execution path for the Dart app bundle
• Adding transparency, which is an optional responsibility.
• Saving and restoring instance state.

5. Name the different types of grid views in Flutter.

The different types of grid views in Flutter are:

• count()
• custom()
• builder()
• extent()

6. Can you explain how to use streams and futures in Flutter? Also, tell us some similarities and differences between Future and Stream.

Streams and Futures are the two major classes in Flutter that help in handling asynchronous operations. A stream is a series of events that originate either user-generated or from the network, to which you can listen and respond in real-time. A future represents some value that is not yet available; you perform the asynchronous code, and then you get the result once it's ready.

Similarities between future and stream:

• Both work asynchronously
• Both have some potential value

Differences between future and stream:

• Future has one response whereas a stream can have multiple responses.
• Futures are used in HTTP calls.
• A Stream is a series of futures.

7. What is meant by Responsive and Adaptive apps?

Responsive:- The responsive app has had its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially important when the same app has to be able to run on everything from a watch, phone, or tablet to a laptop or desktop computer.

Adaptive:- Mouse and keyboard input and handling touch input is needed, so the adaptation of the app will have to be done on Mobile and Desktop device types respectively.

It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more.

8. What is the role of pubspec.yaml in a Flutter project?

pubspec.yaml is a configuration file for a Flutter project that specifies:

• Project dependencies.
• Assets and fonts.
• Package version.
• Metadata like project name, description, and author.

9. How does Flutter manage state?

Flutter manages the state using several approaches, including:

• Stateful Widgets: For local state management within a single widget.
• InheritedWidget: For propagating state down the widget tree efficiently.
• Provider: A wrapper around InheritedWidget to provide a more straightforward way to manage state.
• Bloc (Business Logic Component): Separates business logic from UI by using streams.
• Redux: Centralizes the app state in a single store using actions and reducers.

10. What is a mixin in Dart, and how it is used in Flutter?

A mixin class is a class with methods used by other classes without being their parent.

Usage:
Dart code
mixin Logger {

void log(String message) {

print('Log: $message');

}

}

class MyClass with Logger {

void doSomething() {

log('Doing something');

}

}

Advanced Flutter Interview Questions

1. Explain the concept of Keys in Flutter and their types.

Keys in Flutter help preserve the state of widgets when they move around the widget tree.

Types of Keys:

1. GlobalKey: Uniquely identifies a widget across the entire app and allows access to its state.

Example:

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

2. LocalKey: Used to uniquely identify widgets in the same parent.

• ValueKey: Uses a value to identify the widget.
• Example:
  
  final Key key = ValueKey("value");
  
• ObjectKey: Uses an object to identify the widget.
• Example:
  
  final Key key = ObjectKey(object);

3. UniqueKey: Creates a unique key every time it's used, ensuring the widget is always considered new.

• Example:

final Key key = UniqueKey();

2. Why do we need separate directories for iOS and Android in Flutter?

Here’s why you would need two different directories for Android and iOS files in Flutter:

Android Folder: You need an Android folder to keep files of an Android project. When any Flutter framework creates the code, the compiler converts the Flutter code into native code that is then imported to Android projects creating a native Android app.

iOS: This stores all the files for Mac projects. If you’re creating a project for the iOS platform, the iOS folder will be used. iOS apps can only be developed using the Xcode IDE and macOS in Flutter, which is why you’d need the iOS folder.

3. What is the difference between hot reload and hot restart?

In Flutter, Hot Reload is the easiest and quickest way to make any changes, create UIs, fix bugs, and add features to the app. A Hot Reload performs all these changes rapidly and makes changes in the UI without disturbing the entire app.

Here’s how to perform Hot Reload:

• Run the Flutter editor using command prompt or editor.
• Once the project is created, you can use debug mode and perform hot reload
• In windows, use “ctrl+\” to perform hot reload or using the button. For Mac devices, you can use “cmd+s” to perform hot reload. If you’re using the command prompt enter ‘r’ to run.

A Hot Restart is different from Hot Reload as it demolishes the preserved states of the app and compiles the code from scratch.
Hot Restart takes more time as compared to Hot Reload but takes less time than restart function.
Here’s how to perform Hot Restart:

• Run the editor using command prompt
• Make some changes and run the hot restart
• To start hot restart use the hot reload button or press ctrl+shift+.

4. How would you create a custom widget in Flutter, and what are its benefits?

You are going to need to create another class extending either StatefulWidget or StatelessWidget depending on whether your widget is supposed to be stateful or otherwise. Among the key advantages of creating custom widgets are reusability, encapsulation of complex logic, and better code organization.

Example code:

class Custom Widget extends Stateless Widget {

@override

Widget build(BuildContext context) {

return Container(

child: Text('Hello, World!'),

);

}

}

5. How is it possible in Flutter to implement a draggable widget?

This is how you can implement a Draggable Widget in Flutter. You can use the Draggable and DragTarget widgets. In the following, an example for creating a draggable that can be dropped on a target:

class MyDraggable extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Draggable(

child: Container(width: 50, height: 50, color: Colors.blue),

feedback: Container(width: 50, height: 50, color: Colors.blue.withOpacity(0.5)),

childWhenDragging: Container(width: 50, height: 50),

data: 'my_data',

);

}

}

class MyDrag Target extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Drag Target(

onWillAccept: (data) => true,

onAccept: (data) {

// handle drop

};

builder: (context, candidateData, rejectedData) {

return Container(width: 100, height: 100, color: Colors.grey);

};

);

}

}

6. How to make a custom animation curve in Flutter?

In order to make a custom animation curve in Flutter, a class should be created extending curve class and then one has to provide a Custom implementation of the transform method. Here is one way of creating a bounce-in curve:

import 'dart:math' as math;

import 'package:flutter/animation.dart';

class BounceInCurve extends Curve {

@override

double transform(double t) {

return -1* math.pow(2,-10*t) * math.sin((t-0.3/4)*(2*math.pi)/0.3) + 1;

}

}

In the transform method, you can use any mathematical formula to create a custom curve. In this example, we're using a mathematical formula that simulates a bounce-in effect.

Then, to use the custom curve in an animation, you can simply pass it to the curve property of the Tween class:

AnimationController(

duration: const Duration(milliseconds: 500),

ysync: this,

)..forward();

Tween<double>(begin: 0.0, end: 1.0).animate(

CurvedAnimation(

parent: controller,

curve: BounceInCurve(),

)

);

In this example, we're using the BounceInCurve as the curve property of the CurvedAnimation widget, which is then passed to the parent property of the Tween widget. This will create an animation with the bounce-in effect.

7. What do you mean by Null-aware operators?

Null-aware operators in dart allow you to make computations based on whether or not a value is null. Dart provides some useful information to handle the null values.

• The "??=" assignment operator: It assigns a value to a variable only if it is null.

int a;                          // a is initialized with null value.

a ??= 10;

print(a);                    // It will print 10.

• The "??" null-aware operator: This one computes and returns the value between two expressions. In the first step, expression 1 is checked for nullness, and if it is, its value is returned; otherwise, expression 2 is evaluated, and its value is returned.

print(5 ?? 10);            // It will print 5.

print(null ?? 10);       // It will print 10.

• The “?.” Safe Navigation Operator: It is also known as the Elvis operator. It is possible to use the ?. operator when calling a method/getter on an object, as long as the object isn't null (otherwise, the method will return null).

obj?.child?.child?.getter       //The expression returns null if obj, child1, or child2 are null. If not, the getter is called and returned.

8. What is the difference between SizedBox and Container?

SizedBox

• The SizedBox widget in Flutter has a specified size.
• In SizedBox, we cannot set the color or decoration for the widget.
• We can only use it with a child widget having a specific width or height.

Container

• The Container in Flutter is a parent widget containing multiple child widgets to manage them efficiently in width, height, padding, background color, etc.
• If we have a widget that needs some background styling may be a color, shape, or size constraint that can be wrapped in a container widget.

9. What are the different types of streams in Dart?

There are two types of streams in Dart, single subscription streams and broadcast streams.

Single Subscription Streams

• The events within a larger whole are delivered sequentially with single subscription streams.
• They are used for events that are in received matters or for reading a file.
• There is only one listener throughout the sequence to trigger the event, else the event won’t be triggered.

Broadcast Streams

• Initially, the event needs to be subscribed to by the listener, then only these streams deliver events to their subscribers and subscribers can immediately start listening to events.
• There are several listeners to events simultaneously. Besides, one can also listen to the event again even after canceling a previous subscription.

10. How to get .apk and .ipa files from Flutter?

For apk (Android) you need to run the command:

flutter build apk --release

If you want to split the apks per abi (Split Apk) then run

flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi

For ipa (iOS) you need to run the command :

flutter build ios --release

From the console

P.S. --release is optional as it is by default if you need debug build, just replace --release with --debug

you can find the released APK or IPA files form

build/app/outputs/flutter-apk/app-release.apk

Conclusion

These Flutter interview questions can help you crack the interview and get your dream job. Make sure that you not only focus on the Flutter interview questions, but you should improve your knowledge about the subject matter to understand the changing trends and gather more information.