29 Flutter Interview Questions Mobile Devs Need To Know (ANSWERED)

Flutter is an open-source UI toolkit from Google for crafting beautiful, natively compiled applications for desktop, web, and mobile from a single codebase. Flutter apps are built using the Dart programming language.

There are two types of widgets: 1. StatelessWidget : A widget that does not require mutable state. 2. StatefulWidget: A widget that has mutable state.

• The Flutter tooling supports three modes when compiling your app, and a headless mode for testing.
• You choose a compilation mode depending on where you are in the development cycle.
• The modes are: - Debug - Profile - Release

Dart is an object-oriented, garbage-collected programming language that you use to develop Flutter apps. It was also created by Google, but is open-source, and has community inside and outside Google. Dart was chosen as the language of Flutter for the following reason:

• Dart is AOT (Ahead Of Time) compiled to fast, predictable, native code, which allows almost all of Flutter to be written in Dart. This not only makes Flutter fast, virtually everything (including all the widgets) can be customized.
• Dart can also be JIT (Just In Time) compiled for exceptionally fast development cycles and game-changing workflow (including Flutter’s popular sub-second stateful hot reload).
• Dart allows Flutter to avoid the need for a separate declarative layout language like JSX or XML, or separate visual interface builders, because Dart’s declarative, programmatic layout is easy to read and visualize. And with all the layout in one language and in one place, it is easy for Flutter to provide advanced tooling that makes layout a snap.

• Widgets are basically the UI components in Flutter.
• It is a way to describe the configuration of an Element.
• They are inspired from components in React.

Widgets are important in Flutter because everything within a Flutter application is a Widget , from a simple “Text” to “Buttons” to “Screen Layouts”.

• State that is not ephemeral, that you want to share across many parts of your app, and that you want to keep between user sessions, is what we call application state (sometimes also called shared state).
• Examples of application state: - User preferences - Login info - Notifications in a social networking app - The shopping cart in an e-commerce app - Read/unread state of articles in a news app

• main () function came from Java-like languages so it's where all program started, without it, you can't write any program on Flutter even without UI.
• runApp() function should return Widget that would be attached to the screen as a root of the Widget Tree that will be rendered.

Stateless : Widget state creates ONLY ONCE, then it can update values but not state explicitly. That's why it has only one class which extends with StatelessWidget. They can never re-run build() method again.

Stateful : Widgets can update their STATE (locally) & values multiple times upon event triggered. That's the reason, the implementation is also different. In this, we have 2 classes, one is StatefulWidget & the other is it's State implementation handler i.e. State<YourWidget>. So if I say, they can re-run build() method again & again based on events triggered.

• A StatelessWidget will never rebuild by itself (but can from external events). A StatefulWidget can.
• A StatelessWidget is static wheres a StatefulWidget is dynamic.

See the diagram below:

Hot Reload

• Flutter hot reload features works with combination of Small r key on command prompt or Terminal.
• 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 then Hot restart.
• There is also a draw back 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

• Hot restart is much different than hot reload.
• In Hot restart it destroys the preserves 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 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.

Required Parameters

Dart required parameters are the arguments that are passed to a function and the function or method required all those parameters to complete its code block.

findVolume(int length, int breath, int height) {
 print('length = $length, breath = $breath, height = $height');
}

findVolume(10,20,30);

Optional Parameters

• Optional parameters are defined at the end of the parameter list, after any required parameters.
• In Flutter/Dart, there are 3 types of optional parameters: - Named - Parameters wrapped by { } - eg. getUrl(int color, [int favNum]) - Positional - Parameters wrapped by [ ]) - eg. getUrl(int color, {int favNum}) - Default - Assigning a default value to a parameter. - eg. getUrl(int color, [int favNum = 6])

There are two kinds of streams. 1. Single subscription streams - The most common kind of stream. - It contains a sequence of events that are parts of a larger whole. Events need to be delivered in the correct order and without missing any of them. - This is the kind of stream you get when you read a file or receive a web request. - Such a stream can only be listened to once. Listening again later could mean missing out on initial events, and then the rest of the stream makes no sense. - When you start listening, the data will be fetched and provided in chunks.

2. Broadcast streams
   • It intended for individual messages that can be handled one at a time. This kind of stream can be used for mouse events in a browser, for example.
   • You can start listening to such a stream at any time, and you get the events that are fired while you listen.
   • More than one listener can listen at the same time, and you can listen again later after canceling a previous subscription.

Solution is:

import 'package:flutter/foundation.dart' as Foundation;

then you can use kReleaseMode like

if(Foundation.kReleaseMode){ // is Release Mode ??
	print('release mode');
} else {
	print('debug mode');
}

• Asynchronous programming in Dart is characterized by the Future and Stream classes.
• A stream is a sequence of asynchronous events. It is like an asynchronous Iterable—where, instead of getting the next event when you ask for it, the stream tells you that there is an event when it is ready.
• Streams can be created in many ways but they all are used in the same way; the asynchronous for loop( await for). E.g

	Future<int> sumStream(Stream<int> stream) async {
	  var sum = 0;
	  await for (var value in stream) {
	    sum += value;
	  }
	  return sum;
	}

• Streams provide an asynchronous sequence of data.
• Data sequences include user-generated events and data read from files.
• You can process a stream using either await for or listen() from the Stream API.
• Streams provide a way to respond to errors.
• There are two kinds of streams: single subscription or broadcast.

• Dart offers some handy operators for dealing with values that might be null.
• One is the ??= assignment operator, which assigns a value to a variable only if that variable is currently null:

	int a; // The initial value of a is null.
	a ??= 3;
	print(a); // <-- Prints 3.

	a ??= 5;
	print(a); // <-- Still prints 3.

• Another null-aware operator is ??, which returns the expression on its left unless that expression’s value is null, in which case it evaluates and returns the expression on its right:

	print(1 ?? 3); // <-- Prints 1.
	print(null ?? 12); // <-- Prints 12.

• A Key is an identifier for Widgets, Elements and SemanticsNodes.
• A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.
• Keys must be unique amongst the Elements with the same parent.
• Subclasses of Key should either subclass LocalKey or GlobalKey.
• Keys are useful when manipulating collections of widgets of the same type.
• If you find yourself adding, removing, or reordering a collection of widgets of the same type that hold some state, then, you should use a key.

• Packages allow you to import new widgets or functionality into your app.
• There is a small distinction between packages and plugins.
• Packages are usually new components or code written purely in Dart whereas plugins work to allow more functionality on the device side using native code.
• Usually on DartPub, both packages and plugins are referred to as packages and only while creating a new package is the distinction clearly mentioned.

ScopedModel and BLoC (Business Logic Components) are common Flutter app architecture patterns to help separate business logic from UI code and using fewer Stateful Widgets.

• Scoped Model is a third-party package that is not included into Flutter framework. It's a set of utilities that allow you to easily pass a data Model from a parent Widget down to its descendants. In addition, it also rebuilds all of the children that use the model when the model is updated. This library was originally extracted from the Fuchsia codebase.

• BLoC stands for Business Logic Components. It helps in managing state and make access to data from a central place in your project. The gist of BLoC is that everything in the app should be represented as stream of events: widgets submit events; other widgets will respond. BLoC sits in the middle, managing the conversation.

• In profile mode, some debugging ability is maintained—enough to profile your app’s performance.
• Profile mode is used when you want to analyze performance.
• Profile mode is disabled on the emulator and simulator, because their behavior is not representative of real performance.
• On mobile, profile mode is similar to release mode, with the following differences: - Some service extensions, such as the one that enables the performance overlay, are enabled. - Tracing is enabled, and tools supporting source-level debugging (such as DevTools) can connect to the process.
• Profile mode for a web app means that: - The build is not minified but tree shaking has been performed. - The app is compiled with the dart2js compiler.
• The command flutter run --profile compiles to profile mode.

• Use release mode for deploying the app, when you want maximum optimization and minimal footprint size.
• Use release mode when you are ready to release your app.
• For mobile, release mode (which is not supported on the simulator or emulator), means that: - Assertions are disabled. - Debugging information is stripped out. - Debugging is disabled. - Compilation is optimized for fast startup, fast execution, and small package sizes. Service extensions are disabled.
• Release mode for a web app means that: - The build is minified and tree shaking has been performed. - The app is compiled with the dart2js compiler for best performance.
• The command flutter run --release compiles to release mode.
• You can compile to release mode for a specific target with flutter build <target>.

• Functions are first class objects in Dart and can be passed as parameters to other functions.
• We pass a function to a widget essentially saying, “invoke this function when something happens”.
• Callbacks using interfaces like Android (<Java 8) have too much boilerplate code for a simple callback.

Java Functions are first class objects in Dart and can be passed as parameters to other functions.callback:

button.setOnClickListener(new View.OnClickListener() {  
    @override  
    public void onClick(View view) {  
      // Do something here  
    }  
  }  
);

(Notice that this is only the code for setting up a listener. Defining a button requires separate XML code.)

Dart equivalent:

FlatButton(  
  onPressed: () {  
    // Do something here  
  }  
)

(Dart does both declaration as well as setting up the callback.) This becomes much cleaner and organised and helps us avoid unnecessary complication.