Flutter interview questions for Advance

If you followed these beginner and intermediate blogs then this article will be really helpful.

What are the architectures useful in Flutter?

Several architecture patterns are commonly used for Flutter app development, including:

1. Model-View-Controller (MVC) - This is a traditional architecture pattern that separates the app into three distinct components: the model (data and logic), the view (user interface), and the controller (handles user input and updates the model and view).

2. Model-View-ViewModel (MVVM) - This is a newer architecture pattern that is becoming more popular in Flutter development. It separates the app into three components: the model (data and logic), the view (user interface), and the view model (acts as a mediator between the model and the view).

3. Clean Architecture - This architecture pattern emphasizes the separation of concerns between different layers of the app, such as the UI layer, domain layer, and data layer. It aims to make the app more modular and easier to maintain.

4. BLoC (Business Logic Component) - This architecture pattern uses streams to manage the flow of data in the app. It separates the business logic of the app from the UI layer and can help make the app more scalable.

What are the advantages of using MVVM over MVC in Flutter?

Here are some advantages of using MVVM over MVC in Flutter:

1. Separation of concerns: MVVM separates the UI logic from the business logic, which makes the code easier to understand and maintain. The ViewModel acts as an intermediary between the View and the Model, making it easier to test the UI logic and the business logic independently.

2. Testability: MVVM makes it easier to write unit tests for both the UI and the business logic. The ViewModel can be tested without needing the View, and the Model can be tested independently of the UI.

3. Reusability: With MVVM, the ViewModel can be reused across different views, making it easier to maintain and update the code. This is because the ViewModel contains the business logic, which can be reused across different views that have similar requirements.

4. Reactive programming: MVVM lends itself well to reactive programming, which is a programming paradigm that is becoming increasingly popular in app development. Reactive programming allows you to create reactive and responsive user interfaces by responding to changes in the data model.

5. Better data binding: MVVM uses a two-way data binding between the View and the ViewModel, which makes it easier to keep the UI in sync with the data model. This means that you don't have to write as much boilerplate code to keep the UI up-to-date.

In summary, while both MVVM and MVC are useful patterns for developing apps in Flutter, MVVM has some advantages over MVC when it comes to code maintainability, testability, reusability, reactive programming, and data binding.

How does BLoC architecture work?

BLoC (Business Logic Component) is an architectural pattern used in Flutter to manage the state of an application. It helps to separate the business logic from the UI, making it easier to test and maintain the code.

Here's how the BLoC architecture works:

1. Input events: In BLoC, the UI sends input events to the BLoC layer when the user interacts with the app. These events are usually simple data objects that represent what the user did (e.g., a button was pressed).

2. Business logic: The BLoC layer contains the business logic that processes the input events and updates the state of the app. This layer contains all the logic that is needed to make decisions about how to handle the user's input.

3. Output state: The BLoC layer emits the output state back to the UI layer. The output state is a simple data object that represents the new state of the app. The UI layer listens for these state changes and updates the UI accordingly.

4. Reactive programming: BLoC uses reactive programming to manage state changes. This means that the UI layer automatically updates whenever the state changes in the BLoC layer.

5. Dependency injection: BLoC makes use of dependency injection to keep the code modular and easy to test. The BLoC layer can be easily swapped out with a mock implementation for testing purposes.

Overall, BLoC is a powerful architecture that helps to manage the complexity of stateful applications. It provides a clear separation of concerns between the UI and business logic, making it easier to test and maintain the code.

What are Mixins?

Mixins are a way to reuse a class's code in multiple class hierarchies without creating a separate class inheritance chain for each use case. In programming, a mixin is a class that contains methods or properties that can be included in another class without having to inherit from that class.

In Dart, mixins are created by defining a class that extends the Object class and contains the methods or properties that will be reused. Then, instead of inheriting from that class, another class can include the mixin by using the with keyword followed by the mixin class's name.

For example, suppose we have a class called Animal with some common properties and methods shared by different types of animals:

class Animal {
  String name;
  int age;

  void eat() {
    print('The animal is eating.');
  }

  void sleep() {
    print('The animal is sleeping.');
  }
}

We can create a mixin called PetMixin that adds some properties and methods specific to pets:

mixin PetMixin {
  bool isHouseTrained;
  bool isVaccinated;

  void play() {
    print('The pet is playing.');
  }
}

Then, we can include the PetMixin in a new class called Dog:

class Dog extends Animal with PetMixin {
  // Dog-specific properties and methods
}

Now, the Dog class has access to all the properties and methods defined in both the Animal and PetMixin classes. This allows us to reuse code and create more flexible and modular class hierarchies.

Is there any other way where Mixins can be used?

Mixins can be used to add functionality to a class without the need for an inheritance, which can be useful when multiple inheritances are not supported. They are particularly useful for sharing code between classes that may not have a direct relationship with each other in the class hierarchy.

Another benefit of mixins is that they allow for code reuse without creating a separate instance of the mixin class for each use case. This can save memory and reduce the complexity of the code.

In Dart, a class can include multiple mixins by separating each mixin with a comma in the with clause. Mixins can also be composed of other mixins, allowing for even more flexibility in code reuse.

However, it's important to use mixins carefully and thoughtfully to avoid code duplication and maintain code readability. Overuse of mixins can also make the code more difficult to understand and debug.

Overall, mixins are a powerful tool in Dart that can help improve code organization, promote code reuse, and make the code more modular and flexible.

What are the types of page navigation?

In Flutter, there are several ways to navigate between screens or pages within an app. Here are the most common types of page navigation:

1. Push navigation - This is the most common type of navigation and is used to move forward to a new screen. The push method is used to add a new screen to the navigation stack, and the pop method is used to remove a screen from the stack and return to the previous screen. This type of navigation is used with the MaterialPageRoute class in a MaterialApp navigator.

2. Pop navigation - This is the opposite of push navigation and is used to go back to a previous screen. The pop method removes the current screen from the navigation stack and returns to the previous screen. This type of navigation can also be used with the CupertinoPageRoute class in a CupertinoApp navigator.

3. Modal navigation - This type of navigation is used to display a screen as a modal dialog or sheet, typically for user input or confirmation. The showDialog method is used to display the modal screen, and the Navigator.pop method is used to close the modal and return to the previous screen.

4. Named navigation - This type of navigation is used to navigate to a specific screen by name. Each screen is assigned a unique name, and the pushNamed method is used to navigate to the named screen. This type of navigation is often used with the MaterialApp navigator and can simplify navigation code by using named routes instead of class constructors.

5. Replace navigation - This type of navigation is used to replace the current screen in the navigation stack with a new screen. The pushReplacement method is used to replace the current screen with a new screen, and the pushNamedAndRemoveUntil method is used to remove all screens from the navigation stack and replace them with a new screen.

Overall, the choice of which type of navigation to use depends on the app's requirements and design. The most common types of navigation are push and pop navigation for moving forward and back through the navigation stack, modal navigation for displaying temporary screens, and named and replace navigation for more advanced navigation scenarios.

How to communicate between different widgets?

In Flutter, there are several ways to communicate between different widgets. Here are some of the most common ways:

1. Callback functions - One widget can pass a callback function to another widget, which can then be called to trigger an action. For example, a button widget can pass a callback function to a parent widget, which can then update the state of the app or trigger some other action when the button is pressed.

2. Inherited widgets - An inherited widget can pass data down to child widgets in the widget tree. This allows data to be shared across the app without the need for passing data through callback functions. Inherited widgets can be used to manage app-level state, such as user authentication data.

3. Provider package - The Provider package is a state management solution that allows widgets to share data in a more efficient and organized way. It allows widgets to access and update data stored in a central location, known as a provider. The package uses ChangeNotifier and ValueNotifier classes to manage state changes and notify dependent widgets when data changes.

4. Streams - Streams can be used to pass data between widgets asynchronously. Widgets can listen to a stream and react to changes in the data. Streams are commonly used to fetch and display data from a backend server or to update the UI in real time.

5. Global variables - Global variables can be used to store data that needs to be accessed by multiple widgets across the app. However, it's important to use global variables judiciously and avoid using them for data that should be managed by stateful widgets or other state management solutions.

Overall, the choice of which method to use for communication between widgets depends on the complexity of the app and the nature of the data being shared. Simple apps may only require callback functions, while more complex apps may benefit from using state management solutions like Provider.

How to communicate between BLoC and the page?

In Flutter, communication between a BLoC (Business Logic Component) and a page can be achieved using the StreamBuilder widget. Here are the basic steps to follow:

1. Define a Stream in the BLoC to emit data to the page. This can be done using a BehaviorSubject or a StreamController.

2. In the page, use a StreamBuilder widget to listen to the Stream and update the UI when new data is emitted. The StreamBuilder widget rebuilds the page whenever the Stream emits new data.

3. In the page, use the Sink method of the Stream to send data to the BLoC. This can be done using a callback function that is passed from the page to the BLoC.

Here's an example implementation:

In the BLoC, define a BehaviorSubject:

import 'package:rxdart/rxdart.dart';

class MyBloc {
  BehaviorSubject<String> _myStream = BehaviorSubject<String>();

  Stream<String> get myStream => _myStream.stream;

  void dispose() {
    _myStream.close();
  }
}

1. In the page, use a StreamBuilder widget to listen to the Stream and update the UI:

    import 'package:flutter/material.dart';
    import 'package:my_app/bloc/my_bloc.dart';
   
    class MyPage extends StatelessWidget {
      final MyBloc myBloc;
   
      MyPage({required this.myBloc});
   
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: StreamBuilder<String>(
            stream: myBloc.myStream,
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!);
              } else {
                return Text("No data");
              }
            },
          ),
        );
      }
    }
   

1. In the page, use a callback function to send data to the BLoC:

    import 'package:flutter/material.dart';
    import 'package:my_app/bloc/my_bloc.dart';
   
    class MyPage extends StatefulWidget {
      final MyBloc myBloc;
   
      MyPage({required this.myBloc});
   
      @override
      _MyPageState createState() => _MyPageState();
    }
   
    class _MyPageState extends State<MyPage> {
      TextEditingController _textController = TextEditingController();
   
      @override
      void dispose() {
        widget.myBloc.dispose();
        super.dispose();
      }
   
      void _sendDataToBloc() {
        String data = _textController.text;
        widget.myBloc.myStream.sink.add(data);
      }
   
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: [
              TextField(controller: _textController),
              ElevatedButton(
                child: Text("Send data"),
                onPressed: _sendDataToBloc,
              ),
            ],
          ),
        );
      }
    }
   

What is the lifecycle of a stateful widget?

The lifecycle of a StatefulWidget in Flutter consists of several stages that the widget goes through during its lifetime. These stages are:

1. creation: The widget is created by calling its constructor. This is usually done by its parent widget.

2. initState(): Once the widget is created, the initState() method is called. This method is called only once during the widget's lifetime and is used to initialize the state of the widget.

3. didChangeDependencies(): This method is called immediately after initState(), and is called whenever the widget's dependencies change. This method is typically used to fetch data or initialize resources that depend on the context of the widget.

4. build(): This is where the widget's UI is built. This method is called whenever the widget needs to be rebuilt, such as when its state changes or when it is rebuilt by its parent.

5. setState(): This method is used to update the state of the widget. When setState() is called, the framework schedules a rebuild of the widget, which calls the build() method.

6. didUpdateWidget(): This method is called whenever the widget is rebuilt, but with a different configuration. This method is used to compare the old and new configurations and perform any necessary updates to the widget's state.

7. deactivate(): This method is called when the widget is removed from the widget tree. This method can be used to clean up any resources used by the widget.

8. dispose(): This method is called when the widget is permanently removed from the widget tree. This method is used to release any resources used by the widget.

In summary, the lifecycle of a StatefulWidget consists of several stages, from creation to disposal, with various methods being called at each stage to initialize, update, and clean up the widget's state and resources.

How do you implement animations in Flutter?

class _MyAnimationState extends State<MyAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Opacity(
          opacity: _animation.value,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.blue,
          ),
        );
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

What is the difference in ListView and ListViewBuilder explain with an example?

Both ListView and ListView.builder are widgets in Flutter used to display a list of scrollable items. The main difference between the two is how they handle the creation of the list items.

A ListView widget requires the list of items to be pre-built and passed to it as a parameter. This means that all of the items in the list are built and stored in memory at once, even if they are not all visible on the screen at the same time. This approach is suitable for small lists with a fixed number of items or where the items are relatively simple and do not require much processing.

On the other hand, ListView.builder is used to build a list with an unknown number of items or where the items require more processing before being displayed. It builds only the items that are currently visible on the screen, and it creates new items as the user scrolls through the list. This approach is more efficient for larger lists, as it only builds the items that are necessary and does not store all items in memory at once.

Here is an example of how to use ListView to display a list of items:

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

In the above example, we have created a ListView widget with three ListTile children. This approach works well for small lists with a fixed number of items.

Now, let's take a look at an example of how to use ListView.builder to display a list of items:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('${items[index]}'),
    );
  },
)

In this example, we have created a ListView.builder widget with a dynamic number of items that are stored in the items list. The itemCount property specifies the number of items in the list, and the itemBuilder property is a callback that returns a ListTile widget for each item in the list. In this case, we are displaying a simple text item for each ListTile.

In summary, ListView is used for small lists with a fixed number of items, while ListView.builder is used for larger lists with an unknown number of items or where the items require more processing before being displayed.

Have you worked with Flavors, how do you make flavors in flutter?

In Flutter, flavors are used to create different versions of the same app with different configurations, such as API endpoints, app name, app icon, and other settings. Here are the steps to create flavors in Flutter:

1. Add the flutter flavor plugin to your pubspec.yaml file:

    dev_dependencies:
      flutter_flavorizr: ^1.1.1
   

2. Define your flavors in your project's root directory by creating a flavors directory with a flavors.yaml file. For example:

    flavors:
      prod:
        flavorColor: "#F44336"
        appName: "My App (Prod)"
      dev:
        flavorColor: "#2196F3"
        appName: "My App (Dev)"
   

   In this example, we have defined two flavors: prod and dev, with different app names and colors.

3. Generate the flavors by running the following command in your project's root directory:

    flutter pub run flutter_flavorizr
   

   This will generate a new directory called flavors containing a subdirectory for each flavor, along with the necessary configuration files.

4. Update your app's configuration to use the flavors. In your main.dart file, define the configurations for each flavor:

    void main() {
      // Configurations for prod flavor
      var prod = AppConfig(
        flavor: 'prod',
        appName: 'My App (Prod)',
        apiBaseUrl: 'https://api.myapp.com',
        ...
      );
   
      // Configurations for dev flavor
      var dev = AppConfig(
        flavor: 'dev',
        appName: 'My App (Dev)',
        apiBaseUrl: 'https://dev-api.myapp.com',
        ...
      );
   
      // Run the app
      runApp(MyApp(config: dev)); // or prod
    }
   

   In this example, we have defined two configurations for each flavor, with different API endpoints. The MyApp widget takes a configuration object as a parameter.

5. Finally, use the configuration object to access the different configurations in your app. For example:

    class MyHomePage extends StatelessWidget {
      final AppConfig config;
   
      MyHomePage({required this.config});
   
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(config.appName),
          ),
          body: Center(
            child: Text(config.apiBaseUrl),
          ),
        );
      }
    }
   

   In this example, we have used the config object to access the app name and API endpoint for each flavor.

That's it! You can now build and run your app with different configurations for each flavor.

How do you implement localization in Flutter?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('es', 'ES'),
        const Locale('fr', 'FR'),
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          AppLocalizations.of(context).translate('hello'),
        ),
      ),
    );
  }
}

class AppLocalizations {
  static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();

  final Map<String, String> translations;

  AppLocalizations(this.translations);

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }

  String translate(String key) {
    return translations[key] ?? '';
  }
}

class _AppLocalizationsDelegate
    extends LocalizationsDelegate<AppLocalizations> {
  const _AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'es', 'fr'].contains(locale.languageCode);
  }

  @override
  Future<AppLocalizations> load(Locale locale) async {
    final jsonString =
        await rootBundle.loadString('assets/i18n/${locale.languageCode}.json');
    final jsonMap = json.decode(jsonString);
    final translations = Map<String, String>.from(jsonMap);
    return AppLocalizations(translations);
  }

  @override
  bool shouldReload(_AppLocalizationsDelegate old) => false;
}

I hope these additional questions and code snippets help you prepare for your Flutter interview. Don't forget to practice writing code and solving problems on your own to improve your skills and confidence. Good luck!

Keep sharing🫰🏻keep learning 🙌🏻 All the best for your technicals🤘🏻