Wednesday, January 8, 2020

Flutter - Interview questions


Flutter interview questions

What is the Difference between Stateless and Stateful widget?
  • The Stateless widget does not require a mutable state. Stateless widgets are not dynamically changed whenever you update any value. For example, if you want to make a button or text whose title doesn't need to change dynamically, then you can create a separate widget for a button as a Stateless widget. 
  • The Stateful widget has a mutable state. It means, when you want to make something that you want to change dynamically according to how a user interacts with it, then you can use the Stateful widget. For example, if you want to change the background color of the app on the click of a button, you can make use of a Stateful widget in this case.
Read more...


What is a Widget in Flutter SDK?
  • A widget is an element of a graphical user interface (GUI) that displays information or provides a specific way for a user to interact with the operating system or an application. 
  • The Widgets are high-level objects that are used to describe any part of an application. 
Read more...

What is the difference between main() and runApp() functions in Flutter?

  • main():  is the entry point of a Dart program. This method acts as a starting point for Flutter apps as well.
  • runApp(): In this method, you can pass the instance of MaterialApp and widgets(Stateless/Stateful). such as:
    // Passing instance of widget.
    void main()=>runApp(new DeveloperLibs());
    class DeveloperLibs extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
                ...
            );
        }
    }
                         OR
    // Passing instance of MaterialApp      
    void main()=>runApp(
        MaterialApp(
           ...
        );
    );      
The hot reload feature of Flutter does not work. If you pass an instance of MaterailApp.



What is the scaffold widget in Flutter SDK?
  • A Scaffold provides a framework that implements the basic material design visual layout structure of the flutter app. It provides APIs for showing drawers, snack bars, and bottom sheets, etc. The Scaffold contains almost everything you need to create a functional and responsive app. Its constructor has the following properties that help to create app design.
    //Constructor of Scaffold
    Scaffold({
      Key key,
      this.appBar,
      this.body,
      this.floatingActionButton,
      this.floatingActionButtonLocation,
      this.floatingActionButtonAnimator,
      this.persistentFooterButtons,
      this.drawer,
      this.endDrawer,
      this.bottomNavigationBar,
      this.bottomSheet,
      this.backgroundColor,
      this.resizeToAvoidBottomPadding = true,
      this.primary = true,
    }) 
Read more...

Explain Stateful Widget Lifecycle?  or What is didUpdateWidget in Flutter?
A stateful widget has the following lifecycle stages of a widget:
  • 1. createState(): To create a stateful widget, the Flutter framework instruct to createState() method. 
  • 2. mounted(true/false): Once we create a State object, the framework mounted the State object by associating it with a BuildContext before calling initState() method.  
  • 3. initState(): This is the first method called when a stateful widget is created after the class constructor. 
  • 4. didChangeDependencies(): This method is called immediately after initState() method on the first time the widget is built. 
  • 5. build(): it shows the part of the user interface represented by the widget. 
  • 6. didUpdateWidget(Widget oldWidget): If the parent widget change configuration and has to rebuild this widget.  
  • 7. setState(): This method is called from the framework and the developer. We can change the internal state of a State object and make the change in a function that you pass to setState(). 
  • 8. deactivate(): This is called when State is removed from the widgets tree, but it might be reinserted before the current frame change is finished. 
  • 9. dispose(): This is called when the State object is removed permanently.
Read more...

What is Pubspec.yaml file in the Flutter project?
  • The pubspec.yaml file is the place where you provide all the required meta data, public and private dependencies of the Flutter project. The Pubspec.yaml file written in YAML(Yaml Ain’t Markup Language). 
  • When we want to use Assets/Images from the local app directory then we have to put the Assets/Images folder path in Pubspec.yaml file to notify the project that we have included some new folders in it.
Example: Pubspec.yaml

What are Global Keys?
  • With the help of global keys, we can uniquely identify child widgets. The Global keys must be globally unique across the entire widget hierarchy. A global key can be used to retrieve the associated state of a widget.
  • Global keys are relatively expensive. If you don't need any of the features. Then we should consider Keys, ValueKey, ObjectKey, or UniqueKey instead of Global keys.

How can we debug the Flutter user interface?

The Flutter framework provides us lots of flags to debug UI of mobile all. Some flags are here:
void main() {
  debugPaintSizeEnabled = false;
  debugPaintBaselinesEnabled = false;
  debugPaintLayerBordersEnabled = false;
  debugPaintPointersEnabled = false;
  debugRepaintRainbowEnabled = false;
  debugRepaintTextRainbowEnabled = false;
  debugCheckElevationsEnabled = false;
  debugDisableClipLayers = false;
  debugDisablePhysicalShapeLayers = false;
  debugDisableOpacityLayers = false;
  runApp(PageApp());
}


When to use WidgetsBindingObserver?
This class send us notifications for many system and app changes. Here, we have some functions of this class:

  • didPopRoute(): This method is invoked in Android application when the user press the back button. 
  • didChangeLocales(…): This method is invoked when the sytem notify the app that the user change the system’s language settings. 
  • didChangeAppLifecycleState(…): This method is invoked when the system puts the app in the background or foreground.

Difference between HotRestart and Hot Reload?
Hot Reload:
  • The hot reload work with the combination of Small r key on command prompt or Terminal. 
  • Hot reload quickly compile the newly added code in our file and sent the code to Dart Virtual Machine after that the Code Dart Virtual Machine update the app UI with widgets. 
  • Hot Reload takes less time then Hot restart. 
  • There is also a drawback in Hot Reload, If you are using States in your application then Hot Reload preservers the States.
Hot Restart:
  • Hot restart destroys the preserves State value and set them to their default. So if you are using state value in your application then after every hot restart the developer gets fully compiled application and all the states will set to their defaults.
  • The app widget tree is completely rebuilt with a new typed code. 
  • Hot Restart takes much higher time than Hot reload.

 
Share:

0 comments:

Post a Comment

We're Social