diff --git a/.github/workflows/gen_content.yaml b/.github/workflows/gen_content.yaml new file mode 100644 index 0000000..a55924f --- /dev/null +++ b/.github/workflows/gen_content.yaml @@ -0,0 +1,39 @@ +name: Generate Contents + +on: + pull_request: + branches: ["main"] + push: + branches: ["main"] + +jobs: + gen-content: + runs-on: ubuntu-latest + steps: + - name: πŸ“š Git Checkout + uses: actions/checkout@v4 + with: + ref: ${{ github.head_ref }} + + - name: 🎯 Setup Dart + uses: dart-lang/setup-dart@v1 + + - name: πŸ“¦ Install Dependencies + run: dart pub get --no-example + + - name: βš™οΈ Run Scripts + run: dart run + + - name: Commit Changes (if required) + run: | + if ! git diff --quiet README.md; then + git config user.email "github-actions[bot]@users.noreply.github.com" + git config user.name "GitHub Actions [Bot]" + git add README.md + git commit -m "[auto] generate readme contents" + git push + echo "[info] README Contents updated and committed." + else + echo "[info] No changes to README Contents." + fi + working-directory: ${{ github.workspace }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3a85790 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +# https://dart.dev/guides/libraries/private-files +# Created by `dart pub` +.dart_tool/ diff --git a/README.md b/README.md index 1cb886d..d6631e1 100644 --- a/README.md +++ b/README.md @@ -1,160 +1,189 @@

Flutter Interview Questions

+
---- +## Table of Contents + +This list contains common Flutter interview questions and their answers. From basic to advanced, test your understanding of Flutter and Dart, brush up on your knowledge, or get ready for your next coding interview! Each question is linked directly to its detailed explanation, making it easy to navigate and review specific topics efficiently. + + + +| No. | Questions | Level | +| --- | :-- | :-- | +| 1 | [What is Flutter?](#what-is-flutter) | Easy | +| 2 | [What is Dart and Why does Flutter use it?](#what-is-dart-and-why-does-flutter-use-it) | Easy | +| 3 | [What is `pubspec.yaml` file and what does it do?](#what-is-pubspecyaml-file-and-what-does-it-do) | Easy | +| 4 | [What is the difference between `main()` and `runApp()` functions in Flutter?](#what-is-the-difference-between-main-and-runapp-functions-in-flutter) | Easy | +| 5 | [Differentiate between named parameters and positional parameters in Flutter.](#differentiate-between-named-parameters-and-positional-parameters-in-flutter) | Easy | +| 6 | [What are widgets in Flutter?](#what-are-widgets-in-flutter) | Easy | +| 7 | [What is `Hot Reload` and `Hot Restart` in Flutter?](#what-is-hot-reload-and-hot-restart-in-flutter) | Easy | +| 8 | [What do you mean by open-source software? Is Flutter open-source?](#what-do-you-mean-by-open-source-software-is-flutter-open-source) | Easy | +| 9 | [Differentiate between `StatelessWidget` and `StatefulWidget` in Flutter.](#differentiate-between-statelesswidget-and-statefulwidget-in-flutter) | Easy | +| 10 | [What is `BuildContext` in Flutter? And why is it needed?](#what-is-buildcontext-in-flutter-and-why-is-it-needed) | Intermediate | +| 11 | [What are packages and plugins in Flutter?](#what-are-packages-and-plugins-in-flutter) | Easy | +| 12 | [Name some popular apps made with Flutter.](#name-some-popular-apps-made-with-flutter) | Easy | +| 13 | [What are different build modes in Flutter?](#what-are-different-build-modes-in-flutter) | Intermediate | +| 14 | [What is the difference between `WidgetsApp` and `MaterialApp` in Flutter?](#what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter) | Intermediate | +| 15 | [Differentiate between final, const and static keyword.](#differentiate-between-final-const-and-static-keyword) | Easy | +| 16 | [What are `StatefulWidget` Lifecycle methods. Explain briefly.](#what-are-statefulwidget-lifecycle-methods-explain-briefly) | Intermediate | +| 17 | [What are keys and why do we need them?](#what-are-keys-and-why-do-we-need-them) | Intermediate | +| 18 | [What is the difference between `Expanded` and `Flexible` widget?](#what-is-the-difference-between-expanded-and-flexible-widget) | Intermediate | +| 19 | [What is Fat Arrow Notation in Dart?](#what-is-fat-arrow-notation-in-dart) | Easy | +| 20 | [What is the purpose of `SafeArea` widget in Flutter?](#what-is-the-purpose-of-safearea-widget-in-flutter) | Easy | +| 21 | [What are `Slivers`?](#what-are-slivers) | Advanced | +| 22 | [What is the extension method in Dart?](#what-is-the-extension-method-in-dart) | Intermediate | +| 23 | [Explain the `mounted` property. How is it important and when to use it?](#explain-the-mounted-property-how-is-it-important-and-when-to-use-it) | Intermediate | +| 24 | [What is sound null safety?](#what-is-sound-null-safety) | Intermediate | +| 25 | [Differentiate between `mainAxisAlignment` and `crossAxisAlignment`.](#differentiate-between-mainaxisalignment-and-crossaxisalignment) | Easy | +| 26 | [What are mixins? How to use them?](#what-are-mixins-how-to-use-them) | Intermediate | +| 27 | [What is the difference between `Container` and `SizedBox` widget?](#what-is-the-difference-between-container-and-sizedbox-widget) | Easy | +| 28 | [What do you mean by Null-aware operators?](#what-do-you-mean-by-null-aware-operators) | Easy | +| 29 | [What is `AppLifecycleState`?](#what-is-applifecyclestate) | Intermediate | +| 30 | [What is the difference between `NetworkImage` and `Image.network` in flutter?](#what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter) | Intermediate | +| 31 | [Explain async, await and Future.](#explain-async-await-and-future) | Intermediate | +| 32 | [What is `resizeToAvoidBottomInset`? When should we use it?](#what-is-resizetoavoidbottominset-when-should-we-use-it) | Intermediate | +| 33 | [What is `TextEditingController`?](#what-is-texteditingcontroller) | Easy | +| 34 | [What is `Animation` and `AnimationController`?](#what-is-animation-and-animationcontroller) | Intermediate | +| 35 | [What is `InheritedWidget` in Flutter?](#what-is-inheritedwidget-in-flutter) | Advanced | +| 36 | [What is Flutter Tree Shaking?](#what-is-flutter-tree-shaking) | Advanced | +| 37 | [What is an `AspectRatio` widget used for?](#what-is-an-aspectratio-widget-used-for) | Easy | +| 38 | [What is `vsync`? Explain.](#what-is-vsync-explain) | Advanced | +| 39 | [Differentiate between `Stream` and `Future` in Flutter.](#differentiate-between-stream-and-future-in-flutter) | Intermediate | +| 40 | [What is `assert` used for in Dart and Flutter?](#what-is-assert-used-for-in-dart-and-flutter) | Easy | +| 41 | [Can you explain the process of creating custom widgets in Flutter?](#can-you-explain-the-process-of-creating-custom-widgets-in-flutter) | Intermediate | +| 42 | [What is Typedef in Dart?](#what-is-typedef-in-dart) | Intermediate | +| 43 | [What is `FutureBuilder` in Flutter and how is it used to build dynamic UI?](#what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui) | Intermediate | +| 44 | [How do you handle exceptions in Flutter, and what strategies have you used?](#how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used) | Intermediate | +| 45 | [What is isolate in Flutter?](#what-is-isolate-in-flutter) | Advanced | +| 46 | [What are DevTools in Flutter?](#what-are-devtools-in-flutter) | Intermediate | +| 47 | [How would you make HTTP requests in the Flutter framework?](#how-would-you-make-http-requests-in-the-flutter-framework) | Easy | +| 48 | [What is Factory constructor?](#what-is-factory-constructor) | Intermediate | +| 49 | [Can you explain the process of testing a Flutter app?](#can-you-explain-the-process-of-testing-a-flutter-app) | Advanced | +| 50 | [Explain singleton class in flutter.](#explain-singleton-class-in-flutter) | Intermediate | +| 51 | [What technology is Flutter built with?](#what-technology-is-flutter-built-with) | Easy | +| 52 | [What is the event loop?](#what-is-the-event-loop) | Intermediate | +| 53 | [What is the difference between Provider vs. InheritedWidget?](#what-is-the-difference-between-provider-vs-inheritedwidget) | Intermediate | +| 54 | [What is the purpose of the `initState()` method in a StatefulWidget?](#what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget) | Easy | +| 55 | [What is the purpose of the `dispose()` method in a StatefulWidget?](#what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget) | Easy | +| 56 | [What is a GlobalKey in Flutter?](#what-is-a-globalkey-in-flutter) | Intermediate | +| 57 | [What is the difference between padding and margin in Flutter?](#what-is-the-difference-between-padding-and-margin-in-flutter) | Easy | +| 58 | [What is the purpose of the scaffold widget in Flutter?](#what-is-the-purpose-of-the-scaffold-widget-in-flutter) | Easy | +| 59 | [What is the purpose of the Expanded widget in Flutter?](#what-is-the-purpose-of-the-expanded-widget-in-flutter) | Easy | +| 60 | [How do you handle user input in Flutter?](#how-do-you-handle-user-input-in-flutter) | Intermediate | +| 61 | [What is the purpose of the `LayoutBuilder` widget in Flutter?](#what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter) | Intermediate | +| 62 | [What is the purpose of the `SingleChildScrollView` widget in Flutter?](#what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter) | Easy | +| 63 | [What is the purpose of the `Stack` widget in Flutter?](#what-is-the-purpose-of-the-stack-widget-in-flutter) | Easy | +| 64 | [What is a `Theme` in Flutter?](#what-is-a-theme-in-flutter) | Easy | +| 65 | [What is the purpose of the `Visibility` widget in Flutter?](#what-is-the-purpose-of-the-visibility-widget-in-flutter) | Easy | +| 66 | [How do you navigate between screens in Flutter?](#how-do-you-navigate-between-screens-in-flutter) | Easy | +| 67 | [What is a modal bottom sheet in Flutter?](#what-is-a-modal-bottom-sheet-in-flutter) | Easy | +| 68 | [How do you use the `ValueNotifier` class in Flutter?](#how-do-you-use-the-valuenotifier-class-in-flutter) | Intermediate | +| 69 | [How do you use the `Positioned` widget in Flutter?](#how-do-you-use-the-positioned-widget-in-flutter) | Easy | +| 70 | [How do you pass data between screens in Flutter?](#how-do-you-pass-data-between-screens-in-flutter) | Easy | +| 71 | [What is a `MediaQuery` in Flutter?](#what-is-a-mediaquery-in-flutter) | Intermediate | +| 72 | [What is the purpose of the `didUpdateWidget` method in a StatefulWidget?](#what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget) | Intermediate | +| 73 | [What is a `CustomPainter` in Flutter?](#what-is-a-custompainter-in-flutter) | Advanced | +| 74 | [What is the purpose of the `AnimatedBuilder` widget in Flutter?](#what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter) | Intermediate | +| 75 | [What is the purpose of the `Navigator` class in Flutter?](#what-is-the-purpose-of-the-navigator-class-in-flutter) | Easy | +| 76 | [What is the purpose of the `AnimatedSwitcher` widget in Flutter?](#what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter) | Intermediate | +| 77 | [What is the purpose of the `FittedBox` widget in Flutter?](#what-is-the-purpose-of-the-fittedbox-widget-in-flutter) | Easy | +| 78 | [What is State Management in Flutter?](#what-is-state-management-in-flutter) | Intermediate | +| 79 | [What is the difference between Cupertino and Material Design in Flutter?](#what-is-the-difference-between-cupertino-and-material-design-in-flutter) | Easy | +| 80 | [What is the purpose of the Material Design Icons package in Flutter?](#what-is-the-purpose-of-the-material-design-icons-package-in-flutter) | Easy | +| 81 | [Explain how you will deploy a Flutter app to the Google Play/App Store?](#explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store) | Advanced | +| 82 | [What are the advantages of a Flutter Inspector?](#what-are-the-advantages-of-a-flutter-inspector) | Advanced | +| 83 | [List the responsibilities of `FlutterActivity`.](#list-the-responsibilities-of-flutteractivity) | Advanced | +| 84 | [Can you describe how to implement internationalization in a flutter app?](#can-you-describe-how-to-implement-internationalization-in-a-flutter-app) | Advanced | +| 85 | [How do you implement a custom transition between screens in flutter?](#how-do-you-implement-a-custom-transition-between-screens-in-flutter) | Advanced | +| 86 | [How do you implement a custom animation curve in flutter?](#how-do-you-implement-a-custom-animation-curve-in-flutter) | Advanced | +| 87 | [How do you implement a draggable widget in flutter?](#how-do-you-implement-a-draggable-widget-in-flutter) | Intermediate | +| 88 | [How do you provide accessibility when developing flutter apps, do you at all?](#how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all) | Intermediate | +| 89 | [How to create a list with persistent headers?](#how-to-create-a-list-with-persistent-headers) | Intermediate | +| 90 | [Can you communicate between isolates? Describe an Isolate?](#can-you-communicate-between-isolates-describe-an-isolate) | Advanced | +| 91 | [Explain what a ticker is in flutter.](#explain-what-a-ticker-is-in-flutter) | Intermediate | +| 92 | [What are the various kinds of Streams present in flutter?](#what-are-the-various-kinds-of-streams-present-in-flutter) | Intermediate | +| 93 | [What is the Flutter rendering pipeline and how does it work?](#what-is-the-flutter-rendering-pipeline-and-how-does-it-work) | Advanced | +| 94 | [What is the role of the `FlutterEngine` in the Flutter framework?](#what-is-the-role-of-the-flutterengine-in-the-flutter-framework) | Advanced | +| 95 | [What are platform channels in Flutter and when would you use them?](#what-are-platform-channels-in-flutter-and-when-would-you-use-them) | Advanced | +| 96 | [How do you work with multiple Flutter flavors?](#how-do-you-work-with-multiple-flutter-flavors) | Advanced | +| 97 | [What is code-splitting in Flutter, and how does it help?](#what-is-code-splitting-in-flutter-and-how-does-it-help) | Advanced | +| 98 | [What are the differences between JIT and AOT?](#what-are-the-differences-between-jit-and-aot) | Intermediate | +| 99 | [How do Object, dynamic, and var differ in Dart?](#how-doobjectdynamic-andvardiffer-in-dart) | Easy | +| 100 | [How do mixins differ from interfaces in Dart?](#how-do-mixins-differ-from-interfaces-in-dart) | Intermediate | + + + +## All Questions with Answers + + + +### What is Flutter? + + -This repository contains common Flutter interview questions and their answers.πŸš€ From basic to advanced, test your understanding of Flutter and Dart, brush up on your knowledge πŸ’ͺ, or get ready for your next coding interview! I add new questions to this repository on a regular basis (along with answers πŸ˜‰). Best of luck to all of you. ❀
β€’ Last updated: Mar 10th, 2023 - +Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, macOS, Windows, and the web from a single codebase. Flutter was released in May 2017. Developers consider it as the fastest and most expressive way to create native apps. Flutter will have a significant impact on the development of high-quality, feature-packed mobile applications in the near future due to its simplicity, high performance as a result of its development, and rich user interface. -Feel free to reach out to me! πŸ˜€
-Instagram β€’ Twitter β€’ LinkedIn β€’ Medium Blog + -| If you find this repository useful, kindly give it a star ⭐. Thank you and have fun! πŸ”₯ | -|---| - +
+[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-flutter/en-US.mdx) -
- -| Sl no | Questions | -|-------|------------------| -| 01 |[What is Flutter?](#q1-what-is-flutter)| -| 02 |[What is Dart and Why does Flutter use it?](#q2-what-is-dart-and-why-does-flutter-use-it)| -| 03 |[What is `pubspec.yaml` file and what does it do?](#q3-what-is-pubspecyaml-file-and-what-does-it-do)| -| 04 |[What is the difference between `main()` and `runApp()` functions in Flutter?](#q4-what-is-the-difference-between-main-and-runapp-functions-in-flutter)| -| 05 |[Differentiate between named parameters and positional parameters in Flutter.](#q5-differentiate-between-named-parameters-and-positional-parameters-in-flutter)| -| 06 |[What are widgets in Flutter?](#q6-what-are-widgets-in-flutter)| -| 07 |[What is `Hot Reload` and `Hot Restart` in Flutter?](#q7-what-is-hot-reload-and-hot-restart-in-flutter)| -| 08 |[What do you mean by open-source software? Is Flutter open-source?](#q8-what-do-you-mean-by-open-source-software-is-flutter-open-source)| -| 09 |[Differentiate between `StatelessWidget` and `StatefulWidget` in Flutter.](#q9-differentiate-between-statelesswidget-and-statefulwidget-in-flutter)| -| 10 |[What is `BuildContext` in Flutter? And why is it needed?](#q10-what-is-buildcontext-in-flutter-and-why-is-it-needed)| -| 11 |[What are packages and plugins in Flutter?](#q11-what-are-packages-and-plugins-in-flutter)| -| 12 |[Name some popular apps made with Flutter.](#q12-name-some-popular-apps-made-with-flutter)| -| 13 |[What are different build modes in Flutter?](#q13-what-are-different-build-modes-in-flutter)| -| 14 |[What is the difference between `WidgetsApp` and `MaterialApp` in Flutter?](#q14-what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter)| -| 15 |[Differentiate between final, const and static keyword.](#q15-differentiate-between-final-const-and-static-keyword)| -| 16 |[What are `StatefulWidget` Lifecycle methods. Explain briefly.](#q16-what-are-statefulwidget-lifecycle-methods-explain-briefly)| -| 17 |[What are keys and why do we need them?](#q17-what-are-keys-and-why-do-we-need-them)| -| 18 |[What is the difference between `Expanded` and `Flexible` widget?](#q18-what-is-the-difference-between-expanded-and-flexible-widget)| -| 19 |[What is Fat Arrow Notation in Dart?](#q19-what-is-fat-arrow-notation-in-dart)| -| 20 |[What is the purpose of `SafeArea` widget in Flutter?](#q20-what-is-the-purpose-of-safearea-widget-in-flutter)| -| 21 |[What are `Slivers`?](#q21-what-are-slivers)| -| 22 |[What is the extension method in Dart?](#q22-what-is-the-extension-method-in-dart)| -| 23 |[Explain the `mounted` property. How is it important and when to use it?](#q23-explain-the-mounted-property-how-is-it-important-and-when-to-use-it)| -| 24 |[What is sound null safety?](#q24-what-is-sound-null-safety)| -| 25 |[Differentiate between `mainAxisAlignment` and `crossAxisAlignment`.](#q25-differentiate-between-mainaxisalignment-and-crossaxisalignment)| -| 26 |[What are mixins? How to use them?](#q26-what-are-mixins-how-to-use-them)| -| 27 |[What is the difference between `Container` and `SizedBox` widget?](#q27-what-is-the-difference-between-container-and-sizedbox-widget)| -| 28 |[What do you mean by Null-aware operators?](#q28-what-do-you-mean-by-null-aware-operators)| -| 29 |[What is `AppLifecycleState`?](#q29-what-is-applifecyclestate)| -| 30 |[What is the difference between `NetworkImage` and `Image.network` in flutter?](#q30-what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter)| -| 31 |[Explain async, await and Future.](#q31-explain-async-await-and-future)| -| 32 |[What is `resizeToAvoidBottomInset`? When should we use it?](#q32-what-is-resizetoavoidbottominset-when-should-we-use-it)| -| 33 |[What is `TextEditingController`?](#q33-what-is-texteditingcontroller)| -| 34 |[What is `Animation` and `AnimationController`?](#q34-what-is-animation-and-animationcontroller)| -| 35 |[What is `InheritedWidget` in Flutter?](#q35-what-is-inheritedwidget-in-flutter)| -| 36 |[What is Flutter Tree Shaking?](#q36-what-is-flutter-tree-shaking)| -| 37 |[What is an `AspectRatio` widget used for?](#q37-what-is-an-aspectratio-widget-used-for)| -| 38 |[What is `vsync`? Explain.](#q38-what-is-vsync-explain)| -| 39 |[Differentiate between `Stream` and `Future` in Flutter.](#q39-differentiate-between-stream-and-future-in-flutter)| -| 40 |[What is `assert` used for in Dart and Flutter?](#q40-what-is-assert-used-for-in-dart-and-flutter)| -| 41 |[Can you explain the process of creating custom widgets in Flutter?](#q41-can-you-explain-the-process-of-creating-custom-widgets-in-flutter)| -| 42 |[What is Typedef in Dart?](#q42-what-is-typedef-in-dart)| -| 43 |[What is `FutureBuilder` in Flutter and how is it used to build dynamic UI?](#q43-what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui)| -| 44 |[How do you handle exceptions in Flutter, and what strategies have you used?](#q44-how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used)| -| 45 |[What is isolate in Flutter?](#q45-what-is-isolate-in-flutter)| -| 46 |[What are DevTools in Flutter?](#q46-what-are-devtools-in-flutter)| -| 47 |[How would you make HTTP requests in the Flutter framework?](#q47-how-would-you-make-http-requests-in-the-flutter-framework)| -| 48 |[What is Factory constructor?](#q48-what-is-factory-constructor)| -| 49 |[Can you explain the process of testing a Flutter app?](#q49-can-you-explain-the-process-of-testing-a-flutter-app)| -| 50 |[Explain singleton class in flutter.](#q50-explain-singleton-class-in-flutter)| -| 51 |[What technology is Flutter built with?](#q51-what-technology-is-flutter-built-with)| -| 52 |[What is the event loop?](#q52-what-is-the-event-loop)| -| 53 |[What is the difference between Provider vs. InheritedWidget?](#q53-what-is-the-difference-between-provider-vs-inheritedwidget)| -| 54 |[What is the purpose of the `initState()` method in a StatefulWidget?](#q54-what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget)| -| 55 |[What is the purpose of the `dispose()` method in a StatefulWidget?](#q55-what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget)| -| 56 |[What is a GlobalKey in Flutter?](#q56-what-is-a-globalkey-in-flutter)| -| 57 |[What is the difference between padding and margin in Flutter?](#q57-what-is-the-difference-between-padding-and-margin-in-flutter)| -| 58 |[What is the purpose of the scaffold widget in Flutter?](#q58-what-is-the-purpose-of-the-scaffold-widget-in-flutter)| -| 59 |[What is the purpose of the Expanded widget in Flutter?](#q59-what-is-the-purpose-of-the-expanded-widget-in-flutter)| -| 60 |[How do you handle user input in Flutter?](#q60-how-do-you-handle-user-input-in-flutter)| -| 61 |[What is the purpose of the `LayoutBuilder` widget in Flutter?](#q61-what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter)| -| 62 |[What is the purpose of the `SingleChildScrollView` widget in Flutter?](#q62-what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter)| -| 63 |[What is the purpose of the `Stack` widget in Flutter?](#q63-what-is-the-purpose-of-the-stack-widget-in-flutter)| -| 64 |[What is a `Theme` in Flutter?](#q64-what-is-a-theme-in-flutter)| -| 65 |[What is the purpose of the `Visibility` widget in Flutter?](#q65-what-is-the-purpose-of-the-visibility-widget-in-flutter)| -| 66 |[How do you navigate between screens in Flutter?](#q66-how-do-you-navigate-between-screens-in-flutter)| -| 67 |[What is a modal bottom sheet in Flutter?](#q67-what-is-a-modal-bottom-sheet-in-flutter)| -| 68 |[How do you use the `ValueNotifier` class in Flutter?](#q68-how-do-you-use-the-valuenotifier-class-in-flutter)| -| 69 |[How do you use the `Positioned` widget in Flutter?](#q69-how-do-you-use-the-positioned-widget-in-flutter)| -| 70 |[How do you pass data between screens in Flutter?](#q70-how-do-you-pass-data-between-screens-in-flutter)| -| 71 |[What is a `MediaQuery` in Flutter?](#q71-what-is-a-mediaquery-in-flutter)| -| 72 |[What is the purpose of the `didUpdateWidget` method in a StatefulWidget?](#q72-what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget)| -| 73 |[What is a `CustomPainter` in Flutter?](#q73-what-is-a-custompainter-in-flutter)| -| 74 |[What is the purpose of the `AnimatedBuilder` widget in Flutter?](#q74-what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter)| -| 75 |[What is the purpose of the `Navigator` class in Flutter?](#q75-what-is-the-purpose-of-the-navigator-class-in-flutter)| -| 76 |[What is the purpose of the `AnimatedSwitcher` widget in Flutter?](#q76-what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter)| -| 77 |[What is the purpose of the `FittedBox` widget in Flutter?](#q77-what-is-the-purpose-of-the-fittedbox-widget-in-flutter)| -| 78 |[What is State Management in Flutter?](#q78-what-is-state-management-in-flutter)| -| 79 |[What is the difference between Cupertino and Material Design in Flutter?](#q79-what-is-the-difference-between-cupertino-and-material-design-in-flutter)| -| 80 |[What is the purpose of the Material Design Icons package in Flutter?](#q80-what-is-the-purpose-of-the-material-design-icons-package-in-flutter)| -| 81 |[Explain how you will deploy a Flutter app to the Google Play/App Store?](#q81-explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store)| -| 82 |[What are the advantages of a Flutter Inspector?](#q82-what-are-the-advantages-of-a-flutter-inspector)| -| 83 |[List the responsibilities of `FlutterActivity`.](#q83-list-the-responsibilities-of-flutteractivity)| -| 84 |[Can you describe how to implement internationalization in a flutter app?](#q84-can-you-describe-how-to-implement-internationalization-in-a-flutter-app)| -| 85 |[How do you implement a custom transition between screens in flutter?](#q85-how-do-you-implement-a-custom-transition-between-screens-in-flutter)| -| 86 |[How do you implement a custom animation curve in flutter?](#q86-how-do-you-implement-a-custom-animation-curve-in-flutter)| -| 87 |[How do you implement a draggable widget in flutter?](#q87-how-do-you-implement-a-draggable-widget-in-flutter)| -| 88 |[How do you provide accessibility when developing flutter apps, do you at all?](#q88-how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all)| -| 89 |[How to create a list with persistent headers?](#q89-how-to-create-a-list-with-persistent-headers)| -| 90 |[Can you communicate between isolates? Describe an Isolate?](#q90-can-you-communicate-between-isolates-describe-an-isolate)| -| 91 |[Explain what a ticker is in flutter.](#q91-explain-what-a-ticker-is-in-flutter)| -| 92 |[What are the various kinds of Streams present in flutter?](#q92-what-are-the-various-kinds-of-streams-present-in-flutter)| -| 93 |[What is the Flutter rendering pipeline and how does it work?](#q93-what-is-the-flutter-rendering-pipeline-and-how-does-it-work)| -| 94 |[What is the role of the `FlutterEngine` in the Flutter framework?](#q94-what-is-the-role-of-the-flutterengine-in-the-flutter-framework)| -| 95 |[What are platform channels in Flutter and when would you use them?](#q95-what-are-platform-channels-in-flutter-and-when-would-you-use-them)| -| 96 |[How do you work with multiple Flutter flavors?](#q96-how-do-you-work-with-multiple-flutter-flavors)| -| 97 |[What is code-splitting in Flutter, and how does it help?](#q97-what-is-code-splitting-in-flutter-and-how-does-it-help)| -| 98 |[What are the differences between JIT and AOT?](#q98-what-are-the-differences-between-jit-and-aot)| -| 99 |[How doΒ Object,Β dynamic, andΒ varΒ differ in Dart?](#q99-how-doobjectdynamic-andvardiffer-in-dart)| -| 100 |[How do mixins differ from interfaces in Dart?](#q100-how-do-mixins-differ-from-interfaces-in-dart)| - -
-
- -## Q1. What is Flutter? +
+ +### What is Dart and Why does Flutter use it? + + -Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, macOS, Windows, and the web from a single codebase. Flutter was released in May 2017. Developers consider it as the fastest and most expressive way to create native apps. Flutter will have a significant impact on the development of high-quality, feature-packed mobile applications in the near future due to its simplicity, high performance as a result of its development, and rich user interface. - -**[⬆ Back to Top](#flutter-interview-questions)** +Dart is a programming language designed for client development, such as for the web and mobile apps. It is developed by Google and can also be used to build server and desktop applications. It is an object-oriented, class-based, garbage-collected language with C-style syntax. -## Q2. What is Dart and Why does Flutter use it? +- 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. +- Dart uses the Just In Time compilation. This drastically reduces the time of development and responds faster. -Dart is a programming language designed for client development, such as for the web and mobile apps. It is developed by Google and can also be used to build server and desktop applications. It is an object-oriented, class-based, garbage-collected language with C-style syntax. + -* 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. -* Dart uses the Just In Time compilation. This drastically reduces the time of development and responds faster. +
-**[⬆ Back to Top](#flutter-interview-questions)** +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-dart-and-why-does-flutter-use-it/en-US.mdx) -## Q3. What is `pubspec.yaml` file and what does it do? +
+ +### What is `pubspec.yaml` file and what does it do? + + Every Flutter project includes a `pubspec.yaml` file, which is generated while creating a new Flutter project. It’s located at the top of the project tree and contains metadata about the project that the Dart and Flutter tooling needs to know. The pubspec file specifies dependencies that the project requires, such as particular packages (and their versions), fonts, or image files. It also specifies other requirements, such as dependencies on developer packages (like testing or mocking packages), or particular constraints on the version of the Flutter SDK. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q4. What is the difference between `main()` and `runApp()` functions in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-pubspecyaml-file-and-what-does-it-do/en-US.mdx) + +
+ +### What is the difference between `main()` and `runApp()` functions in Flutter? + + The `main()` function tells Dart where the program starts, and it must be in the file that is considered the "entry point" for the program. By convention, this will be in a file called `main.dart`. This main function can execute any code within it's code block. The `runApp()` function should return widget that would be attached to the screen as a root of the widget tree that will be rendered. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-main-and-runapp-functions-in-flutter/en-US.mdx) -## Q5. Differentiate between named parameters and positional parameters in Flutter. +
+ +### Differentiate between named parameters and positional parameters in Flutter. + + A `Positional Parameter` is linked by its position. Positional parameters must be specified in the order in which they appear. `Named Parameters` are referenced by name, which means that they can be used during the function invocation in an order different from the function declaration. @@ -165,57 +194,113 @@ doSomething(String name, [String greeting = 'Hello']); // Positional Optional Pa doSomething({String? name, String greeting = 'Hello'}); // Named Optional Parameter ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q6. What are widgets in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/differentiate-between-named-parameters-and-positional-parameters-in-flutter/en-US.mdx) + +
+ +### What are widgets in Flutter? + + Widgets are the central class hierarchy in the Flutter framework, that describes the configuration of an element to manage the underlying render tree. A widget is an immutable description of part of a user interface. Widgets themselves have no mutable state, i.e., all their fields must be final. -In Flutter, everything is a widget. +In Flutter, **everything is a widget**. + + -**[⬆ Back to Top](#flutter-interview-questions)** +
-## Q7. What is `Hot Reload` and `Hot Restart` in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-widgets-in-flutter/en-US.mdx) + +
+ +### What is `Hot Reload` and `Hot Restart` in Flutter? + + Flutter's `Hot Reload` feature injects the updated source code files into the running **Dart Virtual Machine (VM)**, and rebuilds the widget tree preserving the app state to quickly view the effects of the changes. Whereas `Hot Restart` loads the updated source code files into the VM and restarts the Flutter app, losing all the previous app states. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q8. What do you mean by open-source software? Is Flutter open-source? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-hot-reload-and-hot-restart-in-flutter/en-US.mdx) -Open-source software is software with with source code that anyone can inspect, modify, and enhance. Open-source software is developed in a decentralized and collaborative way, relying on peer review and community production. Open source software is often cheaper, more flexible, and has more longevity than its proprietary peers because it is developed by communities rather than a single author or company. +
+ +### What do you mean by open-source software? Is Flutter open-source? + + + +Open-source software is software with source code that anyone can inspect, modify, and enhance. Open-source software is developed in a decentralized and collaborative way, relying on peer review and community production. Open source software is often cheaper, more flexible, and has more longevity than its proprietary peers because it is developed by communities rather than a single author or company. Yes, Flutter is an open-source software development kit. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q9. Differentiate between `StatelessWidget` and `StatefulWidget` in Flutter. +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-do-you-mean-by-open-source-software-is-flutter-open-source/en-US.mdx) + +
+ +### Differentiate between `StatelessWidget` and `StatefulWidget` in Flutter. + + `StatelessWidget`s are those that do not change, or are immutable. Its appearance and properties remain constant throughout the widget's lifetime. **Icon**, **IconButton**, **Text** are examples of stateless widgets. `StatefulWidget`s are those that change their properties while running. They are dynamic, which means they can be rebuilt multiple times during their lifetime. It can alter its appearance in response to events caused by the user interactions or when data is received. **Checkbox**, **Radio**, **Slider**, **InkWell**, **Form**, and **TextField** are examples of stateful widgets. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/differentiate-between-statelesswidget-and-statefulwidget-in-flutter/en-US.mdx) -## Q10. What is `BuildContext` in Flutter? And why is it needed? +
+ +### What is `BuildContext` in Flutter? And why is it needed? + + `BuildContext` is a locator that tracks and locates each widget in a widget tree. `BuildContext` objects are passed to **WidgetBuilder** functions, and are available from the `State.context` member. Some static functions (e.g. **showDialog**, **Theme.of**, and so forth) also take build contexts so that they can act on behalf of the calling widget, or obtain data specifically for the given context. There are many reasons why `BuildContext` is important. From locating widgets in the tree to interacting with **RenderObjects**, the context makes all of these interactions possible. It serves as the **bridge** between the widgets and rendering layer and is especially powerful for combining functionality or using information from one tree in another. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q11. What are packages and plugins in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-buildcontext-in-flutter-and-why-is-it-needed/en-US.mdx) + +
+ +### What are packages and plugins in Flutter? + + A package only contains Dart code. Some of the packages may use Flutter specific functionality and thus have a dependency on the Flutter framework. A plugin contains Dart combined with one or more platform-specific native (Java/Swift/JavaScript) code. The API of the plugin is written in Dart and the implementations are written in native languages. Flutter uses platform channels to communicate with native codes. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q12. Name some popular apps made with Flutter. +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-packages-and-plugins-in-flutter/en-US.mdx) + +
+ +### Name some popular apps made with Flutter. + + - BMW - Google Pay @@ -233,9 +318,17 @@ A plugin contains Dart combined with one or more platform-specific native (Java/ _Source: [here](https://flutter.dev/showcase)_ -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/name-some-popular-apps-made-with-flutter/en-US.mdx) -## Q13. What are different build modes in Flutter? +
+ +### What are different build modes in Flutter? + + The Flutter tooling supports three different build modes while compiling the app. We need to choose the build mode depending upon where we are in the development cycle. @@ -245,17 +338,33 @@ The Flutter tooling supports three different build modes while compiling the app _To learn more, check [docs](https://docs.flutter.dev/testing/build-modes)._ -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q14. What is the difference between `WidgetsApp` and `MaterialApp` in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-different-build-modes-in-flutter/en-US.mdx) + +
+ +### What is the difference between `WidgetsApp` and `MaterialApp` in Flutter? + + `WidgetsApp` is a convenient widget that wraps a number of widgets that are commonly required for an application. It also provides basic navigation. -`MaterialApp` builds an application that uses the mterial design. It is built upon the `WidgetsApp` and contains some material-design specific functionality, such as **AnimatedTheme**. We certainly don't require `MaterialApp` every time when building a Flutter project. `CupertinoApp` gives iOS like look and feel, or we can even define our custom sets of widgets. +`MaterialApp` builds an application that uses the mterial design. It is built upon the `WidgetsApp` and contains some material-design specific functionality, such as **AnimatedTheme**. We certainly don't require `MaterialApp` every time when building a Flutter project. `CupertinoApp` gives iOS like look and feel, or we can even define our custom sets of widgets. + + + +
-**[⬆ Back to Top](#flutter-interview-questions)** +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter/en-US.mdx) -## Q15. Differentiate between final, const and static keyword. +
+ +### Differentiate between final, const and static keyword. + + The `final` keyword defines a variable that can be initialized once and cannot be changed after being assigned a value for the first time. @@ -265,17 +374,23 @@ Now the only difference between the final and const variable is that **final is The `static` keyword is used for a class-level variable and method that is the same for every instance of a class, this means if a data member is static, it can be accessed without creating an object. The static keyword allows data members to persist Values between different instances of a class. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q16. What are `StatefulWidget` Lifecycle methods. Explain briefly. +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/differentiate-between-final-const-and-static-keyword/en-US.mdx) + +
+ +### What are `StatefulWidget` Lifecycle methods. Explain briefly. + + - **createState() method:** Whenever a StatefulWidget is created, the framework calls this method to create fresh State objects. This method must be overridden. - **initState() method:** This method is the first method that is called while creating a StatefulWidget class. Here we allocate our resources, which means we can initialize our variable, data, and properties. -- **didChangeDependencies() method:** This method is called just after initState() method when a dependency of this State object changes. For example, if the previous build was referencing an InheritedWidget that changes, this method notifies the object to change. - - Generally, subclasses don't override didChangeDependencies() method because the framework calls build() methods after dependency change. But to do some expensive work, let's say some network calls, the method is preferred over doing everything on build() method itself. +- **didChangeDependencies() method:** This method is called just after initState() method when a dependency of this State object changes. For example, if the previous build was referencing an InheritedWidget that changes, this method notifies the object to change. Generally, subclasses don't override didChangeDependencies() method because the framework calls build() methods after dependency change. But to do some expensive work, let's say some network calls, the method is preferred over doing everything on build() method itself. - **build() method:** Every time the widget is rebuilt, the build() method is used. This can happen after calling initState(), didChangeDependencies(), or didUpdateWidget(), or after changing the state with a call to setState(). @@ -287,9 +402,17 @@ The `static` keyword is used for a class-level variable and method that is the s - **dispose() method:** This method is called when the State is removed from the tree, permanently. After the dispose() method is called, the State object is considered unmounted. Subclasses should override this method to release any resources retained by this object. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q17. What are keys and why do we need them? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-statefulwidget-lifecycle-methods-explain-briefly/en-US.mdx) + +
+ +### What are keys and why do we need them? + + Flutter uses keys to preserve the state and to uniquely identify specific widgets within a widget tree. It is used to preserve the state of the `StatefulWidget`s while they are being replaced with other widgets or just moved in the widget tree. @@ -297,9 +420,17 @@ The most common usage of key is when we are dealing with collections of widgets For an explanation with an example, check this [stackoverflow answer](https://stackoverflow.com/a/50081052). -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q18. What is the difference between `Expanded` and `Flexible` widget? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-keys-and-why-do-we-need-them/en-US.mdx) + +
+ +### What is the difference between `Expanded` and `Flexible` widget? + + The only difference between these two widgets is the `Flexible` widget takes only the space needed by the child, whereas the `Expanded` widget enforces its child to take all the available space. @@ -323,9 +454,17 @@ Column(children: [ Expanded vs Flexible

-**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-expanded-and-flexible-widget/en-US.mdx) -## Q19. What is Fat Arrow Notation in Dart? +
+ +### What is Fat Arrow Notation in Dart? + + A fat arrow (=>) is used to define a single expression in a function. This is a cleaner way to write functions with a single statement. @@ -347,15 +486,31 @@ String findSquare(int n) { String findSquare(int n) => 'The square of $n is ${n * n}.'; ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q20. What is the purpose of `SafeArea` widget in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-fat-arrow-notation-in-dart/en-US.mdx) + +
+ +### What is the purpose of `SafeArea` widget in Flutter? + + The `SafeArea` widget insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen. It will also indent the child by the amount necessary to avoid the Notch, or similar creative physical features of the display. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-safearea-widget-in-flutter/en-US.mdx) -## Q21. What are `Slivers`? +
+ +### What are `Slivers`? + + A sliver is a portion of a scrollable area that you can define to behave in a special way. You can use slivers to achieve custom scrolling effects, such as elastic scrolling. @@ -363,9 +518,17 @@ Under the hood, slivers are used to implement all of the scrollable views you us Sliver lets you render child widgets lazily or render only the visible segment of the screen. Additionally, Sliver provides a better experience when you need to scroll a list of items and a grid of items all together as a single unit or create a collapsible header. It makes the overall scrolling effect of large lists effective and efficient. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q22. What is the extension method in Dart? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-slivers/en-US.mdx) + +
+ +### What is the extension method in Dart? + + Extension method allows us to add new functionality on top of existing libraries.For example, you can add extra functionality to the Dart core String library, that are only available in your app. @@ -410,9 +573,17 @@ Text('Text widget with the default padding of 8.0').addPadding(); Text('Text widget with padding of 16.0').addPadding(16.0); ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q23. Explain the `mounted` property. How is it important and when to use it? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-extension-method-in-dart/en-US.mdx) + +
+ +### Explain the `mounted` property. How is it important and when to use it? + + The mounted property defines whether the state object, associated with it, is currently in the widget tree. @@ -420,17 +591,33 @@ After creating a State object and before calling initState, the framework **"mou It is an error to call setState unless mounted is true. This property is useful when a method on your state calls setState() but it isn't clear when or how often that method will be called. You can use `if (mounted) {...` to make sure the State exists before calling setState(). -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/explain-the-mounted-property-how-is-it-important-and-when-to-use-it/en-US.mdx) -## Q24. What is sound null safety? +
+ +### What is sound null safety? + + **Sound null safety** makes types in code non-nullable by default and enables special static checks and compiler optimizations to guarantee that null-dereference errors won't appear at runtime because they will be spotted at compile-time and fixed. **Null safety** is a guarantee within an object-oriented programming language that no object references will have null or void values. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q25. Differentiate between `mainAxisAlignment` and `crossAxisAlignment`. +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-sound-null-safety/en-US.mdx) + +
+ +### Differentiate between `mainAxisAlignment` and `crossAxisAlignment`. + + The `mainAxisAlignment` determines how the children should be placed along the main axis in a flex layout. Whereas, the `crossAxisAlignment` determines how the children will be placed along the cross axis in a flex layout. @@ -452,9 +639,17 @@ For a `Column` widget: _Image source: [Flutter Docs](https://docs.flutter.dev/development/ui/layout#aligning-widgets)_ -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q26. What are mixins? How to use them? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/differentiate-between-mainaxisalignment-and-crossaxisalignment/en-US.mdx) + +
+ +### What are mixins? How to use them? + + A mixin is a class whose methods and properties can be used by other classes – without subclassing. It's a reusable chunk of code that can be plugged in to any class that needs this functionality. @@ -507,9 +702,17 @@ class Twitter extends SocialMedia with SocialMediaGreetings { } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q27. What is the difference between `Container` and `SizedBox` widget? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-mixins-how-to-use-them/en-US.mdx) + +
+ +### What is the difference between `Container` and `SizedBox` widget? + + **SizedBox** is a widget for giving some constant height or width between two widgets. It does not contain any decorative properties just like color, shape, borderRadius etc. @@ -517,9 +720,17 @@ On the other hand **Container** is a widget that any person can modify according When used for whitespace, there is a linter warning to prefer SizedBox instead of Container. Because a Container is a heavier widget than a SizedBox, and as bonus, SizedBox has a const constructor, so it won't even create a new instance during runtime. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q28. What do you mean by Null-aware operators? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-container-and-sizedbox-widget/en-US.mdx) + +
+ +### What do you mean by Null-aware operators? + + Null aware operator allows us to make computations based on whether or not a value is null. @@ -558,9 +769,17 @@ Example of null-aware operators are: x ??= 5; // As x is not null now, it's value is still 3 ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-do-you-mean-by-null-aware-operators/en-US.mdx) -## Q29. What is `AppLifecycleState`? +
+ +### What is `AppLifecycleState`? + + The `AppLifecycleState` defines the state that an application can be. @@ -572,17 +791,33 @@ The `AppLifecycleState` defines the state that an application can be. - **resumed (AppLifecycleState.resumed):** This means the application is visible and responding to user input. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q30. What is the difference between `NetworkImage` and `Image.network` in flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-applifecyclestate/en-US.mdx) + +
+ +### What is the difference between `NetworkImage` and `Image.network` in flutter? + + `NetworkImage` class creates an object that provides an image from the src URL passed to it. It is not a widget and does not output an image to the screen. `Image.network` creates a widget that displays an image on the screen. It is just a named constructor on the **Image** class. It sets the image property using the **NetworkImage** . This image property is then used to display the image. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q31. Explain async, await and Future. +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter/en-US.mdx) + +
+ +### Explain async, await and Future. + + The `async` and `await` are keywords in Dart that enable asynchronous programming. They make it easier to write asynchronous code that is readable and easier to maintain. @@ -602,25 +837,49 @@ void main() async { } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/explain-async-await-and-future/en-US.mdx) -## Q32. What is `resizeToAvoidBottomInset`? When should we use it? +
+ +### What is `resizeToAvoidBottomInset`? When should we use it? + + The `resizeToAvoidBottomInset` is a property in the `Scaffold` widget. It is a boolean property that determines whether the body of the `Scaffold` should be resized to avoid the on-screen keyboard when it is displayed. It should be used when the body of the `Scaffold` contains a form or text input fields, and it is desirable to avoid having the input fields covered by the on-screen keyboard when the user is entering text. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q33. What is `TextEditingController`? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-resizetoavoidbottominset-when-should-we-use-it/en-US.mdx) + +
+ +### What is `TextEditingController`? + + The `TextEditingController` is a class in the Flutter framework that provides control over the text in a text field. It allows you to read and modify the text, set the selection, and listen to changes to the text. It is typically used in conjunction with a `TextField` widget to create an editable text input field in a Flutter application. The `TextEditingController` is assigned to the `controller` property of the `TextField`, and it can be used to retrieve the entered text, set the initial text, or respond to changes in the text. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-texteditingcontroller/en-US.mdx) -## Q34. What is `Animation` and `AnimationController`? +
+ +### What is `Animation` and `AnimationController`? + + `Animation` is a way to describe a graphical representation of a changing value over time. It can be used to animate the properties of widgets, such as size, color, position, and opacity, to create smooth and visually appealing transitions. @@ -669,9 +928,17 @@ class _MyAnimationState extends State } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q35. What is `InheritedWidget` in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-animation-and-animationcontroller/en-US.mdx) + +
+ +### What is `InheritedWidget` in Flutter? + + `InheritedWidget` is a class in the Flutter framework that is used to pass data down the widget tree. It provides a convenient way to share data between widgets without having to pass the data explicitly through each individual widget in the tree. @@ -679,9 +946,17 @@ An `InheritedWidget` is a widget that, when it is inserted into the widget tree, `InheritedWidget` is often used to provide data to descendant widgets that is frequently required, such as the theme or the current locale. By wrapping your application in an `InheritedWidget`, you can make this data available to all of your widgets, and avoid having to pass it down through multiple levels of the widget tree. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q36. What is Flutter Tree Shaking? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-inheritedwidget-in-flutter/en-US.mdx) + +
+ +### What is Flutter Tree Shaking? + + `Tree shaking` is a technique used by modern compilers to reduce the size of the output by eliminating code that is not being used. In Flutter, `tree shaking` refers to the process of removing unused widgets, libraries, and other code from the final build of an application. This helps to reduce the size of the application and improve performance by only including the code that is actually used by the application. @@ -689,9 +964,17 @@ Tree shaking in Flutter works by analyzing the dependencies of each widget and o In summary, Flutter Tree shaking is a feature that helps to optimize the size and performance of Flutter applications by only including the code that is actually used. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-flutter-tree-shaking/en-US.mdx) -## Q37. What is an `AspectRatio` widget used for? +
+ +### What is an `AspectRatio` widget used for? + + The `AspectRatio` widget in Flutter is used to ensure that a widget maintains a specific aspect ratio, regardless of the size of the parent container. This can be useful in cases where you want a widget to have a specific shape, such as a square or a rectangle with a fixed width-to-height ratio. @@ -699,9 +982,17 @@ The aspect ratio is defined as the width of the widget divided by its height. Th For example, if you want to create a square widget, you can wrap the widget in an AspectRatio widget with an aspect ratio of 1.0, and the widget will always be square, regardless of the size of the parent container. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q38. What is `vsync`? Explain. +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-an-aspectratio-widget-used-for/en-US.mdx) + +
+ +### What is `vsync`? Explain. + + The `vsync` in Flutter is an abbreviation for "vertical synchronization". It's a feature that ensures that animations and user interface updates are synchronized with the device's screen refresh rate. This prevents visual artifacts, such as screen tearing or stuttering, which can occur when the device's screen refresh rate and the animation's frame rate are not in sync. @@ -750,9 +1041,17 @@ class _MyAnimationState extends State } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q39. Differentiate between `Stream` and `Future` in Flutter. +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-vsync-explain/en-US.mdx) + +
+ +### Differentiate between `Stream` and `Future` in Flutter. + + `Stream` and `Future` are both used for asynchronous programming in Flutter, but they serve different purposes. @@ -762,9 +1061,17 @@ class _MyAnimationState extends State In summary, the main difference between `Future` and `Stream` is that `Future` represents a single value that will be available in the future, while `Stream` represents a sequence of values that are emitted over time. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q40. What is `assert` used for in Dart and Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/differentiate-between-stream-and-future-in-flutter/en-US.mdx) + +
+ +### What is `assert` used for in Dart and Flutter? + + The `assert` is a statement in Dart and Flutter that checks if a boolean condition is true and triggers an exception if the condition is false. It is typically used for debugging purposes, as it is intended to be used in development only and will be ignored in a production environment. @@ -787,9 +1094,17 @@ In this example, if `score` is less than 60, the `assert` statement will throw a In summary, `assert` is used in Dart and Flutter to validate conditions during development and help catch potential bugs before they make it to production. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q41. Can you explain the process of creating custom widgets in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-assert-used-for-in-dart-and-flutter/en-US.mdx) + +
+ +### Can you explain the process of creating custom widgets in Flutter? + + The process of creating custom widgets in Flutter involves the following steps: @@ -805,9 +1120,17 @@ The process of creating custom widgets in Flutter involves the following steps: These are the basic steps involved in creating custom widgets in Flutter. The exact process may vary depending on the specific requirements of your widget, but this general process should provide a good starting point. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/can-you-explain-the-process-of-creating-custom-widgets-in-flutter/en-US.mdx) -## Q42. What is Typedef in Dart? +
+ +### What is Typedef in Dart? + + The `typedef` in Dart is a way to define a new type alias for a function type. It allows us to give a name to a function type and use that name to declare variables, function parameters, or return types. A `typedef` is useful when we want to refer to a complex function type multiple times in our code, as it makes our code more readable and reduces duplication. @@ -827,9 +1150,17 @@ void main() { In this example, the `IntCallback` typedef defines a function type that takes an int as a parameter and returns void. The `callBackMethod` function takes an `IntCallback` as a parameter and calls it. The main function uses a closure to define an implementation of `IntCallback` and passes it to the `callBackMethod` function. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q43. What is `FutureBuilder` in Flutter and how is it used to build dynamic UI? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-typedef-in-dart/en-US.mdx) + +
+ +### What is `FutureBuilder` in Flutter and how is it used to build dynamic UI? + + `FutureBuilder` is a widget in Flutter that allows us to build a dynamic UI based on the value of a Future. A Future is an asynchronous operation that returns a value in the future. For example, we might use a Future to retrieve data from a server, or to perform a long-running computation. @@ -872,9 +1203,17 @@ Widget build(BuildContext context) { In this example, the `_fetchData` function returns a Future that retrieves data from a server. The `FutureBuilder` widget listens to the Future and uses the `builder` callback to build the UI based on its state. If the Future is running, the `CircularProgressIndicator` is displayed. If the Future completes with data, the data is displayed in a list. If the Future completes with an error, an error message is displayed. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q44. How do you handle exceptions in Flutter, and what strategies have you used? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui/en-US.mdx) + +
+ +### How do you handle exceptions in Flutter, and what strategies have you used? + + Exceptions are errors that occur at runtime and can be handled in Flutter using `try-catch` blocks. Here's a simple example of how to handle exceptions in Flutter: @@ -919,9 +1258,17 @@ try { } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used/en-US.mdx) -## Q45. What is isolate in Flutter? +
+ +### What is isolate in Flutter? + + An `Isolate` in Flutter is a separate thread of execution that runs concurrently with the main isolate (thread) of a Flutter application. An isolate has its own memory heap, so it can run code and access data independently of the main isolate. This allows you to run CPU-intensive or blocking operations on a background isolate, so that they don't block the main UI thread. @@ -944,9 +1291,17 @@ void main() { In this example, the `backgroundTask` function runs in the background isolate. The main function creates the isolate and passes a `SendPort` to the `backgroundTask` function, which can be used to communicate with the main isolate. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q46. What are DevTools in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-isolate-in-flutter/en-US.mdx) + +
+ +### What are DevTools in Flutter? + + `DevTools` in Flutter are a set of powerful web-based tools for debugging and profiling Flutter applications. They provide developers with detailed information about their apps, including CPU usage, memory usage, GPU rendering, and network activity. DevTools can be used to identify performance bottlenecks, inspect the widget tree, and debug issues in real-time. @@ -958,9 +1313,17 @@ Here are some of the features of DevTools: - **Logging view**: Displays log messages and errors generated by the app. - **Hot reload**: Lets us modify oour code and see the changes reflected in the app without having to restart it. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-devtools-in-flutter/en-US.mdx) -## Q47. How would you make HTTP requests in the Flutter framework? +
+ +### How would you make HTTP requests in the Flutter framework? + + Making HTTP requests in Flutter can be done using the `http` package. This package provides a simple API for sending HTTP requests and receiving HTTP responses. @@ -988,9 +1351,17 @@ In this example, we use the `http.get` method to send a GET request to the speci The `http` package is a simple and powerful tool for making HTTP requests in Flutter, and it can be used for a variety of tasks, including retrieving data from APIs, submitting form data, and uploading files. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q48. What is Factory constructor? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-would-you-make-http-requests-in-the-flutter-framework/en-US.mdx) + +
+ +### What is Factory constructor? + + A factory constructor in Flutter is a special type of constructor that returns an instance of a class, but it does not necessarily create a new object every time it's called. The purpose of a factory constructor is to allow classes to provide alternative ways to create objects without exposing the implementation details of the object creation process. For example, a factory constructor could return an instance from a cache, return a subtype of the class, or use a factory method to create an instance. @@ -1015,9 +1386,17 @@ In this example, the factory constructor `Rectangle.square` takes a side paramet This helps to create a more flexible and reusable codebase, and it also makes it easier to maintain and test the code. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q49. Can you explain the process of testing a Flutter app? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-factory-constructor/en-US.mdx) + +
+ +### Can you explain the process of testing a Flutter app? + + The process of testing a Flutter app involves writing and running different types of tests to verify the behavior and functionality of the app. There are two main types of tests in Flutter: unit tests and integration tests. Unit tests focus on individual pieces of code, such as a single function or widget, and test their behavior in isolation. Integration tests, on the other hand, test the app as a whole, including the interactions between different parts of the app. @@ -1027,9 +1406,17 @@ When it comes to testing, we can use a combination of manual testing and automat In addition to writing tests, we can also use a number of tools and techniques to test Flutter apps, such as code coverage tools to measure the amount of code that is covered by tests, performance testing tools to measure the performance of the app under different conditions, and accessibility testing tools to ensure that the app is accessible to users with disabilities. Overall, testing is a crucial part of the development process in Flutter and helps to ensure that the app is of high quality and meets the requirements of the users. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/can-you-explain-the-process-of-testing-a-flutter-app/en-US.mdx) -## Q50. Explain singleton class in flutter. +
+ +### Explain singleton class in flutter. + + A singleton class is a class that can only be instantiated once throughout the entire application. It provides a single point of access to a shared instance of an object, which can be accessed from anywhere in the application. @@ -1062,15 +1449,43 @@ singleton.doSomething(); This will create a single instance of `MySingleton` and call the `doSomething` method on it. Since `MySingleton` is a singleton class, any subsequent calls to the `MySingleton()` constructor will simply return the existing instance of the class, rather than creating a new instance. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/explain-singleton-class-in-flutter/en-US.mdx) + +
+ +### What technology is Flutter built with? + + -## Q51. What technology is Flutter built with? +Flutter is an open-source UI software development toolkit created by Google for building natively compiled applications across mobile, web, and desktop from a single codebase. It's primarily developed using the Dart programming language, also by Google, which supports ahead-of-time (AOT) compilation for high-performance execution. -Flutter is an open-source mobile application development framework that is built with the Dart programming language. Dart is a modern, object-oriented language that is designed to be easy to learn and use, while providing a robust set of features that are optimized for building web and mobile applications. Flutter is built on top of Dart, and provides a set of pre-built widgets and tools that make it easy to build high-performance, cross-platform mobile applications with a native look and feel. Additionally, Flutter uses the Skia graphics engine to render high-quality graphics and animations on multiple platforms, including iOS, Android, and the web. +The architecture of Flutter comprises three main components: -**[⬆ Back to Top](#flutter-interview-questions)** +1. **Flutter Framework**: Written in Dart, this layer provides a comprehensive set of libraries and widgets, including Material Design and Cupertino (iOS-style) widgets, enabling developers to craft highly customizable user interfaces. -## Q52. What is the event loop? +2. **Flutter Engine**: Primarily written in C++, the engine is responsible for rendering and core functionalities. Initially, Flutter utilized the Skia graphics library for rendering. However, with the release of Flutter 3.27, the Impeller rendering engine has become the default on both iOS and Android platforms. Impeller aims to deliver more predictable performance by precompiling shaders and leveraging modern graphics APIs like Metal. + +3. **Embedder**: This component allows Flutter applications to run on various platforms by providing an entry point and access to native APIs. It's platform-specific and integrates the Flutter engine into the target operating system. + +**Further Reading:** + +- [Flutter Architectural Overview](https://docs.flutter.dev/resources/architectural-overview) + + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-technology-is-flutter-built-with/en-US.mdx) + +
+ +### What is the event loop? + + In Flutter, the event loop is a mechanism used to manage the flow of events and callbacks in an application. The event loop runs on a single thread and is responsible for processing events, such as user input or network I/O, and executing any associated callbacks. @@ -1078,9 +1493,17 @@ The event loop works by maintaining a queue of events and callbacks that need to The event loop is a crucial part of the Flutter framework, as it allows developers to create responsive and interactive applications that can handle user input and respond to changes in real-time. By using the event loop effectively, developers can ensure that their applications remain fast and responsive, even when performing complex tasks or running on slower devices. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q53. What is the difference between Provider vs. InheritedWidget? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-event-loop/en-US.mdx) + +
+ +### What is the difference between Provider vs. InheritedWidget? + + Provider and InheritedWidget are both ways to share data between widgets in Flutter, but they differ in their implementation and approach. @@ -1090,9 +1513,17 @@ Provider is a third-party package that provides an easy and efficient way to man In summary, while both Provider and InheritedWidget can be used to share data between widgets, Provider offers a more declarative and scalable approach to managing state, while InheritedWidget is a built-in widget in Flutter that can be used for simple to moderately complex use cases. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q54. What is the purpose of the `initState()` method in a StatefulWidget? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-provider-vs-inheritedwidget/en-US.mdx) + +
+ +### What is the purpose of the `initState()` method in a StatefulWidget? + + The `initState()` method is a lifecycle method in the `StatefulWidget` class of the Flutter framework. It is called once when the stateful widget is first inserted into the widget tree and it is used to initialize the state of the widget. @@ -1100,9 +1531,17 @@ In the `initState()` method, we can perform one-time initialization tasks, such Overall, the `initState()` method provides a way to set up the initial state of the widget and perform any necessary initialization tasks. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget/en-US.mdx) -## Q55. What is the purpose of the `dispose()` method in a StatefulWidget? +
+ +### What is the purpose of the `dispose()` method in a StatefulWidget? + + The `dispose()` method is a lifecycle method in the `State` class of a `StatefulWidget` in the Flutter framework. It is called when the stateful widget is removed from the widget tree, giving us the opportunity to perform any cleanup tasks or release any resources that the widget may have used. @@ -1112,9 +1551,17 @@ It is important to note that the `dispose()` method is not called during a hot r Overall, the `dispose()` method provides a way to clean up any resources that the widget may have used, ensuring that the application runs smoothly and efficiently. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q56. What is a GlobalKey in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget/en-US.mdx) + +
+ +### What is a GlobalKey in Flutter? + + A `GlobalKey` is a unique identifier for a widget in the widget tree, allowing the widget to be accessed and manipulated from outside of its parent or ancestor widgets. It is a class in the Flutter framework that can be used with stateful or stateless widgets to uniquely identify a widget. @@ -1122,9 +1569,17 @@ With a `GlobalKey`, we can access a widget's state, as well as invoke its method However, it is important to use `GlobalKey` sparingly and only when necessary, as overuse can lead to poor code maintainability and performance issues. When possible, it is generally recommended to use the `BuildContext` object and Flutter's reactive programming model to handle state and data management in the application. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-a-globalkey-in-flutter/en-US.mdx) -## Q57. What is the difference between padding and margin in Flutter? +
+ +### What is the difference between padding and margin in Flutter? + + In Flutter, `padding` and `margin` are two properties used to adjust the spacing between widgets in the layout. @@ -1134,9 +1589,17 @@ In Flutter, `padding` and `margin` are two properties used to adjust the spacing In summary, `padding` is used to adjust the space inside a widget while `margin` is used to adjust the space outside a widget. Both `padding` and `margin` are important properties for achieving the desired layout and spacing between widgets in a Flutter application. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q58. What is the purpose of the scaffold widget in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-padding-and-margin-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the scaffold widget in Flutter? + + The `Scaffold` widget in Flutter is a basic structure or layout for a screen or a page in a Flutter application. It provides a visual structure for displaying a material design-style layout, which includes app bars, drawers, floating action buttons, and more. @@ -1144,9 +1607,17 @@ The Scaffold widget serves as a container for different widgets, such as a `AppB Using a Scaffold widget can help to quickly build a basic structure for a Flutter application's user interface. The widgets it contains can be customized to achieve a wide range of designs and functionalities. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q59. What is the purpose of the Expanded widget in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-scaffold-widget-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the Expanded widget in Flutter? + + In Flutter, the `Expanded` widget is used to adjust the available space for a child widget of a `Row`, `Column`, or `Flex` widget, by dividing the remaining free space among the children. @@ -1154,9 +1625,17 @@ When an `Expanded` widget is used, the child widget of the Row, Column, or Flex If there is more than one Expanded widget in the same Row, Column, or Flex, the available space is divided among the children based on their `flex` property, which determines the proportion of the remaining free space that each child should occupy. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-expanded-widget-in-flutter/en-US.mdx) -## Q60. How do you handle user input in Flutter? +
+ +### How do you handle user input in Flutter? + + In Flutter, we can handle user input through various widgets such as `TextField`, `Checkbox`, `Radio`, `Slider`, `DropdownButton`, `GestureDetector`, and more. @@ -1167,11 +1646,19 @@ Here is a simple process for handling user input in Flutter: 3. In the callback function, update the state of the application based on the user's input. For example, we can update a bool variable when the user toggles a `Checkbox`, or update a String variable when the user types into a `TextField`. 4. If the state has changed, call `setState()` to rebuild the UI with the updated state. -It's important to note that the specific process for handling user input will vary depending on the widget and the requirements of the app. +It's important to note that the specific process for handling user input will vary depending on the widget and the requirements of the app. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q61. What is the purpose of the `LayoutBuilder` widget in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-handle-user-input-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `LayoutBuilder` widget in Flutter? + + The `LayoutBuilder` widget in Flutter is used to get the constraints of the parent widget and build child widgets based on these constraints. @@ -1195,9 +1682,17 @@ LayoutBuilder( In this example, the `Container` widget will take up 50% of the available width and height, based on the `BoxConstraints` provided by the `LayoutBuilder`. This allows the widget to adjust its size based on the available space, making it more responsive. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q62. What is the purpose of the `SingleChildScrollView` widget in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `SingleChildScrollView` widget in Flutter? + + The `SingleChildScrollView` widget in Flutter is used to make its child widget scrollable if it overflows the parent container. @@ -1222,9 +1717,17 @@ SingleChildScrollView( In this example, the `SingleChildScrollView` wraps a `Column` widget containing several `ListTile` widgets. If the content of the `Column` is too large to fit on the screen, the user can scroll through it to see all of the items. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q63. What is the purpose of the `Stack` widget in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `Stack` widget in Flutter? + + In Flutter, the `Stack` widget is used to place widgets on top of each other in a specific order. It allows to position widgets at specific locations within the parent widget by using offsets or alignment. @@ -1239,9 +1742,17 @@ Stack( ), ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q64. What is a `Theme` in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-stack-widget-in-flutter/en-US.mdx) + +
+ +### What is a `Theme` in Flutter? + + In Flutter, a `Theme` is a widget that provides a way to customize the visual appearance of an app. A `Theme` widget can be used to set the colors, fonts, and other visual properties for a specific part or the entire app. @@ -1268,9 +1779,17 @@ MaterialApp( ), ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-a-theme-in-flutter/en-US.mdx) -## Q65. What is the purpose of the `Visibility` widget in Flutter? +
+ +### What is the purpose of the `Visibility` widget in Flutter? + + In Flutter, the `Visibility` widget is used to control the visibility of a child widget based on a certain condition. The `Visibility` widget can be used to show or hide a widget dynamically, based on user interactions or other conditions. @@ -1292,9 +1811,17 @@ Visibility( ), ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q66. How do you navigate between screens in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-visibility-widget-in-flutter/en-US.mdx) + +
+ +### How do you navigate between screens in Flutter? + + In Flutter, we can navigate between screens using the `Navigator` class. We can push a new screen onto the stack using the `push` method, and pop the current screen off the stack using the `pop` method. We can also use named routes to navigate between screens. To do this, we need to define a map of named routes in the `MaterialApp`, and then use the `Navigator.pushNamed` method to navigate to a specific named route. @@ -1313,9 +1840,17 @@ Here are the basic steps to navigate between screens in Flutter: Navigator.pop(context), ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q67. What is a modal bottom sheet in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-navigate-between-screens-in-flutter/en-US.mdx) + +
+ +### What is a modal bottom sheet in Flutter? + + In Flutter, a modal bottom sheet is a type of popup that is displayed at the bottom of the screen and covers a portion of the parent widget. Modal bottom sheets are commonly used to display additional options or information that are related to the parent widget, but require additional user input to complete an action. @@ -1332,9 +1867,17 @@ showModalBottomSheet( ); ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-a-modal-bottom-sheet-in-flutter/en-US.mdx) -## Q68. How do you use the `ValueNotifier` class in Flutter? +
+ +### How do you use the `ValueNotifier` class in Flutter? + + In Flutter, the `ValueNotifier` class is a simple class that provides a way to listen for changes to a value and update the UI accordingly. It's a convenient way to manage state for a small number of widgets, and is often used in combination with the `ChangeNotifier` and `Provider` classes from the Flutter `provider` package. @@ -1361,9 +1904,17 @@ To update the value of a `ValueNotifier`, simply set its value property: _myValue.value = 'New Value'; ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q69. How do you use the `Positioned` widget in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-use-the-valuenotifier-class-in-flutter/en-US.mdx) + +
+ +### How do you use the `Positioned` widget in Flutter? + + In Flutter, the `Positioned` widget is used to position a child widget within a `Stack` widget. The `Positioned` widget takes four optional arguments: `left`, `top`, `right`, and `bottom`, which specify the position of the child widget relative to the edges of the parent `Stack` widget. @@ -1388,9 +1939,17 @@ Stack( In this example, we create a Stack widget with two child widgets that are positioned at opposite corners of the Stack. The first child widget is positioned 10 pixels from the left and top edges of the Stack, while the second child widget is positioned 10 pixels from the right and bottom edges of the Stack. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-use-the-positioned-widget-in-flutter/en-US.mdx) -## Q70. How do you pass data between screens in Flutter? +
+ +### How do you pass data between screens in Flutter? + + In Flutter, we can pass data between screens using various methods. Some of the most commonly used methods are: @@ -1437,9 +1996,17 @@ In Flutter, we can pass data between screens using various methods. Some of the 3. **Using a state management library**: We can use a state management library like Provider, Riverpod, Bloc, or MobX to manage the state of the app and pass data between screens. This approach is especially useful when complex data needs to be shared between multiple screens. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q71. What is a `MediaQuery` in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-pass-data-between-screens-in-flutter/en-US.mdx) + +
+ +### What is a `MediaQuery` in Flutter? + + In Flutter, a `MediaQuery` is a widget that provides information about the device's screen size, orientation, and other display-related characteristics. It is typically used to create responsive UIs that adapt to different screen sizes and densities. @@ -1451,9 +2018,17 @@ The `MediaQuery` widget is usually placed at the root of the widget tree, and it - **Text scaling factor**: `MediaQueryData.textScaleFactor` returns the user's preferred text scaling factor, which can be used to adjust the font size of text in the app. - **Platform**: `MediaQueryData.platformBrightness` returns the platform's preferred brightness mode (light or dark). -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q72. What is the purpose of the `didUpdateWidget` method in a StatefulWidget? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-a-mediaquery-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `didUpdateWidget` method in a StatefulWidget? + + In Flutter, `StatefulWidget` is a widget that has mutable state that can change over time. When the state of a `StatefulWidget` changes, the framework rebuilds the widget tree to reflect the new state. @@ -1499,9 +2074,17 @@ class _MyWidgetState extends State { In this example, we define a `StatefulWidget` called `MyWidget` that takes a data parameter in its constructor. We use the `didUpdateWidget` method to update the widget's state (i.e., the `_data` variable) when the data parameter changes. When the widget is built, it displays the current value of `_data` using a `Text` widget. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget/en-US.mdx) -## Q73. What is a `CustomPainter` in Flutter? +
+ +### What is a `CustomPainter` in Flutter? + + In Flutter, a `CustomPainter` is a class that allows to create custom graphics and animations by painting on a Canvas. It is used in conjunction with a `CustomPaint` widget to create custom visuals that can be added to a widget tree. @@ -1530,9 +2113,17 @@ CustomPaint( ), ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q74. What is the purpose of the `AnimatedBuilder` widget in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-a-custompainter-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `AnimatedBuilder` widget in Flutter? + + The `AnimatedBuilder` widget in Flutter is used to create complex animations by separating the animation logic from the widget tree. It provides a builder function that returns a widget tree, and an animation object that can be used to animate the properties of the widgets in the tree. @@ -1577,9 +2168,17 @@ class _MyWidgetState extends State with SingleTickerProviderStateMixin } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q75. What is the purpose of the `Navigator` class in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `Navigator` class in Flutter? + + In Flutter, the `Navigator` class is used to manage a stack of pages or routes in an app. It provides methods to push and pop routes onto and off of the stack, allowing the user to navigate between different screens or views within the app. @@ -1590,9 +2189,17 @@ Here are some of the key features and use cases of the `Navigator` class in Flut 3. The `Navigator` class allows to manage the navigation history by controlling which routes are pushed onto and popped off of the stack. 4. The `Navigator` class provides options to customize the transition animation when navigating between routes, such as sliding, fading, or scaling the new route into view. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q76. What is the purpose of the `AnimatedSwitcher` widget in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-navigator-class-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `AnimatedSwitcher` widget in Flutter? + + The `AnimatedSwitcher` widget in Flutter is used to create animated transitions between two or more widgets. The purpose of the `AnimatedSwitcher` widget is to provide an easy-to-use way to animate changes in the widget tree. When you use the `AnimatedSwitcher`, you can specify a new child widget to be displayed, and the `AnimatedSwitcher` will animate the transition between the old and new widgets using a customizable animation. @@ -1604,9 +2211,17 @@ Some common use cases for the `AnimatedSwitcher` widget include: - Animating changes to a list of items, such as adding or removing items - Creating smooth transitions between screens or pages in a multi-page app -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q77. What is the purpose of the `FittedBox` widget in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the `FittedBox` widget in Flutter? + + The `FittedBox` widget in Flutter is used to automatically scale and position its child within its own bounds. The purpose of the `FittedBox` widget is to provide an easy-to-use way to adjust the size and position of a child widget to fit within its parent widget. When using the `FittedBox`, we can specify a child widget that is larger or smaller than its parent, and the `FittedBox` will automatically scale and position the child widget to fit within the parent widget's bounds. @@ -1618,9 +2233,17 @@ Some common use cases for the `FittedBox` widget include: - Scaling and positioning text within a layout to fit within available space - Scaling and positioning UI elements to fit within different screen sizes. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-fittedbox-widget-in-flutter/en-US.mdx) -## Q78. What is State Management in Flutter? +
+ +### What is State Management in Flutter? + + State management in Flutter refers to the management of the state of widgets and their properties in a Flutter app. State management is an essential concept in Flutter because it allows developers to create dynamic and interactive user interfaces that respond to user input and changes in data. @@ -1636,9 +2259,17 @@ State management in Flutter involves managing the state of stateful widgets, whi - **BLoC (Business Logic Component) pattern**: This is a design pattern that separates the business logic and presentation layers of an app. BLoC can be used for state management by creating a stream of events that represent changes to the state of the widget. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q79. What is the difference between Cupertino and Material Design in Flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-state-management-in-flutter/en-US.mdx) + +
+ +### What is the difference between Cupertino and Material Design in Flutter? + + Cupertino and Material Design are two design languages used in Flutter for building iOS and Android apps, respectively. While both design languages follow different design principles and have unique features, they share some similarities as well. @@ -1654,9 +2285,17 @@ Here are some of the main differences between Cupertino and Material Design in F Despite these differences, both design languages share some commonalities in the way they implement responsive design and use animations to enhance the user experience. Flutter allows developers to easily switch between Cupertino and Material Design widgets and design principles, making it possible to create apps that have a consistent look and feel across both iOS and Android platforms. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q80. What is the purpose of the Material Design Icons package in Flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-difference-between-cupertino-and-material-design-in-flutter/en-US.mdx) + +
+ +### What is the purpose of the Material Design Icons package in Flutter? + + The Material Design Icons package in Flutter provides a set of icons that follow the Material Design guidelines for iconography. These icons are designed to be simple, easy to recognize, and scalable, making them ideal for use in mobile apps and web applications. @@ -1685,9 +2324,17 @@ class MyApp extends StatelessWidget { Overall, the Material Design Icons package is a useful resource for Flutter developers, as it provides a large set of high-quality icons that can be used to enhance the user experience of their apps. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-purpose-of-the-material-design-icons-package-in-flutter/en-US.mdx) -## Q81. Explain how you will deploy a Flutter app to the Google Play/App Store? +
+ +### Explain how you will deploy a Flutter app to the Google Play/App Store? + + To deploy a Flutter app to the Google Play Store or App Store, follow these steps while adhering to their respective guidelines on content, user privacy, and design: @@ -1711,9 +2358,17 @@ Ensure you test the app thoroughly and address any guidelines to streamline the - [Google Play Store Guildelines](https://play.google.com/console/about/guides/releasewithconfidence/) - [Apple App Review Guildelines](https://developer.apple.com/app-store/review/guidelines/) -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q82. What are the advantages of a Flutter Inspector? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store/en-US.mdx) + +
+ +### What are the advantages of a Flutter Inspector? + + The Flutter Inspector provides several key features that help developers debug and optimize their applications: @@ -1733,9 +2388,17 @@ The Flutter Inspector provides several key features that help developers debug a These tools enhance the debugging process and improve the performance of your Flutter app by providing in-depth visual feedback during development. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-the-advantages-of-a-flutter-inspector/en-US.mdx) -## Q83. List the responsibilities of `FlutterActivity`. +
+ +### List the responsibilities of `FlutterActivity`. + + `FlutterActivity` is the simplest and most direct way to integrate Flutter within an Android app. @@ -1749,11 +2412,19 @@ These tools enhance the debugging process and improve the performance of your Fl - Offers hooks for subclasses to provide and configure a `FlutterEngine`. - Save and restore instance state. -Learn more [here about FlutterActivitiy](https://api.flutter.dev/javadoc/io/flutter/embedding/android/FlutterActivity.html). +Learn more about [FlutterActivitiy](https://api.flutter.dev/javadoc/io/flutter/embedding/android/FlutterActivity.html). -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q84. Can you describe how to implement internationalization in a flutter app? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/list-the-responsibilities-of-flutteractivity/en-US.mdx) + +
+ +### Can you describe how to implement internationalization in a flutter app? + + To implement internationalization (i18n) in a Flutter app: @@ -1764,9 +2435,17 @@ To implement internationalization (i18n) in a Flutter app: - Use the generated localization class (e.g., `AppLocalizations.of(context).`) to access translated strings. - Test the app by switching locales in device settings and updating .arb files as needed. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q85. How do you implement a custom transition between screens in flutter? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/can-you-describe-how-to-implement-internationalization-in-a-flutter-app/en-US.mdx) + +
+ +### How do you implement a custom transition between screens in flutter? + + To implement a custom transition between screens in flutter: @@ -1792,9 +2471,17 @@ Navigator.push( ); ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-implement-a-custom-transition-between-screens-in-flutter/en-US.mdx) -## Q86. How do you implement a custom animation curve in flutter? +
+ +### How do you implement a custom animation curve in flutter? + + To implement a custom animation curve in Flutter: @@ -1816,9 +2503,17 @@ final animation = CurvedAnimation( ); ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q87. How do you implement a draggable widget in flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-implement-a-custom-animation-curve-in-flutter/en-US.mdx) + +
+ +### How do you implement a draggable widget in flutter? + + To implement a draggable widget in flutter, use the `Draggable` widget. Here's how to do it: @@ -1840,9 +2535,17 @@ Draggable( In this example, when the user starts dragging the icon, it shows a smaller icon as the feedback. The original icon disappears until the drag ends. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q88. How do you provide accessibility when developing flutter apps, do you at all? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-implement-a-draggable-widget-in-flutter/en-US.mdx) + +
+ +### How do you provide accessibility when developing flutter apps, do you at all? + + Yes, accessibility is a critical aspect of Flutter app development to ensure that the app is usable by everyone, including users with disabilities. In Flutter, several techniques are available to enhance accessibility: @@ -1867,13 +2570,21 @@ Semantics( By using these techniques and Flutter's built-in tools, we can create more inclusive and accessible apps. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q89. How to create a list with persistent headers? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all/en-US.mdx) + +
+ +### How to create a list with persistent headers? + + To create a list with persistent headers in flutter, we can use the `CustomScrollView` widget along with `SliverList` and `SliverPersistentHeader`. This allows to have headers that remain visible as the user scrolls through the list. -Here’s how to do it: +Here's how to do it: - Wrap the list and header in a `CustomScrollView` to enable scrolling and custom behaviors. - The `SliverPersistentHeader` widget allows to create a header that can remain fixed or scroll away as the user scrolls the list. - Inside `SliverPersistentHeader`, we can define the header's appearance, and we can also control whether it stays fixed or scrolls away. @@ -1922,9 +2633,17 @@ class _MyPersistentHeaderDelegate extends SliverPersistentHeaderDelegate { } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q90. Can you communicate between isolates? Describe an Isolate? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-to-create-a-list-with-persistent-headers/en-US.mdx) + +
+ +### Can you communicate between isolates? Describe an Isolate? + + Yes, you can communicate between isolates in Dart using message passing via `SendPort` and `ReceivePort`. Isolates do not share memory, and each isolate has its own memory space and event loop. To communicate, one isolate sends messages to another through a `SendPort`, and the receiving isolate listens on a `ReceivePort`. @@ -1954,9 +2673,17 @@ void isolateFunction(SendPort sendPort) { } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/can-you-communicate-between-isolates-describe-an-isolate/en-US.mdx) -## Q91. Explain what a ticker is in flutter. +
+ +### Explain what a ticker is in flutter. + + In Flutter, a ticker is a mechanism that helps to drive animations. It provides a continuous stream of time, essentially ticking at a fixed interval (typically the frame rate). This enables the animation framework to update the UI at a consistent rate. @@ -1993,9 +2720,17 @@ class _MyAnimatedWidgetState extends State with TickerProvider } ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q92. What are the various kinds of Streams present in flutter? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/explain-what-a-ticker-is-in-flutter/en-US.mdx) + +
+ +### What are the various kinds of Streams present in flutter? + + Streams in flutter are of two main types: @@ -2010,9 +2745,17 @@ Streams in flutter are of two main types: - Ideal for scenarios where the same data needs to be shared across multiple listeners. - Often used for shared events, like a global notification system. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q93. What is the Flutter rendering pipeline and how does it work? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-the-various-kinds-of-streams-present-in-flutter/en-US.mdx) + +
+ +### What is the Flutter rendering pipeline and how does it work? + + The Flutter rendering pipeline is the process through which Flutter converts UI code into pixels on the screen. It has the following stages: @@ -2025,9 +2768,17 @@ The Flutter rendering pipeline is the process through which Flutter converts UI 7. **Rasterization:** The Skia engine takes the composited layers and converts them into actual pixels to display on the screen. 8. **GPU Rendering:** Finally, the GPU renders the rasterized content onto the device screen. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-flutter-rendering-pipeline-and-how-does-it-work/en-US.mdx) -## Q94. What is the role of the `FlutterEngine` in the Flutter framework? +
+ +### What is the role of the `FlutterEngine` in the Flutter framework? + + The Flutter Engine is a portable runtime for hosting Flutter applications. It implements Flutter's core libraries, including animation and graphics, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain. It: @@ -2036,9 +2787,17 @@ The Flutter Engine is a portable runtime for hosting Flutter applications. It im - Facilitates communication between Flutter and native code through platform channels. - Handles plugin integration and app lifecycle events. -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q95. What are platform channels in Flutter and when would you use them? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-the-role-of-the-flutterengine-in-the-flutter-framework/en-US.mdx) + +
+ +### What are platform channels in Flutter and when would you use them? + + Platform channels in Flutter enable communication between Flutter’s Dart code and the host platform's native code (e.g., Java/Kotlin on Android or Swift/Objective-C on iOS). They are used when you need to access platform-specific APIs or features not directly available in Flutter. @@ -2070,9 +2829,17 @@ new MethodChannel(getFlutterEngine().getDartExecutor().getBinaryMessenger(), "sa }); ``` -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-platform-channels-in-flutter-and-when-would-you-use-them/en-US.mdx) -## Q96. How do you work with multiple Flutter flavors? +
+ +### How do you work with multiple Flutter flavors? + + To work with multiple Flutter flavors, follow these steps: @@ -2087,9 +2854,17 @@ flutter run --flavor dev -t lib/main_dev.dart flutter build apk --flavor prod -t lib/main_prod.dart ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q97. What is code-splitting in Flutter, and how does it help? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-you-work-with-multiple-flutter-flavors/en-US.mdx) + +
+ +### What is code-splitting in Flutter, and how does it help? + + In Flutter, code-splitting refers to dividing your app's code into smaller, independent modules that can be loaded on demand, rather than loading the entire app at once. This technique is typically used with deferred components or dynamic libraries. @@ -2103,9 +2878,17 @@ For example, in large Flutter apps, you can defer loading less frequently used f In practice, it enhances scalability and performance, especially in apps with extensive functionality. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
-## Q98. What are the differences between JIT and AOT? +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-is-code-splitting-in-flutter-and-how-does-it-help/en-US.mdx) + +
+ +### What are the differences between JIT and AOT? + + JIT stands for Just-in-Time vs AOT stands for Ahead-of-Time. @@ -2119,9 +2902,17 @@ Key Differences: In Flutter, JIT is used in debug mode, and AOT is used in release mode for optimized apps. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/what-are-the-differences-between-jit-and-aot/en-US.mdx) -## Q99. How doΒ Object,Β dynamic, andΒ varΒ differ in Dart? +
+ +### How do Object, dynamic, and var differ in Dart? + + In Dart, Object, dynamic, and var are used for variable declarations but differ in how types are handled: @@ -2143,9 +2934,17 @@ dynamic obj = "Hello"; // obj.length; (no type safety, but flexible) var obj = "Hello"; // (obj is inferred as String) ``` -**[⬆ Back to Top](#flutter-interview-questions)** + -## Q100. How do mixins differ from interfaces in Dart? +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-doobjectdynamic-andvardiffer-in-dart/en-US.mdx) + +
+ +### How do mixins differ from interfaces in Dart? + + In Dart, mixins and interfaces serve different purposes: @@ -2178,4 +2977,139 @@ class Dog implements Animal { - Mixins provide code reuse; can be used with multiple classes. - Interfaces define required methods, but no code reuse. A class can implement multiple interfaces. -**[⬆ Back to Top](#flutter-interview-questions)** + + +
+ +[Back to top ↑](#table-of-contents)   /   [πŸ–ŒοΈ Edit answer](https://github.com/thisissandipp/flutter-interview-questions/edit/main/questions/how-do-mixins-differ-from-interfaces-in-dart/en-US.mdx) + +
+ + + + +## Questions by Difficulty + +Flutter Interview Questions categorized by difficulty. + +### Easy-level Flutter Interview Questions + + + +1. [What is Flutter?](#what-is-flutter) +2. [What is Dart and Why does Flutter use it?](#what-is-dart-and-why-does-flutter-use-it) +3. [What is `pubspec.yaml` file and what does it do?](#what-is-pubspecyaml-file-and-what-does-it-do) +4. [What is the difference between `main()` and `runApp()` functions in Flutter?](#what-is-the-difference-between-main-and-runapp-functions-in-flutter) +5. [Differentiate between named parameters and positional parameters in Flutter.](#differentiate-between-named-parameters-and-positional-parameters-in-flutter) +6. [What are widgets in Flutter?](#what-are-widgets-in-flutter) +7. [What is `Hot Reload` and `Hot Restart` in Flutter?](#what-is-hot-reload-and-hot-restart-in-flutter) +8. [What do you mean by open-source software? Is Flutter open-source?](#what-do-you-mean-by-open-source-software-is-flutter-open-source) +9. [Differentiate between `StatelessWidget` and `StatefulWidget` in Flutter.](#differentiate-between-statelesswidget-and-statefulwidget-in-flutter) +10. [What are packages and plugins in Flutter?](#what-are-packages-and-plugins-in-flutter) +11. [Name some popular apps made with Flutter.](#name-some-popular-apps-made-with-flutter) +12. [Differentiate between final, const and static keyword.](#differentiate-between-final-const-and-static-keyword) +13. [What is Fat Arrow Notation in Dart?](#what-is-fat-arrow-notation-in-dart) +14. [What is the purpose of `SafeArea` widget in Flutter?](#what-is-the-purpose-of-safearea-widget-in-flutter) +15. [Differentiate between `mainAxisAlignment` and `crossAxisAlignment`.](#differentiate-between-mainaxisalignment-and-crossaxisalignment) +16. [What is the difference between `Container` and `SizedBox` widget?](#what-is-the-difference-between-container-and-sizedbox-widget) +17. [What do you mean by Null-aware operators?](#what-do-you-mean-by-null-aware-operators) +18. [What is `TextEditingController`?](#what-is-texteditingcontroller) +19. [What is an `AspectRatio` widget used for?](#what-is-an-aspectratio-widget-used-for) +20. [What is `assert` used for in Dart and Flutter?](#what-is-assert-used-for-in-dart-and-flutter) +21. [How would you make HTTP requests in the Flutter framework?](#how-would-you-make-http-requests-in-the-flutter-framework) +22. [What technology is Flutter built with?](#what-technology-is-flutter-built-with) +23. [What is the purpose of the `initState()` method in a StatefulWidget?](#what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget) +24. [What is the purpose of the `dispose()` method in a StatefulWidget?](#what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget) +25. [What is the difference between padding and margin in Flutter?](#what-is-the-difference-between-padding-and-margin-in-flutter) +26. [What is the purpose of the scaffold widget in Flutter?](#what-is-the-purpose-of-the-scaffold-widget-in-flutter) +27. [What is the purpose of the Expanded widget in Flutter?](#what-is-the-purpose-of-the-expanded-widget-in-flutter) +28. [What is the purpose of the `SingleChildScrollView` widget in Flutter?](#what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter) +29. [What is the purpose of the `Stack` widget in Flutter?](#what-is-the-purpose-of-the-stack-widget-in-flutter) +30. [What is a `Theme` in Flutter?](#what-is-a-theme-in-flutter) +31. [What is the purpose of the `Visibility` widget in Flutter?](#what-is-the-purpose-of-the-visibility-widget-in-flutter) +32. [How do you navigate between screens in Flutter?](#how-do-you-navigate-between-screens-in-flutter) +33. [What is a modal bottom sheet in Flutter?](#what-is-a-modal-bottom-sheet-in-flutter) +34. [How do you use the `Positioned` widget in Flutter?](#how-do-you-use-the-positioned-widget-in-flutter) +35. [How do you pass data between screens in Flutter?](#how-do-you-pass-data-between-screens-in-flutter) +36. [What is the purpose of the `Navigator` class in Flutter?](#what-is-the-purpose-of-the-navigator-class-in-flutter) +37. [What is the purpose of the `FittedBox` widget in Flutter?](#what-is-the-purpose-of-the-fittedbox-widget-in-flutter) +38. [What is the difference between Cupertino and Material Design in Flutter?](#what-is-the-difference-between-cupertino-and-material-design-in-flutter) +39. [What is the purpose of the Material Design Icons package in Flutter?](#what-is-the-purpose-of-the-material-design-icons-package-in-flutter) +40. [How do Object, dynamic, and var differ in Dart?](#how-doobjectdynamic-andvardiffer-in-dart) + + + +### Intermediate-level Flutter Interview Questions + + + +1. [What is `BuildContext` in Flutter? And why is it needed?](#what-is-buildcontext-in-flutter-and-why-is-it-needed) +2. [What are different build modes in Flutter?](#what-are-different-build-modes-in-flutter) +3. [What is the difference between `WidgetsApp` and `MaterialApp` in Flutter?](#what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter) +4. [What are `StatefulWidget` Lifecycle methods. Explain briefly.](#what-are-statefulwidget-lifecycle-methods-explain-briefly) +5. [What are keys and why do we need them?](#what-are-keys-and-why-do-we-need-them) +6. [What is the difference between `Expanded` and `Flexible` widget?](#what-is-the-difference-between-expanded-and-flexible-widget) +7. [What is the extension method in Dart?](#what-is-the-extension-method-in-dart) +8. [Explain the `mounted` property. How is it important and when to use it?](#explain-the-mounted-property-how-is-it-important-and-when-to-use-it) +9. [What is sound null safety?](#what-is-sound-null-safety) +10. [What are mixins? How to use them?](#what-are-mixins-how-to-use-them) +11. [What is `AppLifecycleState`?](#what-is-applifecyclestate) +12. [What is the difference between `NetworkImage` and `Image.network` in flutter?](#what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter) +13. [Explain async, await and Future.](#explain-async-await-and-future) +14. [What is `resizeToAvoidBottomInset`? When should we use it?](#what-is-resizetoavoidbottominset-when-should-we-use-it) +15. [What is `Animation` and `AnimationController`?](#what-is-animation-and-animationcontroller) +16. [Differentiate between `Stream` and `Future` in Flutter.](#differentiate-between-stream-and-future-in-flutter) +17. [Can you explain the process of creating custom widgets in Flutter?](#can-you-explain-the-process-of-creating-custom-widgets-in-flutter) +18. [What is Typedef in Dart?](#what-is-typedef-in-dart) +19. [What is `FutureBuilder` in Flutter and how is it used to build dynamic UI?](#what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui) +20. [How do you handle exceptions in Flutter, and what strategies have you used?](#how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used) +21. [What are DevTools in Flutter?](#what-are-devtools-in-flutter) +22. [What is Factory constructor?](#what-is-factory-constructor) +23. [Explain singleton class in flutter.](#explain-singleton-class-in-flutter) +24. [What is the event loop?](#what-is-the-event-loop) +25. [What is the difference between Provider vs. InheritedWidget?](#what-is-the-difference-between-provider-vs-inheritedwidget) +26. [What is a GlobalKey in Flutter?](#what-is-a-globalkey-in-flutter) +27. [How do you handle user input in Flutter?](#how-do-you-handle-user-input-in-flutter) +28. [What is the purpose of the `LayoutBuilder` widget in Flutter?](#what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter) +29. [How do you use the `ValueNotifier` class in Flutter?](#how-do-you-use-the-valuenotifier-class-in-flutter) +30. [What is a `MediaQuery` in Flutter?](#what-is-a-mediaquery-in-flutter) +31. [What is the purpose of the `didUpdateWidget` method in a StatefulWidget?](#what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget) +32. [What is the purpose of the `AnimatedBuilder` widget in Flutter?](#what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter) +33. [What is the purpose of the `AnimatedSwitcher` widget in Flutter?](#what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter) +34. [What is State Management in Flutter?](#what-is-state-management-in-flutter) +35. [How do you implement a draggable widget in flutter?](#how-do-you-implement-a-draggable-widget-in-flutter) +36. [How do you provide accessibility when developing flutter apps, do you at all?](#how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all) +37. [How to create a list with persistent headers?](#how-to-create-a-list-with-persistent-headers) +38. [Explain what a ticker is in flutter.](#explain-what-a-ticker-is-in-flutter) +39. [What are the various kinds of Streams present in flutter?](#what-are-the-various-kinds-of-streams-present-in-flutter) +40. [What are the differences between JIT and AOT?](#what-are-the-differences-between-jit-and-aot) +41. [How do mixins differ from interfaces in Dart?](#how-do-mixins-differ-from-interfaces-in-dart) + + + +### Advanced-level Flutter Interview Questions + + + +1. [What are `Slivers`?](#what-are-slivers) +2. [What is `InheritedWidget` in Flutter?](#what-is-inheritedwidget-in-flutter) +3. [What is Flutter Tree Shaking?](#what-is-flutter-tree-shaking) +4. [What is `vsync`? Explain.](#what-is-vsync-explain) +5. [What is isolate in Flutter?](#what-is-isolate-in-flutter) +6. [Can you explain the process of testing a Flutter app?](#can-you-explain-the-process-of-testing-a-flutter-app) +7. [What is a `CustomPainter` in Flutter?](#what-is-a-custompainter-in-flutter) +8. [Explain how you will deploy a Flutter app to the Google Play/App Store?](#explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store) +9. [What are the advantages of a Flutter Inspector?](#what-are-the-advantages-of-a-flutter-inspector) +10. [List the responsibilities of `FlutterActivity`.](#list-the-responsibilities-of-flutteractivity) +11. [Can you describe how to implement internationalization in a flutter app?](#can-you-describe-how-to-implement-internationalization-in-a-flutter-app) +12. [How do you implement a custom transition between screens in flutter?](#how-do-you-implement-a-custom-transition-between-screens-in-flutter) +13. [How do you implement a custom animation curve in flutter?](#how-do-you-implement-a-custom-animation-curve-in-flutter) +14. [Can you communicate between isolates? Describe an Isolate?](#can-you-communicate-between-isolates-describe-an-isolate) +15. [What is the Flutter rendering pipeline and how does it work?](#what-is-the-flutter-rendering-pipeline-and-how-does-it-work) +16. [What is the role of the `FlutterEngine` in the Flutter framework?](#what-is-the-role-of-the-flutterengine-in-the-flutter-framework) +17. [What are platform channels in Flutter and when would you use them?](#what-are-platform-channels-in-flutter-and-when-would-you-use-them) +18. [How do you work with multiple Flutter flavors?](#how-do-you-work-with-multiple-flutter-flavors) +19. [What is code-splitting in Flutter, and how does it help?](#what-is-code-splitting-in-flutter-and-how-does-it-help) + + + diff --git a/__template__/en-US.mdx b/__template__/en-US.mdx new file mode 100644 index 0000000..acfc606 --- /dev/null +++ b/__template__/en-US.mdx @@ -0,0 +1,10 @@ +--- +title: TODO_REPLACE_TITLE +--- + +TODO_REPLACE_BODY + +## Further Reading + +- [Foo](#foo) +- [Bar](#bar) diff --git a/__template__/metadata.json b/__template__/metadata.json new file mode 100644 index 0000000..3797fbe --- /dev/null +++ b/__template__/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "question-slug", + "rank": 999, + "difficulty": "easy" +} diff --git a/analysis_options.yaml b/analysis_options.yaml new file mode 100644 index 0000000..dee8927 --- /dev/null +++ b/analysis_options.yaml @@ -0,0 +1,30 @@ +# This file configures the static analysis results for your project (errors, +# warnings, and lints). +# +# This enables the 'recommended' set of lints from `package:lints`. +# This set helps identify many issues that may lead to problems when running +# or consuming Dart code, and enforces writing Dart using a single, idiomatic +# style and format. +# +# If you want a smaller set of lints you can change this to specify +# 'package:lints/core.yaml'. These are just the most critical lints +# (the recommended set includes the core lints). +# The core lints are also what is used by pub.dev for scoring packages. + +include: package:lints/recommended.yaml + +# Uncomment the following section to specify additional rules. + +# linter: +# rules: +# - camel_case_types + +# analyzer: +# exclude: +# - path/to/excluded/files/** + +# For more information about the core and recommended set of lints, see +# https://dart.dev/go/core-lints + +# For additional information about configuring this file, see +# https://dart.dev/guides/language/analysis-options diff --git a/bin/flutter_interview_questions.dart b/bin/flutter_interview_questions.dart new file mode 100644 index 0000000..ddc99bc --- /dev/null +++ b/bin/flutter_interview_questions.dart @@ -0,0 +1,6 @@ +import 'package:flutter_interview_questions/flutter_interview_questions.dart' as flutter_interview_questions; + +Future main(List arguments) async { + final generator = flutter_interview_questions.QuestionGenerator(); + await generator.generateReadmeContents(); +} diff --git a/lib/flutter_interview_questions.dart b/lib/flutter_interview_questions.dart new file mode 100644 index 0000000..fd51e9f --- /dev/null +++ b/lib/flutter_interview_questions.dart @@ -0,0 +1,3 @@ +export 'src/models/models.dart'; +export 'src/question_generator.dart'; +export 'src/utils.dart'; diff --git a/lib/src/models/models.dart b/lib/src/models/models.dart new file mode 100644 index 0000000..76feebc --- /dev/null +++ b/lib/src/models/models.dart @@ -0,0 +1,3 @@ +export 'question_formatter.dart'; +export 'question_item.dart'; +export 'question_metadata.dart'; diff --git a/lib/src/models/question_formatter.dart b/lib/src/models/question_formatter.dart new file mode 100644 index 0000000..a6608b8 --- /dev/null +++ b/lib/src/models/question_formatter.dart @@ -0,0 +1,20 @@ +/// {@template question_formatter} +/// A formatter class that represents a structured question with a title and content. +/// +/// This class is used to store and format questions, where: +/// - [title] is the heading of the question. +/// - [content] is the main body or answer of the question. +/// {@endtemplate} +class QuestionFormatter { + /// {@macro question_formatter} + const QuestionFormatter({required this.title, required this.content}); + + /// The title or heading of the question. + final String title; + + /// The detailed content or answer of the question. + final String content; + + @override + String toString() => 'QuestionFormatter(title: $title, content: $content)'; +} diff --git a/lib/src/models/question_item.dart b/lib/src/models/question_item.dart new file mode 100644 index 0000000..0b776d9 --- /dev/null +++ b/lib/src/models/question_item.dart @@ -0,0 +1,18 @@ +import 'package:flutter_interview_questions/flutter_interview_questions.dart'; + +/// {@template question_item} +/// Represents a structured question item with metadata and formatted content. +/// {@endtemplate} +class QuestionItem { + /// {@macro question_item} + const QuestionItem({required this.metadata, required this.formatter}); + + /// Metadata associated with the question + final QuestionMetadata metadata; + + /// Formatted content of the question, including its title and body. + final QuestionFormatter formatter; + + @override + String toString() => 'QuestionItem(metadata: $metadata, formatter: $formatter)'; +} diff --git a/lib/src/models/question_metadata.dart b/lib/src/models/question_metadata.dart new file mode 100644 index 0000000..5283fc6 --- /dev/null +++ b/lib/src/models/question_metadata.dart @@ -0,0 +1,68 @@ +/// {@template question_metadata} +/// A model representing the metadata for an interview question. +/// {@endtemplate} +class QuestionMetadata { + /// {@macro question_metadata} + const QuestionMetadata({ + required this.slug, + required this.difficulty, + required this.rank, + }); + + /// Converts a Map to a [QuestionMetadata]. + factory QuestionMetadata.fromJson(Map json) { + return QuestionMetadata( + slug: json['slug'], + difficulty: QuestionDifficulty.values.byName(json['difficulty']), + rank: json['rank'], + ); + } + + /// An identifier for the question, typically a slugified version of the title. + final String slug; + + /// The difficulty level of the question (easy, intermediate, or advanced). + final QuestionDifficulty difficulty; + + /// A numerical value determining the position of the question in the list. + final int rank; + + @override + String toString() { + return 'QuestionMetadata(slug: $slug, difficulty: ${difficulty.name}, rank: $rank)'; + } +} + +/// Defines the difficulty levels for interview questions. +/// +/// - [easy]: Suitable for beginners or fundamental concepts. +/// - [intermediate]: Requires a moderate understanding of Flutter. +/// - [advanced]: Covers complex or in-depth Flutter topics. +enum QuestionDifficulty { + /// Questions that are uitable for beginners or fundamental concepts. + easy, + + /// Question that equires a moderate understanding of Flutter. + intermediate, + + // Question that overs complex or in-depth Flutter topics. + advanced, +} + +/// Extension on [QuestionDifficulty]. +extension QuestionDifficultyExtension on QuestionDifficulty { + /// Whether the question difficulty is easy. + bool get isEasy { + return this == QuestionDifficulty.easy; + } + + /// Whether the question difficulty is intermediate. + bool get isIntermediate { + return this == QuestionDifficulty.intermediate; + } + + /// Whether the question difficulty is advanced. + bool get isAdvanced { + return this == QuestionDifficulty.advanced; + } +} diff --git a/lib/src/question_generator.dart b/lib/src/question_generator.dart new file mode 100644 index 0000000..61b8310 --- /dev/null +++ b/lib/src/question_generator.dart @@ -0,0 +1,231 @@ +import 'dart:convert'; +import 'dart:io'; + +import 'package:flutter_interview_questions/flutter_interview_questions.dart'; +import 'package:path/path.dart' as path; + +/// A class responsible for generating and updating the README.md file. +class QuestionGenerator { + /// Directory where all the questions are stored. + static final Directory questionsDir = Directory(path.join('.', 'questions')); + + /// The auto-generated README file location. + static final File genReadmeFile = File(path.join('.', 'README.md')); + + // Github organization name and repository names for generating edit links. + static const String kGithubOrg = 'thisissandipp'; + static const String kGithubRepo = 'flutter-interview-questions'; + + /// Generates formatted content for each question, including edit links. + String generateQuestionsContent( + List questionItems, [ + String locale = 'en-US', + String tableOfContentsAnchor = 'table-of-contents', + ]) { + final generatedContent = []; + for (final item in questionItems) { + generatedContent.add('''### ${item.formatter.title} + + + +${item.formatter.content} + + + +
+ +[Back to top ↑](#$tableOfContentsAnchor)   /   [πŸ–ŒοΈ Edit answer](https://github.com/$kGithubOrg/$kGithubRepo/edit/main/questions/${item.metadata.slug}/$locale.mdx) + +
+ '''); + } + return generatedContent.join('\n'); + } + + /// Generates a markdown Table of Contents from the list of questions. + String generateTableOfContents(List questionItems) { + final tableOfContentsLines = [ + '| No. | Questions | Level |', + '| --- | :-- | :-- |', + ]; + + for (final item in questionItems) { + tableOfContentsLines.add( + '| ${item.metadata.rank} | [${item.formatter.title}](#${item.metadata.slug}) | ' + '${item.metadata.difficulty.name.capitalize} |', + ); + } + + return tableOfContentsLines.join('\n'); + } + + /// Generates a simple bullet list of questions. + String generateBulletList(List questionItems) { + int counter = 1; + List generatedContent = []; + for (final item in questionItems) { + generatedContent.add( + '${counter++}. [${item.formatter.title}](#${item.metadata.slug})', + ); + } + return generatedContent.join('\n'); + } + + /// Reads the README file and updates content within a specific placeholder. + Future updateReadmeContent({ + required String content, + required String placeholderRegexPattern, + }) async { + final readmeFileContent = await genReadmeFile.readAsString(); + final contentPlaceholderRegExp = RegExp(placeholderRegexPattern); + final match = contentPlaceholderRegExp.firstMatch(readmeFileContent); + + if (match == null) { + throw Exception('Invalid Regex Pattern: $placeholderRegexPattern'); + } + + final firstGroup = match.group(1); + final lastGroup = match.group(3); + + if (firstGroup == null || lastGroup == null) { + throw Exception( + 'Unable to extract match groups: $placeholderRegexPattern', + ); + } + + final updatedContent = readmeFileContent.replaceFirst( + contentPlaceholderRegExp, + '$firstGroup\n\n$content\n\n$lastGroup', + ); + + await genReadmeFile.writeAsString(updatedContent); + } + + /// Extracts [QuestionItem]s by reading and formatting MDX files. + Future> extractQuestionItems( + List questionsMetadata, [ + String locale = 'en-US', + ]) async { + final questionItems = []; + + for (final metadata in questionsMetadata) { + final localeFilePath = path.join( + questionsDir.path, + metadata.slug, + '$locale.mdx', + ); + final localeFile = File(localeFilePath); + + if (!localeFile.existsSync()) { + throw Exception('Locale file does not exist for ${metadata.slug}'); + } + + final mdxContent = await localeFile.readAsString(); + final question = Utils.formatQuestion(mdxContent, localeFilePath); + + final questionItem = QuestionItem( + metadata: metadata, + formatter: question, + ); + questionItems.add(questionItem); + } + + return questionItems; + } + + /// Reads and parses question metadata from `metadata.json` files + /// inside the `questions/` directory. + Future> readQuestionsMetadata() async { + final List metadata = []; + + final questionsDirExists = await questionsDir.exists(); + if (!questionsDirExists) { + throw Exception('Error: Questions directory not found!'); + } + + await for (var entity in questionsDir.list()) { + if (entity is Directory) { + final metadataFilePath = path.join(entity.path, 'metadata.json'); + final metadataFile = File(metadataFilePath); + + if (metadataFile.existsSync()) { + final content = await metadataFile.readAsString(); + final jsonDecoded = jsonDecode(content) as Map; + final questionsMetadata = QuestionMetadata.fromJson(jsonDecoded); + + // Check if the metadata slug matches the questions slug, else stop processing + // and throw an error. + final questionSlug = entity.uri.pathSegments[1]; + if (questionSlug != questionsMetadata.slug) { + throw Exception( + 'Mismatch in directory and slug: $questionSlug vs ${questionsMetadata.slug}', + ); + } + + metadata.add(questionsMetadata); + } + } + } + + return metadata; + } + + /// Generates and updates the README with: + /// - Table of Contents + /// - All questions with their formatted content + /// - Difficulty-specific question lists + Future generateReadmeContents() async { + final questionsMetadata = await readQuestionsMetadata(); + questionsMetadata.sort((a, b) => a.rank - b.rank); + final questionItems = await extractQuestionItems(questionsMetadata); + + final newTableOfContents = generateTableOfContents(questionItems); + final newQuestionContent = generateQuestionsContent(questionItems); + + await updateReadmeContent( + content: newTableOfContents, + placeholderRegexPattern: + r'()\n([\s\S]*?)\n()', + ); + + await updateReadmeContent( + content: newQuestionContent, + placeholderRegexPattern: + r'()\n([\s\S]*?)\n()', + ); + + final easyItems = + questionItems.where((item) => item.metadata.difficulty.isEasy).toList(); + final newEasyContent = generateBulletList(easyItems); + + await updateReadmeContent( + content: newEasyContent, + placeholderRegexPattern: + r'()\n([\s\S]*?)\n()', + ); + + final intermediateItems = + questionItems + .where((item) => item.metadata.difficulty.isIntermediate) + .toList(); + final newIntermediateContent = generateBulletList(intermediateItems); + + await updateReadmeContent( + content: newIntermediateContent, + placeholderRegexPattern: + r'()\n([\s\S]*?)\n()', + ); + + final advancedItems = + questionItems + .where((item) => item.metadata.difficulty.isAdvanced) + .toList(); + final newAdvancedContent = generateBulletList(advancedItems); + + await updateReadmeContent( + content: newAdvancedContent, + placeholderRegexPattern: + r'()\n([\s\S]*?)\n()', + ); + } +} diff --git a/lib/src/utils.dart b/lib/src/utils.dart new file mode 100644 index 0000000..f668b56 --- /dev/null +++ b/lib/src/utils.dart @@ -0,0 +1,53 @@ +import 'package:flutter_interview_questions/flutter_interview_questions.dart'; +import 'package:yaml/yaml.dart'; + +/// A utility class that provides helper methods for processing MDX content. +class Utils { + /// Extracts and formats a question from an MDX file by parsing its front matter. + /// + /// The method: + /// 1. Extracts the front matter block (YAML format) from the MDX content. + /// 2. Parses the front matter to retrieve the question title. + /// 3. Extracts the main content of the question after the front matter. + /// + /// Throws an exception if the MDX content is not properly formatted + /// or title is not present. + static QuestionFormatter formatQuestion( + String mdxContent, + String localeFilePath, + ) { + final regex = RegExp(r'^---\n([\s\S]*?)\n---', multiLine: true); + final match = regex.firstMatch(mdxContent); + + if (match == null) { + throw Exception( + '$localeFilePath: The MDX Content is not properly formatted', + ); + } + + final frontMatterContent = match.group(1); + if (frontMatterContent == null) { + throw Exception( + '$localeFilePath: The MDX Content is not properly formatted', + ); + } + + final frontMatter = loadYaml(frontMatterContent) as YamlMap; + if (!frontMatter.containsKey('title')) { + throw Exception('$localeFilePath: The MDX Content does not have a title'); + } + + final title = frontMatter['title']; + final content = mdxContent.replaceFirst(regex, '').trim(); + + return QuestionFormatter(title: title, content: content); + } +} + +/// Extension on String +extension StringExtension on String { + /// Capitalize the first letter of the string. + String get capitalize { + return substring(0, 1).toUpperCase() + substring(1).toLowerCase(); + } +} diff --git a/pubspec.lock b/pubspec.lock new file mode 100644 index 0000000..b69cf58 --- /dev/null +++ b/pubspec.lock @@ -0,0 +1,61 @@ +# Generated by pub +# See https://dart.dev/tools/pub/glossary#lockfile +packages: + collection: + dependency: transitive + description: + name: collection + sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76" + url: "https://pub.dev" + source: hosted + version: "1.19.1" + lints: + dependency: "direct dev" + description: + name: lints + sha256: c35bb79562d980e9a453fc715854e1ed39e24e7d0297a880ef54e17f9874a9d7 + url: "https://pub.dev" + source: hosted + version: "5.1.1" + path: + dependency: "direct main" + description: + name: path + sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5" + url: "https://pub.dev" + source: hosted + version: "1.9.1" + source_span: + dependency: transitive + description: + name: source_span + sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c" + url: "https://pub.dev" + source: hosted + version: "1.10.1" + string_scanner: + dependency: transitive + description: + name: string_scanner + sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43" + url: "https://pub.dev" + source: hosted + version: "1.4.1" + term_glyph: + dependency: transitive + description: + name: term_glyph + sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e" + url: "https://pub.dev" + source: hosted + version: "1.2.2" + yaml: + dependency: "direct main" + description: + name: yaml + sha256: b9da305ac7c39faa3f030eccd175340f968459dae4af175130b3fc47e40d76ce + url: "https://pub.dev" + source: hosted + version: "3.1.3" +sdks: + dart: ">=3.7.0 <4.0.0" diff --git a/pubspec.yaml b/pubspec.yaml new file mode 100644 index 0000000..3d3ea2f --- /dev/null +++ b/pubspec.yaml @@ -0,0 +1,17 @@ +name: flutter_interview_questions +description: A list of Dart and Flutter interview questions. +repository: https://github.com/thisissandipp/flutter-interview-questions +issue_tracker: https://github.com/thisissandipp/flutter-interview-questions/issues +homepage: https://github.com/thisissandipp/flutter-interview-questions + +version: 1.0.0 + +environment: + sdk: ">=3.7.0 <4.0.0" + +dependencies: + path: ^1.9.1 + yaml: ^3.1.3 + +dev_dependencies: + lints: ^5.0.0 diff --git a/questions/can-you-communicate-between-isolates-describe-an-isolate/en-US.mdx b/questions/can-you-communicate-between-isolates-describe-an-isolate/en-US.mdx new file mode 100644 index 0000000..bad2327 --- /dev/null +++ b/questions/can-you-communicate-between-isolates-describe-an-isolate/en-US.mdx @@ -0,0 +1,31 @@ +--- +title: Can you communicate between isolates? Describe an Isolate? +--- + +Yes, you can communicate between isolates in Dart using message passing via `SendPort` and `ReceivePort`. Isolates do not share memory, and each isolate has its own memory space and event loop. To communicate, one isolate sends messages to another through a `SendPort`, and the receiving isolate listens on a `ReceivePort`. + +**Isolate:** +An Isolate is a separate thread of execution in Dart that runs independently, using its own memory and event loop. It's useful for performing concurrent tasks without blocking the main isolate, which is critical for Flutter apps to keep the UI responsive. + +```dart +import 'dart:isolate'; + +void main() async { + // Create a receive port to listen for messages from the isolate + final receivePort = ReceivePort(); + + // Spawn an isolate and send the receive port's sendPort to it + await Isolate.spawn(isolateFunction, receivePort.sendPort); + + // Listen for messages from the isolate + receivePort.listen((message) { + print('Received message: $message'); + receivePort.close(); // Close the receive port when done + }); +} + +// Function to be executed by the isolate +void isolateFunction(SendPort sendPort) { + sendPort.send('Hello from the isolate!'); +} +``` diff --git a/questions/can-you-communicate-between-isolates-describe-an-isolate/metadata.json b/questions/can-you-communicate-between-isolates-describe-an-isolate/metadata.json new file mode 100644 index 0000000..7a2a719 --- /dev/null +++ b/questions/can-you-communicate-between-isolates-describe-an-isolate/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "can-you-communicate-between-isolates-describe-an-isolate", + "rank": 90, + "difficulty": "advanced" +} diff --git a/questions/can-you-describe-how-to-implement-internationalization-in-a-flutter-app/en-US.mdx b/questions/can-you-describe-how-to-implement-internationalization-in-a-flutter-app/en-US.mdx new file mode 100644 index 0000000..57097f1 --- /dev/null +++ b/questions/can-you-describe-how-to-implement-internationalization-in-a-flutter-app/en-US.mdx @@ -0,0 +1,12 @@ +--- +title: Can you describe how to implement internationalization in a flutter app? +--- + +To implement internationalization (i18n) in a Flutter app: + +- Include the `flutter_localizations` package in the `pubspec.yaml` file. +- Set the `localizationsDelegates` and `supportedLocales` properties in the MaterialApp. +- Use .arb files to store translations for different locales (e.g., app_en.arb for English, app_es.arb for Spanish). +- Use the flutter `gen-l10n` tool to generate Dart localization classes from the .arb files. +- Use the generated localization class (e.g., `AppLocalizations.of(context).`) to access translated strings. +- Test the app by switching locales in device settings and updating .arb files as needed. diff --git a/questions/can-you-describe-how-to-implement-internationalization-in-a-flutter-app/metadata.json b/questions/can-you-describe-how-to-implement-internationalization-in-a-flutter-app/metadata.json new file mode 100644 index 0000000..e4e4744 --- /dev/null +++ b/questions/can-you-describe-how-to-implement-internationalization-in-a-flutter-app/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "can-you-describe-how-to-implement-internationalization-in-a-flutter-app", + "rank": 84, + "difficulty": "advanced" +} diff --git a/questions/can-you-explain-the-process-of-creating-custom-widgets-in-flutter/en-US.mdx b/questions/can-you-explain-the-process-of-creating-custom-widgets-in-flutter/en-US.mdx new file mode 100644 index 0000000..bb94f10 --- /dev/null +++ b/questions/can-you-explain-the-process-of-creating-custom-widgets-in-flutter/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: Can you explain the process of creating custom widgets in Flutter? +--- + +The process of creating custom widgets in Flutter involves the following steps: + +1. **Extend the `StatelessWidget` or `StatefulWidget` class**: To create a custom widget, we need to extend the `StatelessWidget` or `StatefulWidget` class, depending on whether the widget is stateless or stateful. + +2. **Override the `build` method**: We need to override the `build` method in our custom widget class to define its appearance. The `build` method returns a widget tree that describes the appearance of the widget. We can use built-in widgets or other custom widgets to create the widget tree. + +3. **Define the widget's constructor**: We can define a constructor for the custom widget to pass any required data to the widget. + +4. **Use the custom widget**: Once we have defined your custom widget, we can use it in your Flutter app just like any other widget. We can add it to the widget tree in our build method or in response to user interactions. + +5. **Optionally, manage state**: If the widget is stateful, we can manage its state by using the `setState` method. This method allows us to update the appearance of the widget when its state changes. + +These are the basic steps involved in creating custom widgets in Flutter. The exact process may vary depending on the specific requirements of your widget, but this general process should provide a good starting point. diff --git a/questions/can-you-explain-the-process-of-creating-custom-widgets-in-flutter/metadata.json b/questions/can-you-explain-the-process-of-creating-custom-widgets-in-flutter/metadata.json new file mode 100644 index 0000000..54e14e9 --- /dev/null +++ b/questions/can-you-explain-the-process-of-creating-custom-widgets-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "can-you-explain-the-process-of-creating-custom-widgets-in-flutter", + "rank": 41, + "difficulty": "intermediate" +} diff --git a/questions/can-you-explain-the-process-of-testing-a-flutter-app/en-US.mdx b/questions/can-you-explain-the-process-of-testing-a-flutter-app/en-US.mdx new file mode 100644 index 0000000..28d2343 --- /dev/null +++ b/questions/can-you-explain-the-process-of-testing-a-flutter-app/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: Can you explain the process of testing a Flutter app? +--- + +The process of testing a Flutter app involves writing and running different types of tests to verify the behavior and functionality of the app. There are two main types of tests in Flutter: unit tests and integration tests. Unit tests focus on individual pieces of code, such as a single function or widget, and test their behavior in isolation. Integration tests, on the other hand, test the app as a whole, including the interactions between different parts of the app. + +To write tests in Flutter, we can use the `flutter_test` package, which provides a number of testing widgets and utilities that make it easier to write and run tests. When writing tests, we can use the `test` function to define individual test cases and the expect function to specify the expected behavior of the code under test. + +When it comes to testing, we can use a combination of manual testing and automated testing. For manual testing, test the app on a variety of devices and platforms to ensure that it works as expected. For automated testing, use a continuous integration and continuous deployment (CI/CD) pipeline to run tests automatically whenever code changes are pushed to the repository. This helps to catch any issues early and ensures that the app always meets a certain level of quality. + +In addition to writing tests, we can also use a number of tools and techniques to test Flutter apps, such as code coverage tools to measure the amount of code that is covered by tests, performance testing tools to measure the performance of the app under different conditions, and accessibility testing tools to ensure that the app is accessible to users with disabilities. Overall, testing is a crucial part of the development process in Flutter and helps to ensure that the app is of high quality and meets the requirements of the users. diff --git a/questions/can-you-explain-the-process-of-testing-a-flutter-app/metadata.json b/questions/can-you-explain-the-process-of-testing-a-flutter-app/metadata.json new file mode 100644 index 0000000..2dc2467 --- /dev/null +++ b/questions/can-you-explain-the-process-of-testing-a-flutter-app/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "can-you-explain-the-process-of-testing-a-flutter-app", + "rank": 49, + "difficulty": "advanced" +} diff --git a/questions/differentiate-between-final-const-and-static-keyword/en-US.mdx b/questions/differentiate-between-final-const-and-static-keyword/en-US.mdx new file mode 100644 index 0000000..ef34d03 --- /dev/null +++ b/questions/differentiate-between-final-const-and-static-keyword/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: Differentiate between final, const and static keyword. +--- + +The `final` keyword defines a variable that can be initialized once and cannot be changed after being assigned a value for the first time. + +The `const` keyword defines a constant variable that should not be changed over time. + +Now the only difference between the final and const variable is that **final is a runtime-constant**, which in turn means that its value can be assigned at runtime instead of the compile-time that we had for the const keyword. + +The `static` keyword is used for a class-level variable and method that is the same for every instance of a class, this means if a data member is static, it can be accessed without creating an object. The static keyword allows data members to persist Values between different instances of a class. diff --git a/questions/differentiate-between-final-const-and-static-keyword/metadata.json b/questions/differentiate-between-final-const-and-static-keyword/metadata.json new file mode 100644 index 0000000..1d4dfba --- /dev/null +++ b/questions/differentiate-between-final-const-and-static-keyword/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "differentiate-between-final-const-and-static-keyword", + "rank": 15, + "difficulty": "easy" +} diff --git a/questions/differentiate-between-mainaxisalignment-and-crossaxisalignment/en-US.mdx b/questions/differentiate-between-mainaxisalignment-and-crossaxisalignment/en-US.mdx new file mode 100644 index 0000000..05ff367 --- /dev/null +++ b/questions/differentiate-between-mainaxisalignment-and-crossaxisalignment/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: Differentiate between `mainAxisAlignment` and `crossAxisAlignment`. +--- + +The `mainAxisAlignment` determines how the children should be placed along the main axis in a flex layout. Whereas, the `crossAxisAlignment` determines how the children will be placed along the cross axis in a flex layout. + +For a `Row` widget: +- **mainAxisAlignment** --> Horizontal axis +- **crossAxisAlignment** --> Vertical axis + +

+ MainAxisAlignment vs CrossAxisAlignment - Row +

+ +For a `Column` widget: +- **mainAxisAlignment** --> Vertical axis +- **crossAxisAlignment** --> Horizontal axis + +

+ MainAxisAlignment vs CrossAxisAlignment - Column +

+ +_Image source: [Flutter Docs](https://docs.flutter.dev/development/ui/layout#aligning-widgets)_ diff --git a/questions/differentiate-between-mainaxisalignment-and-crossaxisalignment/metadata.json b/questions/differentiate-between-mainaxisalignment-and-crossaxisalignment/metadata.json new file mode 100644 index 0000000..6be2fab --- /dev/null +++ b/questions/differentiate-between-mainaxisalignment-and-crossaxisalignment/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "differentiate-between-mainaxisalignment-and-crossaxisalignment", + "rank": 25, + "difficulty": "easy" +} diff --git a/questions/differentiate-between-named-parameters-and-positional-parameters-in-flutter/en-US.mdx b/questions/differentiate-between-named-parameters-and-positional-parameters-in-flutter/en-US.mdx new file mode 100644 index 0000000..1ef8f31 --- /dev/null +++ b/questions/differentiate-between-named-parameters-and-positional-parameters-in-flutter/en-US.mdx @@ -0,0 +1,12 @@ +--- +title: Differentiate between named parameters and positional parameters in Flutter. +--- + +A `Positional Parameter` is linked by its position. Positional parameters must be specified in the order in which they appear. `Named Parameters` are referenced by name, which means that they can be used during the function invocation in an order different from the function declaration. + +To declare a positional optional parameter, we use square brackets `[ ]`, whereas to declare a named optional parameters we use curly braces `{ }`. + +```dart +doSomething(String name, [String greeting = 'Hello']); // Positional Optional Parameter +doSomething({String? name, String greeting = 'Hello'}); // Named Optional Parameter +``` diff --git a/questions/differentiate-between-named-parameters-and-positional-parameters-in-flutter/metadata.json b/questions/differentiate-between-named-parameters-and-positional-parameters-in-flutter/metadata.json new file mode 100644 index 0000000..7cd7031 --- /dev/null +++ b/questions/differentiate-between-named-parameters-and-positional-parameters-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "differentiate-between-named-parameters-and-positional-parameters-in-flutter", + "rank": 5, + "difficulty": "easy" +} diff --git a/questions/differentiate-between-statelesswidget-and-statefulwidget-in-flutter/en-US.mdx b/questions/differentiate-between-statelesswidget-and-statefulwidget-in-flutter/en-US.mdx new file mode 100644 index 0000000..941b017 --- /dev/null +++ b/questions/differentiate-between-statelesswidget-and-statefulwidget-in-flutter/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: Differentiate between `StatelessWidget` and `StatefulWidget` in Flutter. +--- + +`StatelessWidget`s are those that do not change, or are immutable. Its appearance and properties remain constant throughout the widget's lifetime. **Icon**, **IconButton**, **Text** are examples of stateless widgets. + +`StatefulWidget`s are those that change their properties while running. They are dynamic, which means they can be rebuilt multiple times during their lifetime. It can alter its appearance in response to events caused by the user interactions or when data is received. **Checkbox**, **Radio**, **Slider**, **InkWell**, **Form**, and **TextField** are examples of stateful widgets. diff --git a/questions/differentiate-between-statelesswidget-and-statefulwidget-in-flutter/metadata.json b/questions/differentiate-between-statelesswidget-and-statefulwidget-in-flutter/metadata.json new file mode 100644 index 0000000..5045938 --- /dev/null +++ b/questions/differentiate-between-statelesswidget-and-statefulwidget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "differentiate-between-statelesswidget-and-statefulwidget-in-flutter", + "rank": 9, + "difficulty": "easy" +} diff --git a/questions/differentiate-between-stream-and-future-in-flutter/en-US.mdx b/questions/differentiate-between-stream-and-future-in-flutter/en-US.mdx new file mode 100644 index 0000000..323c187 --- /dev/null +++ b/questions/differentiate-between-stream-and-future-in-flutter/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: Differentiate between `Stream` and `Future` in Flutter. +--- + +`Stream` and `Future` are both used for asynchronous programming in Flutter, but they serve different purposes. + +`Future` is a one-time asynchronous operation that returns a single value. It represents a value that will be available in the future, either a result or an error. Futures are often used for short-lived operations that complete quickly, such as fetching data from a database or an API. + +`Stream`, on the other hand, is a sequence of asynchronous events. A stream can emit multiple values over time, either in response to user interaction or based on some other event. Streams are useful for continuous or long-lived operations, such as listening to updates from a sensor, receiving messages from a chat service, or playing a video. + +In summary, the main difference between `Future` and `Stream` is that `Future` represents a single value that will be available in the future, while `Stream` represents a sequence of values that are emitted over time. diff --git a/questions/differentiate-between-stream-and-future-in-flutter/metadata.json b/questions/differentiate-between-stream-and-future-in-flutter/metadata.json new file mode 100644 index 0000000..e3c995a --- /dev/null +++ b/questions/differentiate-between-stream-and-future-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "differentiate-between-stream-and-future-in-flutter", + "rank": 39, + "difficulty": "intermediate" +} diff --git a/questions/explain-async-await-and-future/en-US.mdx b/questions/explain-async-await-and-future/en-US.mdx new file mode 100644 index 0000000..a16de9b --- /dev/null +++ b/questions/explain-async-await-and-future/en-US.mdx @@ -0,0 +1,21 @@ +--- +title: Explain async, await and Future. +--- + +The `async` and `await` are keywords in Dart that enable asynchronous programming. They make it easier to write asynchronous code that is readable and easier to maintain. + +`Future` is a core Dart library that represents an asynchronous operation that will complete in the future. A `Future` object is returned from an asynchronous function to represent a value that will be available at some point in the future. + +In Flutter, `async` and `await` are used to perform asynchronous operations, such as making HTTP requests or reading from a database. The Future object is used to represent the result of an asynchronous operation and is often passed to await in an async function to wait for the result to be available. + +```dart +Future fetchData() async { + // Asynchronous operation + return 'Data'; +} + +void main() async { + String data = await fetchData(); + print(data); +} +``` diff --git a/questions/explain-async-await-and-future/metadata.json b/questions/explain-async-await-and-future/metadata.json new file mode 100644 index 0000000..1afed4e --- /dev/null +++ b/questions/explain-async-await-and-future/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "explain-async-await-and-future", + "rank": 31, + "difficulty": "intermediate" +} diff --git a/questions/explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store/en-US.mdx b/questions/explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store/en-US.mdx new file mode 100644 index 0000000..d2bd4f9 --- /dev/null +++ b/questions/explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store/en-US.mdx @@ -0,0 +1,25 @@ +--- +title: Explain how you will deploy a Flutter app to the Google Play/App Store? +--- + +To deploy a Flutter app to the Google Play Store or App Store, follow these steps while adhering to their respective guidelines on content, user privacy, and design: + +**Deploying to Google Play Store:** +- Google Play Developer Account: Create an account and set it up. +- Generate a Signing Key: Sign your app for secure distribution. +- Prepare App Configuration: Update build.gradle with package details and versioning. +- Build the Release APK or AAB: Run flutter build apk or flutter build appbundle. +- Upload and Submit: Submit the app via the Play Console, including screenshots and metadata. +- Review and Publish: Wait for approval, then publish. + +**Deploying to App Store:** +- Apple Developer Account: Enroll and set up your account. +- Provisioning Profile & Certificate: Use Xcode to create a signing certificate and provision your app. +- Prepare App Configuration: Update your app's bundle ID and version. +- Build the iOS Archive: Run flutter build ios and export the archive using Xcode. +- Submit and Review: Upload the app via Xcode or Transporter, fill out metadata, and submit for review. +- Publish: Once approved, your app goes live. + +Ensure you test the app thoroughly and address any guidelines to streamline the approval process. +- [Google Play Store Guildelines](https://play.google.com/console/about/guides/releasewithconfidence/) +- [Apple App Review Guildelines](https://developer.apple.com/app-store/review/guidelines/) diff --git a/questions/explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store/metadata.json b/questions/explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store/metadata.json new file mode 100644 index 0000000..024a518 --- /dev/null +++ b/questions/explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "explain-how-you-will-deploy-a-flutter-app-to-the-google-playapp-store", + "rank": 81, + "difficulty": "advanced" +} diff --git a/questions/explain-singleton-class-in-flutter/en-US.mdx b/questions/explain-singleton-class-in-flutter/en-US.mdx new file mode 100644 index 0000000..1b57908 --- /dev/null +++ b/questions/explain-singleton-class-in-flutter/en-US.mdx @@ -0,0 +1,34 @@ +--- +title: Explain singleton class in flutter. +--- + +A singleton class is a class that can only be instantiated once throughout the entire application. It provides a single point of access to a shared instance of an object, which can be accessed from anywhere in the application. + +To create a singleton class in Flutter, we need to define a private constructor that can only be accessed within the class itself. Then, we can create a static field of the class type that holds the single instance of the class, and a static method that returns the instance. Here's an example of a singleton class in Flutter: + +```dart +class MySingleton { + static final MySingleton _singleton = MySingleton._internal(); + + factory MySingleton() { + return _singleton; + } + + MySingleton._internal(); + + void doSomething() { + print('Singleton class is doing something'); + } +} +``` + +In this example, `MySingleton` is a singleton class that has a private constructor, a static field `_singleton` of the same type, and a static factory method that returns the single instance of the class. The `doSomething` method is a simple method that can be called on the instance of the class. + +To use this singleton class, we can simply call the factory method to get the instance of the class, and then call the methods on the instance. Here's an example: + +```dart +MySingleton singleton = MySingleton(); +singleton.doSomething(); +``` + +This will create a single instance of `MySingleton` and call the `doSomething` method on it. Since `MySingleton` is a singleton class, any subsequent calls to the `MySingleton()` constructor will simply return the existing instance of the class, rather than creating a new instance. diff --git a/questions/explain-singleton-class-in-flutter/metadata.json b/questions/explain-singleton-class-in-flutter/metadata.json new file mode 100644 index 0000000..d8b73da --- /dev/null +++ b/questions/explain-singleton-class-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "explain-singleton-class-in-flutter", + "rank": 50, + "difficulty": "intermediate" +} diff --git a/questions/explain-the-mounted-property-how-is-it-important-and-when-to-use-it/en-US.mdx b/questions/explain-the-mounted-property-how-is-it-important-and-when-to-use-it/en-US.mdx new file mode 100644 index 0000000..c21f5f1 --- /dev/null +++ b/questions/explain-the-mounted-property-how-is-it-important-and-when-to-use-it/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: Explain the `mounted` property. How is it important and when to use it? +--- + +The mounted property defines whether the state object, associated with it, is currently in the widget tree. + +After creating a State object and before calling initState, the framework **"mounts"** the State object by associating it with a BuildContext. The State object remains mounted until the framework calls dispose, after which time the framework will never ask the State object to build again. + +It is an error to call setState unless mounted is true. This property is useful when a method on your state calls setState() but it isn't clear when or how often that method will be called. You can use `if (mounted) {...` to make sure the State exists before calling setState(). diff --git a/questions/explain-the-mounted-property-how-is-it-important-and-when-to-use-it/metadata.json b/questions/explain-the-mounted-property-how-is-it-important-and-when-to-use-it/metadata.json new file mode 100644 index 0000000..65ae672 --- /dev/null +++ b/questions/explain-the-mounted-property-how-is-it-important-and-when-to-use-it/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "explain-the-mounted-property-how-is-it-important-and-when-to-use-it", + "rank": 23, + "difficulty": "intermediate" +} diff --git a/questions/explain-what-a-ticker-is-in-flutter/en-US.mdx b/questions/explain-what-a-ticker-is-in-flutter/en-US.mdx new file mode 100644 index 0000000..ca47258 --- /dev/null +++ b/questions/explain-what-a-ticker-is-in-flutter/en-US.mdx @@ -0,0 +1,38 @@ +--- +title: Explain what a ticker is in flutter. +--- + +In Flutter, a ticker is a mechanism that helps to drive animations. It provides a continuous stream of time, essentially ticking at a fixed interval (typically the frame rate). This enables the animation framework to update the UI at a consistent rate. + +A `Ticker` is often used with `AnimationController`, which is responsible for controlling the animation's progress over time. The Ticker's job is to notify the animation controller every frame so that it can update the animation’s state, which in turn updates the UI. + +```dart +class MyAnimatedWidget extends StatefulWidget { + @override + _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState(); +} + +class _MyAnimatedWidgetState extends State with TickerProviderStateMixin { + late Ticker _ticker; + + @override + void initState() { + super.initState(); + _ticker = createTicker((elapsed) { + print('Time elapsed: $elapsed'); + }); + _ticker.start(); // Starts the ticker + } + + @override + void dispose() { + _ticker.dispose(); // Clean up the ticker + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container(); + } +} +``` diff --git a/questions/explain-what-a-ticker-is-in-flutter/metadata.json b/questions/explain-what-a-ticker-is-in-flutter/metadata.json new file mode 100644 index 0000000..fa7c5af --- /dev/null +++ b/questions/explain-what-a-ticker-is-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "explain-what-a-ticker-is-in-flutter", + "rank": 91, + "difficulty": "intermediate" +} diff --git a/questions/how-do-mixins-differ-from-interfaces-in-dart/en-US.mdx b/questions/how-do-mixins-differ-from-interfaces-in-dart/en-US.mdx new file mode 100644 index 0000000..efe061a --- /dev/null +++ b/questions/how-do-mixins-differ-from-interfaces-in-dart/en-US.mdx @@ -0,0 +1,34 @@ +--- +title: How do mixins differ from interfaces in Dart? +--- + +In Dart, mixins and interfaces serve different purposes: + +**Mixins:** Allow a class to reuse code from multiple classes without using inheritance. Mixins are typically used to add functionality to a class. They are declared using the mixin keyword and can be applied to a class via the with keyword. A class can apply multiple mixins. + +```dart +mixin Walker { + void walk() => print("Walking"); +} + +class Person with Walker { + // Person can now use the walk() method +} +``` + +**Interfaces:** Define a contract that a class must adhere to. In Dart, all classes implicitly act as interfaces. To implement an interface, a class uses the implements keyword. Unlike mixins, interfaces do not allow code reuseβ€”they only define method signatures that must be implemented. + +```dart +class Animal { + void eat(); +} + +class Dog implements Animal { + @override + void eat() => print("Dog eating"); +} +``` + +**Key Differences:** +- Mixins provide code reuse; can be used with multiple classes. +- Interfaces define required methods, but no code reuse. A class can implement multiple interfaces. diff --git a/questions/how-do-mixins-differ-from-interfaces-in-dart/metadata.json b/questions/how-do-mixins-differ-from-interfaces-in-dart/metadata.json new file mode 100644 index 0000000..4fd9e9d --- /dev/null +++ b/questions/how-do-mixins-differ-from-interfaces-in-dart/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-mixins-differ-from-interfaces-in-dart", + "rank": 100, + "difficulty": "intermediate" +} diff --git a/questions/how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used/en-US.mdx b/questions/how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used/en-US.mdx new file mode 100644 index 0000000..01cd93b --- /dev/null +++ b/questions/how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used/en-US.mdx @@ -0,0 +1,46 @@ +--- +title: How do you handle exceptions in Flutter, and what strategies have you used? +--- + +Exceptions are errors that occur at runtime and can be handled in Flutter using `try-catch` blocks. Here's a simple example of how to handle exceptions in Flutter: + +```dart +try { + // Code that might throw an exception +} on Exception catch (e) { + // Code that is executed when an exception is caught + print("Caught exception: $e"); +} +``` + +In this example, the code inside the try block is executed. If an exception is thrown, it is caught by the catch block, and the code inside the catch block is executed. You can access the details of the exception by using the e variable. + +There are different strategies for handling exceptions in Flutter, including: + +**Logging**: We can log the details of the exception to help with debugging and troubleshooting. We can use the print function or a logging library like logging or flutter_logging. + +**Showing an error message**: We can show an error message to the user to let them know that something went wrong. For example, we might show a SnackBar with a message, or navigate to an error page. + +**Retrying the operation**: If the exception was caused by a temporary error, we might want to retry the operation. For example, we might retry a network request if the first attempt failed due to a timeout. + +**Handling specific exceptions**: We can handle specific exceptions by using multiple catch blocks. This allows us to handle each exception differently based on its type. For example, we might handle a SocketException differently from a `FormatException`. + +Here's an example of a more advanced exception handling strategy: + +```dart +try { + // Code that might throw an exception +} on SocketException catch (e) { + // Code that is executed when a SocketException is caught + print("Caught SocketException: $e"); + // Retry the operation +} on FormatException catch (e) { + // Code that is executed when a FormatException is caught + print("Caught FormatException: $e"); + // Show an error message to the user +} catch (e) { + // Code that is executed when any other exception is caught + print("Caught exception: $e"); + // Log the exception for debugging purposes +} +``` diff --git a/questions/how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used/metadata.json b/questions/how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used/metadata.json new file mode 100644 index 0000000..b6201ca --- /dev/null +++ b/questions/how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-handle-exceptions-in-flutter-and-what-strategies-have-you-used", + "rank": 44, + "difficulty": "intermediate" +} diff --git a/questions/how-do-you-handle-user-input-in-flutter/en-US.mdx b/questions/how-do-you-handle-user-input-in-flutter/en-US.mdx new file mode 100644 index 0000000..e0761ff --- /dev/null +++ b/questions/how-do-you-handle-user-input-in-flutter/en-US.mdx @@ -0,0 +1,14 @@ +--- +title: How do you handle user input in Flutter? +--- + +In Flutter, we can handle user input through various widgets such as `TextField`, `Checkbox`, `Radio`, `Slider`, `DropdownButton`, `GestureDetector`, and more. + +Here is a simple process for handling user input in Flutter: + +1. Determine the widget that captures the user's input, such as a `TextField` for text input or a `Checkbox` for boolean input. +2. Attach a callback function to the widget that should be called when the user interacts with it. For example, we can attach the `onChanged` callback to a `Checkbox` to be notified when the user taps the checkbox. +3. In the callback function, update the state of the application based on the user's input. For example, we can update a bool variable when the user toggles a `Checkbox`, or update a String variable when the user types into a `TextField`. +4. If the state has changed, call `setState()` to rebuild the UI with the updated state. + +It's important to note that the specific process for handling user input will vary depending on the widget and the requirements of the app. diff --git a/questions/how-do-you-handle-user-input-in-flutter/metadata.json b/questions/how-do-you-handle-user-input-in-flutter/metadata.json new file mode 100644 index 0000000..e41527d --- /dev/null +++ b/questions/how-do-you-handle-user-input-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-handle-user-input-in-flutter", + "rank": 60, + "difficulty": "intermediate" +} diff --git a/questions/how-do-you-implement-a-custom-animation-curve-in-flutter/en-US.mdx b/questions/how-do-you-implement-a-custom-animation-curve-in-flutter/en-US.mdx new file mode 100644 index 0000000..a05eb37 --- /dev/null +++ b/questions/how-do-you-implement-a-custom-animation-curve-in-flutter/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: How do you implement a custom animation curve in flutter? +--- + +To implement a custom animation curve in Flutter: + +- Create a custom class that extends `Curve` and override the `transform` method to define the curve's behavior. +- Apply the custom curve in an `Animation` object using `CurvedAnimation`. + +```dart +class CustomCurve extends Curve { + @override + double transform(double t) { + // Example: Ease-in-out quadratic curve + return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; + } +} + +final animation = CurvedAnimation( + parent: controller, + curve: CustomCurve(), +); +``` diff --git a/questions/how-do-you-implement-a-custom-animation-curve-in-flutter/metadata.json b/questions/how-do-you-implement-a-custom-animation-curve-in-flutter/metadata.json new file mode 100644 index 0000000..a7fc950 --- /dev/null +++ b/questions/how-do-you-implement-a-custom-animation-curve-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-implement-a-custom-animation-curve-in-flutter", + "rank": 86, + "difficulty": "advanced" +} diff --git a/questions/how-do-you-implement-a-custom-transition-between-screens-in-flutter/en-US.mdx b/questions/how-do-you-implement-a-custom-transition-between-screens-in-flutter/en-US.mdx new file mode 100644 index 0000000..ffb1187 --- /dev/null +++ b/questions/how-do-you-implement-a-custom-transition-between-screens-in-flutter/en-US.mdx @@ -0,0 +1,27 @@ +--- +title: How do you implement a custom transition between screens in flutter? +--- + +To implement a custom transition between screens in flutter: + +- Use `PageRouteBuilder` to define the transition animations. +- In the `pageBuilder`, define the widget for the new screen and use `Animation` objects to control the transition. +- In the `transitionsBuilder`, use Flutter's animation widgets like `FadeTransition`, `SlideTransition`, or custom combinations to animate the transition. +- Pass the `PageRouteBuilder` to the `Navigator.push` method. + +```dart +Navigator.push( + context, + PageRouteBuilder( + pageBuilder: (context, animation, secondaryAnimation) => NewScreen(), + transitionsBuilder: (context, animation, secondaryAnimation, child) { + final begin = Offset(1.0, 0.0); + final end = Offset.zero; + final tween = Tween(begin: begin, end: end); + final offsetAnimation = animation.drive(tween); + + return SlideTransition(position: offsetAnimation, child: child); + }, + ), +); +``` diff --git a/questions/how-do-you-implement-a-custom-transition-between-screens-in-flutter/metadata.json b/questions/how-do-you-implement-a-custom-transition-between-screens-in-flutter/metadata.json new file mode 100644 index 0000000..122f512 --- /dev/null +++ b/questions/how-do-you-implement-a-custom-transition-between-screens-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-implement-a-custom-transition-between-screens-in-flutter", + "rank": 85, + "difficulty": "advanced" +} diff --git a/questions/how-do-you-implement-a-draggable-widget-in-flutter/en-US.mdx b/questions/how-do-you-implement-a-draggable-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..5c4941c --- /dev/null +++ b/questions/how-do-you-implement-a-draggable-widget-in-flutter/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: How do you implement a draggable widget in flutter? +--- + +To implement a draggable widget in flutter, use the `Draggable` widget. Here's how to do it: + +- Use the `Draggable` widget to wrap the element you want to make draggable. +- Pass the data you want to drag through the data property. +- Use `feedback` to specify the widget that appears while dragging and `childWhenDragging` for the widget that replaces the original widget during the drag. + +```dart +Draggable( + data: 1, + feedback: Material( + color: Colors.transparent, + child: Icon(Icons.access_alarm, size: 50), + ), + childWhenDragging: Container(), + child: Icon(Icons.access_alarm), +) +``` + +In this example, when the user starts dragging the icon, it shows a smaller icon as the feedback. The original icon disappears until the drag ends. diff --git a/questions/how-do-you-implement-a-draggable-widget-in-flutter/metadata.json b/questions/how-do-you-implement-a-draggable-widget-in-flutter/metadata.json new file mode 100644 index 0000000..34f048e --- /dev/null +++ b/questions/how-do-you-implement-a-draggable-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-implement-a-draggable-widget-in-flutter", + "rank": 87, + "difficulty": "intermediate" +} diff --git a/questions/how-do-you-navigate-between-screens-in-flutter/en-US.mdx b/questions/how-do-you-navigate-between-screens-in-flutter/en-US.mdx new file mode 100644 index 0000000..28f5197 --- /dev/null +++ b/questions/how-do-you-navigate-between-screens-in-flutter/en-US.mdx @@ -0,0 +1,20 @@ +--- +title: How do you navigate between screens in Flutter? +--- + +In Flutter, we can navigate between screens using the `Navigator` class. We can push a new screen onto the stack using the `push` method, and pop the current screen off the stack using the `pop` method. We can also use named routes to navigate between screens. To do this, we need to define a map of named routes in the `MaterialApp`, and then use the `Navigator.pushNamed` method to navigate to a specific named route. + +Here are the basic steps to navigate between screens in Flutter: + +1. Define the screens or pages as separate widgets, each with its own unique name and content. +2. Use the `Navigator.push()` method to push a new Route onto the stack. + ```dart + Navigator.push( + context, + MaterialPageRoute(builder: (context) => SecondScreen()), + ); + ``` +3. Now, to go back to the previous screen use the `Navigator.pop()` method. + ```dart + Navigator.pop(context), + ``` diff --git a/questions/how-do-you-navigate-between-screens-in-flutter/metadata.json b/questions/how-do-you-navigate-between-screens-in-flutter/metadata.json new file mode 100644 index 0000000..f7fb7fd --- /dev/null +++ b/questions/how-do-you-navigate-between-screens-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-navigate-between-screens-in-flutter", + "rank": 66, + "difficulty": "easy" +} diff --git a/questions/how-do-you-pass-data-between-screens-in-flutter/en-US.mdx b/questions/how-do-you-pass-data-between-screens-in-flutter/en-US.mdx new file mode 100644 index 0000000..86fd239 --- /dev/null +++ b/questions/how-do-you-pass-data-between-screens-in-flutter/en-US.mdx @@ -0,0 +1,48 @@ +--- +title: How do you pass data between screens in Flutter? +--- + +In Flutter, we can pass data between screens using various methods. Some of the most commonly used methods are: + +1. **Using constructor parameters**: We can pass data between screens by passing the required data as parameters to the constructor of the destination screen. + + ```dart + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => SecondScreen(data: 'Hello World!'), + ), + ); + + class SecondScreen extends StatelessWidget { + final String data; + + SecondScreen({required this.data}); + + @override + Widget build(BuildContext context) { + return Scaffold( ... ); + } + } + ``` + +2. **Using named routes**: We can define named routes in the app and pass data as arguments to these routes. + + ```dart + Navigator.pushNamed( + context, + '/second', + arguments: 'Hello World!', + ); + + class SecondScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + final String data = ModalRoute.of(context)!.settings.arguments as String; + + return Scaffold( ... ); + } + } + ``` + +3. **Using a state management library**: We can use a state management library like Provider, Riverpod, Bloc, or MobX to manage the state of the app and pass data between screens. This approach is especially useful when complex data needs to be shared between multiple screens. diff --git a/questions/how-do-you-pass-data-between-screens-in-flutter/metadata.json b/questions/how-do-you-pass-data-between-screens-in-flutter/metadata.json new file mode 100644 index 0000000..a459724 --- /dev/null +++ b/questions/how-do-you-pass-data-between-screens-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-pass-data-between-screens-in-flutter", + "rank": 70, + "difficulty": "easy" +} diff --git a/questions/how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all/en-US.mdx b/questions/how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all/en-US.mdx new file mode 100644 index 0000000..9065b76 --- /dev/null +++ b/questions/how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all/en-US.mdx @@ -0,0 +1,26 @@ +--- +title: How do you provide accessibility when developing flutter apps, do you at all? +--- + +Yes, accessibility is a critical aspect of Flutter app development to ensure that the app is usable by everyone, including users with disabilities. In Flutter, several techniques are available to enhance accessibility: + +- **Use of Semantic Widgets:** Flutter provides `Semantics` widget, which allows you to annotate elements in the UI with meaningful descriptions. This helps screen readers understand what the widget represents and provides a better experience for visually impaired users. + +```dart +Semantics( + label: 'Submit button', + child: ElevatedButton(onPressed: () {}, child: Text('Submit')), +); +``` + +- **Text Accessibility:** Ensure that text content is readable by screen readers. This can be achieved by using accessible widgets like `Text` with clear, concise content and by applying the correct `semanticsLabel` for any custom widgets. + +- **Color Contrast:** Ensure sufficient contrast between text and background colors to assist users with visual impairments. Tools like Flutter's accessibility library can help check for contrast issues. + +- **Focus Management:** Implementing keyboard navigation and focus management is essential for users with motor disabilities. Flutter provides `FocusNode` and `FocusScope` to manage focus behavior. + +- **Custom Actions for Screen Readers:** For custom interactions like gestures or animations, use the `excludeSemantics` property wisely to avoid unnecessary verbosity and ensure that screen readers only announce relevant actions. + +- **Testing:** Test your app with accessibility tools like the built-in Android TalkBack or iOS VoiceOver to ensure that all elements are accessible. + +By using these techniques and Flutter's built-in tools, we can create more inclusive and accessible apps. diff --git a/questions/how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all/metadata.json b/questions/how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all/metadata.json new file mode 100644 index 0000000..c9b1aef --- /dev/null +++ b/questions/how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-provide-accessibility-when-developing-flutter-apps-do-you-at-all", + "rank": 88, + "difficulty": "intermediate" +} diff --git a/questions/how-do-you-use-the-positioned-widget-in-flutter/en-US.mdx b/questions/how-do-you-use-the-positioned-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..4fb6baa --- /dev/null +++ b/questions/how-do-you-use-the-positioned-widget-in-flutter/en-US.mdx @@ -0,0 +1,26 @@ +--- +title: How do you use the `Positioned` widget in Flutter? +--- + +In Flutter, the `Positioned` widget is used to position a child widget within a `Stack` widget. The `Positioned` widget takes four optional arguments: `left`, `top`, `right`, and `bottom`, which specify the position of the child widget relative to the edges of the parent `Stack` widget. + +For example: + +```dart +Stack( + children: [ + Positioned( + left: 10, + top: 10, + child: Text('Hi there!'), + ), + Positioned( + right: 10, + bottom: 10, + child: Text('Bye there!'), + ), + ], +), +``` + +In this example, we create a Stack widget with two child widgets that are positioned at opposite corners of the Stack. The first child widget is positioned 10 pixels from the left and top edges of the Stack, while the second child widget is positioned 10 pixels from the right and bottom edges of the Stack. diff --git a/questions/how-do-you-use-the-positioned-widget-in-flutter/metadata.json b/questions/how-do-you-use-the-positioned-widget-in-flutter/metadata.json new file mode 100644 index 0000000..cceb781 --- /dev/null +++ b/questions/how-do-you-use-the-positioned-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-use-the-positioned-widget-in-flutter", + "rank": 69, + "difficulty": "easy" +} diff --git a/questions/how-do-you-use-the-valuenotifier-class-in-flutter/en-US.mdx b/questions/how-do-you-use-the-valuenotifier-class-in-flutter/en-US.mdx new file mode 100644 index 0000000..ec6d938 --- /dev/null +++ b/questions/how-do-you-use-the-valuenotifier-class-in-flutter/en-US.mdx @@ -0,0 +1,28 @@ +--- +title: How do you use the `ValueNotifier` class in Flutter? +--- + +In Flutter, the `ValueNotifier` class is a simple class that provides a way to listen for changes to a value and update the UI accordingly. It's a convenient way to manage state for a small number of widgets, and is often used in combination with the `ChangeNotifier` and `Provider` classes from the Flutter `provider` package. + +To use `ValueNotifier`, first we need an instance of the class with an initial value: + +```dart +final ValueNotifier _myValue = ValueNotifier('Initial Value'); +``` + +To listen for changes to the value, we can use the `ValueListenableBuilder` widget. This widget takes a `ValueNotifier` and a `builder` function, and rebuilds its child whenever the value changes: + +```dart +ValueListenableBuilder( + valueListenable: _myValue, + builder: (BuildContext context, String value, Widget? child) { + return Text(value); + }, +), +``` + +To update the value of a `ValueNotifier`, simply set its value property: + +```dart +_myValue.value = 'New Value'; +``` diff --git a/questions/how-do-you-use-the-valuenotifier-class-in-flutter/metadata.json b/questions/how-do-you-use-the-valuenotifier-class-in-flutter/metadata.json new file mode 100644 index 0000000..167d19c --- /dev/null +++ b/questions/how-do-you-use-the-valuenotifier-class-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-use-the-valuenotifier-class-in-flutter", + "rank": 68, + "difficulty": "intermediate" +} diff --git a/questions/how-do-you-work-with-multiple-flutter-flavors/en-US.mdx b/questions/how-do-you-work-with-multiple-flutter-flavors/en-US.mdx new file mode 100644 index 0000000..c3c8f14 --- /dev/null +++ b/questions/how-do-you-work-with-multiple-flutter-flavors/en-US.mdx @@ -0,0 +1,16 @@ +--- +title: How do you work with multiple Flutter flavors? +--- + +To work with multiple Flutter flavors, follow these steps: + +- Define flavors in android/app/build.gradle, add `productFlavors` like dev, staging, and prod with unique `applicationId`s. +- Set up iOS schemes, create new schemes and configuration files in Xcode for each flavor. +- Use Dart entry points, create separate main_dev.dart, main_prod.dart, etc., for flavor-specific logic. + +Run/build with flavor: Use --flavor and -t flags: + +```sh +flutter run --flavor dev -t lib/main_dev.dart +flutter build apk --flavor prod -t lib/main_prod.dart +``` diff --git a/questions/how-do-you-work-with-multiple-flutter-flavors/metadata.json b/questions/how-do-you-work-with-multiple-flutter-flavors/metadata.json new file mode 100644 index 0000000..2877424 --- /dev/null +++ b/questions/how-do-you-work-with-multiple-flutter-flavors/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-do-you-work-with-multiple-flutter-flavors", + "rank": 96, + "difficulty": "advanced" +} diff --git a/questions/how-doobjectdynamic-andvardiffer-in-dart/en-US.mdx b/questions/how-doobjectdynamic-andvardiffer-in-dart/en-US.mdx new file mode 100644 index 0000000..09d8275 --- /dev/null +++ b/questions/how-doobjectdynamic-andvardiffer-in-dart/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: How do Object, dynamic, and var differ in Dart? +--- + +In Dart, Object, dynamic, and var are used for variable declarations but differ in how types are handled: + +**Object:** The base class for all types in Dart. Variables declared as Object can hold any type of value, but you need to explicitly cast them when accessing methods or properties specific to that type. + +```dart +Object obj = "Hello"; +``` + +**dynamic:** Allows any type, similar to Object, but without the need for casting. At runtime, the type is resolved dynamically, and any method or property can be accessed without compile-time checks. + +```dart +dynamic obj = "Hello"; // obj.length; (no type safety, but flexible) +``` + +**var:** Inferred type based on the assigned value. The type is determined at compile time and is fixed for the variable after assignment. + +```dart +var obj = "Hello"; // (obj is inferred as String) +``` diff --git a/questions/how-doobjectdynamic-andvardiffer-in-dart/metadata.json b/questions/how-doobjectdynamic-andvardiffer-in-dart/metadata.json new file mode 100644 index 0000000..4958e37 --- /dev/null +++ b/questions/how-doobjectdynamic-andvardiffer-in-dart/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-doobjectdynamic-andvardiffer-in-dart", + "rank": 99, + "difficulty": "easy" +} diff --git a/questions/how-to-create-a-list-with-persistent-headers/en-US.mdx b/questions/how-to-create-a-list-with-persistent-headers/en-US.mdx new file mode 100644 index 0000000..2688754 --- /dev/null +++ b/questions/how-to-create-a-list-with-persistent-headers/en-US.mdx @@ -0,0 +1,54 @@ +--- +title: How to create a list with persistent headers? +--- + +To create a list with persistent headers in flutter, we can use the `CustomScrollView` widget along with `SliverList` and `SliverPersistentHeader`. This allows to have headers that remain visible as the user scrolls through the list. + +Here's how to do it: +- Wrap the list and header in a `CustomScrollView` to enable scrolling and custom behaviors. +- The `SliverPersistentHeader` widget allows to create a header that can remain fixed or scroll away as the user scrolls the list. +- Inside `SliverPersistentHeader`, we can define the header's appearance, and we can also control whether it stays fixed or scrolls away. + +```dart +class PersistentHeaderList extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + body: CustomScrollView( + slivers: [ + SliverPersistentHeader( + delegate: _MyPersistentHeaderDelegate(), + pinned: true, // Makes the header sticky + ), + SliverList( + delegate: SliverChildBuilderDelegate( + (BuildContext context, int index) { + return ListTile(title: Text('Item $index')); + }, + childCount: 100, + ), + ), + ], + ), + ); + } +} + +class _MyPersistentHeaderDelegate extends SliverPersistentHeaderDelegate { + @override + double get maxExtent => 100.0; + @override + double get minExtent => 60.0; + + @override + Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { + return Container( + color: Colors.blue, + child: Text('Persistent Header'), + ); + } + + @override + bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => false; +} +``` diff --git a/questions/how-to-create-a-list-with-persistent-headers/metadata.json b/questions/how-to-create-a-list-with-persistent-headers/metadata.json new file mode 100644 index 0000000..1472fb8 --- /dev/null +++ b/questions/how-to-create-a-list-with-persistent-headers/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-to-create-a-list-with-persistent-headers", + "rank": 89, + "difficulty": "intermediate" +} diff --git a/questions/how-would-you-make-http-requests-in-the-flutter-framework/en-US.mdx b/questions/how-would-you-make-http-requests-in-the-flutter-framework/en-US.mdx new file mode 100644 index 0000000..9588199 --- /dev/null +++ b/questions/how-would-you-make-http-requests-in-the-flutter-framework/en-US.mdx @@ -0,0 +1,29 @@ +--- +title: How would you make HTTP requests in the Flutter framework? +--- + +Making HTTP requests in Flutter can be done using the `http` package. This package provides a simple API for sending HTTP requests and receiving HTTP responses. + +Here is an example of how to make a GET request to retrieve data from an API: + +```dart +import 'dart:convert'; +import 'package:http/http.dart' as http; + +Future fetchData() async { + final response = await http.get('https://jsonplaceholder.typicode.com/posts'); + + if (response.statusCode == 200) { + // If the server did return a 200 OK response, then parse the JSON + final data = json.decode(response.body); + print(data); + } else { + // If the server did not return a 200 OK response, then throw an exception + throw Exception('Failed to load data'); + } +} +``` + +In this example, we use the `http.get` method to send a GET request to the specified URL. The `await` keyword is used to wait for the response before continuing. If the response has a status code of 200, we parse the JSON data using the `json.decode` method. If the status code is not 200, we throw an exception. + +The `http` package is a simple and powerful tool for making HTTP requests in Flutter, and it can be used for a variety of tasks, including retrieving data from APIs, submitting form data, and uploading files. diff --git a/questions/how-would-you-make-http-requests-in-the-flutter-framework/metadata.json b/questions/how-would-you-make-http-requests-in-the-flutter-framework/metadata.json new file mode 100644 index 0000000..727c235 --- /dev/null +++ b/questions/how-would-you-make-http-requests-in-the-flutter-framework/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "how-would-you-make-http-requests-in-the-flutter-framework", + "rank": 47, + "difficulty": "easy" +} diff --git a/questions/list-the-responsibilities-of-flutteractivity/en-US.mdx b/questions/list-the-responsibilities-of-flutteractivity/en-US.mdx new file mode 100644 index 0000000..baf783c --- /dev/null +++ b/questions/list-the-responsibilities-of-flutteractivity/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: List the responsibilities of `FlutterActivity`. +--- + +`FlutterActivity` is the simplest and most direct way to integrate Flutter within an Android app. + +`FlutterActivity` maintains the following responsibilities: + +- Displays an Android launch screen. +- Configures the status bar appearance. +- Chooses the Dart execution app bundle path, entrypoint and entrypoint arguments. +- Chooses Flutter's initial route. +- Renders Activity transparently, if desired. +- Offers hooks for subclasses to provide and configure a `FlutterEngine`. +- Save and restore instance state. + +Learn more about [FlutterActivitiy](https://api.flutter.dev/javadoc/io/flutter/embedding/android/FlutterActivity.html). diff --git a/questions/list-the-responsibilities-of-flutteractivity/metadata.json b/questions/list-the-responsibilities-of-flutteractivity/metadata.json new file mode 100644 index 0000000..810d6c7 --- /dev/null +++ b/questions/list-the-responsibilities-of-flutteractivity/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "list-the-responsibilities-of-flutteractivity", + "rank": 83, + "difficulty": "advanced" +} diff --git a/questions/name-some-popular-apps-made-with-flutter/en-US.mdx b/questions/name-some-popular-apps-made-with-flutter/en-US.mdx new file mode 100644 index 0000000..993c5a0 --- /dev/null +++ b/questions/name-some-popular-apps-made-with-flutter/en-US.mdx @@ -0,0 +1,19 @@ +--- +title: Name some popular apps made with Flutter. +--- + +- BMW +- Google Pay +- Alibaba +- Beika +- Dream11 +- eBay +- Nubank +- Reflectly +- Rive +- Toyota +- Tencent +- Hamilton +- iRobot + +_Source: [here](https://flutter.dev/showcase)_ diff --git a/questions/name-some-popular-apps-made-with-flutter/metadata.json b/questions/name-some-popular-apps-made-with-flutter/metadata.json new file mode 100644 index 0000000..b236d5b --- /dev/null +++ b/questions/name-some-popular-apps-made-with-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "name-some-popular-apps-made-with-flutter", + "rank": 12, + "difficulty": "easy" +} diff --git a/questions/what-are-devtools-in-flutter/en-US.mdx b/questions/what-are-devtools-in-flutter/en-US.mdx new file mode 100644 index 0000000..3fdce01 --- /dev/null +++ b/questions/what-are-devtools-in-flutter/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: What are DevTools in Flutter? +--- + +`DevTools` in Flutter are a set of powerful web-based tools for debugging and profiling Flutter applications. They provide developers with detailed information about their apps, including CPU usage, memory usage, GPU rendering, and network activity. DevTools can be used to identify performance bottlenecks, inspect the widget tree, and debug issues in real-time. + +Here are some of the features of DevTools: + +- **Flutter inspector**: Allows us to inspect the widget tree and inspect the layout, size, and position of each widget. +- **Timeline view**: Provides a graphical representation of the performance of the app, including CPU, memory, and GPU usage. +- **Debugger**: Enables us to set breakpoints, inspect variables, and step through our code. +- **Logging view**: Displays log messages and errors generated by the app. +- **Hot reload**: Lets us modify oour code and see the changes reflected in the app without having to restart it. diff --git a/questions/what-are-devtools-in-flutter/metadata.json b/questions/what-are-devtools-in-flutter/metadata.json new file mode 100644 index 0000000..e526d20 --- /dev/null +++ b/questions/what-are-devtools-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-devtools-in-flutter", + "rank": 46, + "difficulty": "intermediate" +} diff --git a/questions/what-are-different-build-modes-in-flutter/en-US.mdx b/questions/what-are-different-build-modes-in-flutter/en-US.mdx new file mode 100644 index 0000000..933eaff --- /dev/null +++ b/questions/what-are-different-build-modes-in-flutter/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: What are different build modes in Flutter? +--- + +The Flutter tooling supports three different build modes while compiling the app. We need to choose the build mode depending upon where we are in the development cycle. + +- `debug`: For development purpose, the **hot reload** feature is enabled only in the debug mode. +- `profile`: For analyzing the app performance. We use DevTools suite to profile app's performance. +- `release`: For releasing the app when everything is ready. + +_To learn more, check [docs](https://docs.flutter.dev/testing/build-modes)._ diff --git a/questions/what-are-different-build-modes-in-flutter/metadata.json b/questions/what-are-different-build-modes-in-flutter/metadata.json new file mode 100644 index 0000000..be2c6d2 --- /dev/null +++ b/questions/what-are-different-build-modes-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-different-build-modes-in-flutter", + "rank": 13, + "difficulty": "intermediate" +} diff --git a/questions/what-are-keys-and-why-do-we-need-them/en-US.mdx b/questions/what-are-keys-and-why-do-we-need-them/en-US.mdx new file mode 100644 index 0000000..83ff150 --- /dev/null +++ b/questions/what-are-keys-and-why-do-we-need-them/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What are keys and why do we need them? +--- + +Flutter uses keys to preserve the state and to uniquely identify specific widgets within a widget tree. It is used to preserve the state of the `StatefulWidget`s while they are being replaced with other widgets or just moved in the widget tree. + +The most common usage of key is when we are dealing with collections of widgets that have the same type; so, without keys, the element tree would not know which state corresponds to which widget, as they would all have the same type. + +For an explanation with an example, check this [stackoverflow answer](https://stackoverflow.com/a/50081052). diff --git a/questions/what-are-keys-and-why-do-we-need-them/metadata.json b/questions/what-are-keys-and-why-do-we-need-them/metadata.json new file mode 100644 index 0000000..2404b84 --- /dev/null +++ b/questions/what-are-keys-and-why-do-we-need-them/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-keys-and-why-do-we-need-them", + "rank": 17, + "difficulty": "intermediate" +} diff --git a/questions/what-are-mixins-how-to-use-them/en-US.mdx b/questions/what-are-mixins-how-to-use-them/en-US.mdx new file mode 100644 index 0000000..bac0449 --- /dev/null +++ b/questions/what-are-mixins-how-to-use-them/en-US.mdx @@ -0,0 +1,54 @@ +--- +title: What are mixins? How to use them? +--- + +A mixin is a class whose methods and properties can be used by other classes – without subclassing. It's a reusable chunk of code that can be plugged in to any class that needs this functionality. + +Example of a mixin: + +```dart +// To create a mixin, use `mixin` keyword instead of `class`. +mixin GreetingsMixin { + String greeting = 'Hello people'; + + void introduce() => print('$greeting, I am Sandip.'); +} + +// The following example shows two classes that use the above mixin. +class Something extends MyClass with GreetingsMixin { + // ... +} + +class SomethingElse extends MyAnotherClass with GreetingsMixin { + SomethingElse() { + greeting = 'Hi everyone'; + } +} + +// Here is how to use them +SomethingElse obj = SomethingElse(); +obj.introduce(); // Hi everyone, I am Sandip. +``` + +Sometimes you want to restrict from mixing in functionality to classes that have no deal with the mixin. To restrict a mixin, use the 'on' keyword to specify the required subclass. + +```dart +class SocialMedia { + // ... +} + +// Create a mixin restricted on [SocialMedia] class +mixin SocialMediaGreetings on SocialMedia { + String greeting = 'Hello people'; + + void introduce() => print('$greeting, I am Sandip.'); +} + +// Only classes that extend or implement the [SocialMedia] class +// can use the mixin [SocialMediaGreetings] +class Twitter extends SocialMedia with SocialMediaGreetings { + Twitter() { + greeting = 'Hello Tweeple'; + } +} +``` diff --git a/questions/what-are-mixins-how-to-use-them/metadata.json b/questions/what-are-mixins-how-to-use-them/metadata.json new file mode 100644 index 0000000..3f02a24 --- /dev/null +++ b/questions/what-are-mixins-how-to-use-them/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-mixins-how-to-use-them", + "rank": 26, + "difficulty": "intermediate" +} diff --git a/questions/what-are-packages-and-plugins-in-flutter/en-US.mdx b/questions/what-are-packages-and-plugins-in-flutter/en-US.mdx new file mode 100644 index 0000000..8b74ce5 --- /dev/null +++ b/questions/what-are-packages-and-plugins-in-flutter/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What are packages and plugins in Flutter? +--- + +A package only contains Dart code. Some of the packages may use Flutter specific functionality and thus have a dependency on the Flutter framework. + +A plugin contains Dart combined with one or more platform-specific native (Java/Swift/JavaScript) code. The API of the plugin is written in Dart and the implementations are written in native languages. Flutter uses platform channels to communicate with native codes. diff --git a/questions/what-are-packages-and-plugins-in-flutter/metadata.json b/questions/what-are-packages-and-plugins-in-flutter/metadata.json new file mode 100644 index 0000000..63cf7e8 --- /dev/null +++ b/questions/what-are-packages-and-plugins-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-packages-and-plugins-in-flutter", + "rank": 11, + "difficulty": "easy" +} diff --git a/questions/what-are-platform-channels-in-flutter-and-when-would-you-use-them/en-US.mdx b/questions/what-are-platform-channels-in-flutter-and-when-would-you-use-them/en-US.mdx new file mode 100644 index 0000000..318dcfe --- /dev/null +++ b/questions/what-are-platform-channels-in-flutter-and-when-would-you-use-them/en-US.mdx @@ -0,0 +1,33 @@ +--- +title: What are platform channels in Flutter and when would you use them? +--- + +Platform channels in Flutter enable communication between Flutter’s Dart code and the host platform's native code (e.g., Java/Kotlin on Android or Swift/Objective-C on iOS). They are used when you need to access platform-specific APIs or features not directly available in Flutter. + +When to use them: + +- Accessing device hardware (camera, GPS, sensors). +- Using platform-specific libraries or SDKs. +- Integrating native functionality like notifications or background services. + +Example: +Using a platform channel to get the battery level: + +```dart +// Dart (Flutter) +const platform = MethodChannel('samples.flutter.dev/battery'); +final batteryLevel = await platform.invokeMethod('getBatteryLevel'); +``` + +```java +// Android (Native) +new MethodChannel(getFlutterEngine().getDartExecutor().getBinaryMessenger(), "samples.flutter.dev/battery") + .setMethodCallHandler((call, result) -> { + if (call.method.equals("getBatteryLevel")) { + int batteryLevel = getBatteryLevel(); // Native method + result.success(batteryLevel); + } else { + result.notImplemented(); + } + }); +``` diff --git a/questions/what-are-platform-channels-in-flutter-and-when-would-you-use-them/metadata.json b/questions/what-are-platform-channels-in-flutter-and-when-would-you-use-them/metadata.json new file mode 100644 index 0000000..4433c46 --- /dev/null +++ b/questions/what-are-platform-channels-in-flutter-and-when-would-you-use-them/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-platform-channels-in-flutter-and-when-would-you-use-them", + "rank": 95, + "difficulty": "advanced" +} diff --git a/questions/what-are-slivers/en-US.mdx b/questions/what-are-slivers/en-US.mdx new file mode 100644 index 0000000..dac7c3e --- /dev/null +++ b/questions/what-are-slivers/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What are `Slivers`? +--- + +A sliver is a portion of a scrollable area that you can define to behave in a special way. You can use slivers to achieve custom scrolling effects, such as elastic scrolling. + +Under the hood, slivers are used to implement all of the scrollable views you use, including ListView and GridView. Slivers can be compared to a lower-level interface that offers more precise control over the implementation of scrollable areas. + +Sliver lets you render child widgets lazily or render only the visible segment of the screen. Additionally, Sliver provides a better experience when you need to scroll a list of items and a grid of items all together as a single unit or create a collapsible header. It makes the overall scrolling effect of large lists effective and efficient. diff --git a/questions/what-are-slivers/metadata.json b/questions/what-are-slivers/metadata.json new file mode 100644 index 0000000..2377ad5 --- /dev/null +++ b/questions/what-are-slivers/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-slivers", + "rank": 21, + "difficulty": "advanced" +} diff --git a/questions/what-are-statefulwidget-lifecycle-methods-explain-briefly/en-US.mdx b/questions/what-are-statefulwidget-lifecycle-methods-explain-briefly/en-US.mdx new file mode 100644 index 0000000..65a29c9 --- /dev/null +++ b/questions/what-are-statefulwidget-lifecycle-methods-explain-briefly/en-US.mdx @@ -0,0 +1,19 @@ +--- +title: What are `StatefulWidget` Lifecycle methods. Explain briefly. +--- + +- **createState() method:** Whenever a StatefulWidget is created, the framework calls this method to create fresh State objects. This method must be overridden. + +- **initState() method:** This method is the first method that is called while creating a StatefulWidget class. Here we allocate our resources, which means we can initialize our variable, data, and properties. + +- **didChangeDependencies() method:** This method is called just after initState() method when a dependency of this State object changes. For example, if the previous build was referencing an InheritedWidget that changes, this method notifies the object to change. Generally, subclasses don't override didChangeDependencies() method because the framework calls build() methods after dependency change. But to do some expensive work, let's say some network calls, the method is preferred over doing everything on build() method itself. + +- **build() method:** Every time the widget is rebuilt, the build() method is used. This can happen after calling initState(), didChangeDependencies(), or didUpdateWidget(), or after changing the state with a call to setState(). + +- **didUpdateWidget() method:** This method is called whenever the widget configuration changes. This method exists for triggering side-effects when one of the parameters in the StatefulWidget changes. A typical example is implicitly animated widgets. + +- **setState() method:** This method notifies the framework that the internal state of this object has changed. The provided callback must be synchronous which might impact the user interface in the subtree. The framework schedules a build() for this current State object. + +- **deactivate() method:** The framework calls this method when the State is removed from the tree, temporarily or permanently. + +- **dispose() method:** This method is called when the State is removed from the tree, permanently. After the dispose() method is called, the State object is considered unmounted. Subclasses should override this method to release any resources retained by this object. diff --git a/questions/what-are-statefulwidget-lifecycle-methods-explain-briefly/metadata.json b/questions/what-are-statefulwidget-lifecycle-methods-explain-briefly/metadata.json new file mode 100644 index 0000000..80f5d8d --- /dev/null +++ b/questions/what-are-statefulwidget-lifecycle-methods-explain-briefly/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-statefulwidget-lifecycle-methods-explain-briefly", + "rank": 16, + "difficulty": "intermediate" +} diff --git a/questions/what-are-the-advantages-of-a-flutter-inspector/en-US.mdx b/questions/what-are-the-advantages-of-a-flutter-inspector/en-US.mdx new file mode 100644 index 0000000..eada913 --- /dev/null +++ b/questions/what-are-the-advantages-of-a-flutter-inspector/en-US.mdx @@ -0,0 +1,21 @@ +--- +title: What are the advantages of a Flutter Inspector? +--- + +The Flutter Inspector provides several key features that help developers debug and optimize their applications: + +1. **Select Widget Mode:** Allows you to choose a widget directly from the app on your device to inspect its properties. This is useful for understanding how each widget behaves in the layout (source: Flutter Docs). + +2. **Refresh Tree:** After hot reloading, the widget tree in the inspector may not immediately update. Clicking Refresh Tree reloads the widget information to reflect the latest changes (source: Flutter Docs). + +3. **Slow Animations:** Slows down the animation speed by a factor of 5, allowing you to fine-tune and observe animations more clearly (source: Flutter Docs). + +4. **Show Guidelines:** Overlays layout guidelines on your screen to help fix layout issues and ensure consistent UI design (source: Flutter Docs). + +5. **Show Baselines:** Displays baselines used to align text, which is helpful for checking proper text alignment within the UI (source: Flutter Docs). + +6. **Highlight Repaints:** Highlights areas of the screen that repaint, with borders changing colors. This helps you identify unnecessary repaints that may be affecting performance (source: Flutter Docs). + +7. **Highlight Oversized Images:** Highlights images that consume too much memory by inverting their colors and flipping them, guiding you to optimize image sizes for better performance (source: Flutter Docs). + +These tools enhance the debugging process and improve the performance of your Flutter app by providing in-depth visual feedback during development. diff --git a/questions/what-are-the-advantages-of-a-flutter-inspector/metadata.json b/questions/what-are-the-advantages-of-a-flutter-inspector/metadata.json new file mode 100644 index 0000000..dd26f52 --- /dev/null +++ b/questions/what-are-the-advantages-of-a-flutter-inspector/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-the-advantages-of-a-flutter-inspector", + "rank": 82, + "difficulty": "advanced" +} diff --git a/questions/what-are-the-differences-between-jit-and-aot/en-US.mdx b/questions/what-are-the-differences-between-jit-and-aot/en-US.mdx new file mode 100644 index 0000000..2a8d911 --- /dev/null +++ b/questions/what-are-the-differences-between-jit-and-aot/en-US.mdx @@ -0,0 +1,15 @@ +--- +title: What are the differences between JIT and AOT? +--- + +JIT stands for Just-in-Time vs AOT stands for Ahead-of-Time. + +- JIT compiles code during runtime. Used in development (e.g., hot reload) but has slower performance. +- AOT compiles code before runtime (during build). Used in production for faster performance and optimized binary size. + +Key Differences: + +- JIT is slower, smaller binary, errors at runtime. +- AOT is faster, larger binary, errors at compile-time. + +In Flutter, JIT is used in debug mode, and AOT is used in release mode for optimized apps. diff --git a/questions/what-are-the-differences-between-jit-and-aot/metadata.json b/questions/what-are-the-differences-between-jit-and-aot/metadata.json new file mode 100644 index 0000000..756d7ab --- /dev/null +++ b/questions/what-are-the-differences-between-jit-and-aot/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-the-differences-between-jit-and-aot", + "rank": 98, + "difficulty": "intermediate" +} diff --git a/questions/what-are-the-various-kinds-of-streams-present-in-flutter/en-US.mdx b/questions/what-are-the-various-kinds-of-streams-present-in-flutter/en-US.mdx new file mode 100644 index 0000000..b1b3dc3 --- /dev/null +++ b/questions/what-are-the-various-kinds-of-streams-present-in-flutter/en-US.mdx @@ -0,0 +1,16 @@ +--- +title: What are the various kinds of Streams present in flutter? +--- + +Streams in flutter are of two main types: + +**Single Subscription Stream** +- Allows a single listener to subscribe at a time. +- Suitable for sequential data processing, like events or user input. +- Commonly used in situations like button clicks or network requests. + +**Broadcast Stream** + +- Allows multiple listeners to subscribe simultaneously. +- Ideal for scenarios where the same data needs to be shared across multiple listeners. +- Often used for shared events, like a global notification system. diff --git a/questions/what-are-the-various-kinds-of-streams-present-in-flutter/metadata.json b/questions/what-are-the-various-kinds-of-streams-present-in-flutter/metadata.json new file mode 100644 index 0000000..8208f09 --- /dev/null +++ b/questions/what-are-the-various-kinds-of-streams-present-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-the-various-kinds-of-streams-present-in-flutter", + "rank": 92, + "difficulty": "intermediate" +} diff --git a/questions/what-are-widgets-in-flutter/en-US.mdx b/questions/what-are-widgets-in-flutter/en-US.mdx new file mode 100644 index 0000000..2089a22 --- /dev/null +++ b/questions/what-are-widgets-in-flutter/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What are widgets in Flutter? +--- + +Widgets are the central class hierarchy in the Flutter framework, that describes the configuration of an element to manage the underlying render tree. A widget is an immutable description of part of a user interface. Widgets themselves have no mutable state, i.e., all their fields must be final. + +In Flutter, **everything is a widget**. diff --git a/questions/what-are-widgets-in-flutter/metadata.json b/questions/what-are-widgets-in-flutter/metadata.json new file mode 100644 index 0000000..1e979ba --- /dev/null +++ b/questions/what-are-widgets-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-are-widgets-in-flutter", + "rank": 6, + "difficulty": "easy" +} diff --git a/questions/what-do-you-mean-by-null-aware-operators/en-US.mdx b/questions/what-do-you-mean-by-null-aware-operators/en-US.mdx new file mode 100644 index 0000000..9365f97 --- /dev/null +++ b/questions/what-do-you-mean-by-null-aware-operators/en-US.mdx @@ -0,0 +1,40 @@ +--- +title: What do you mean by Null-aware operators? +--- + +Null aware operator allows us to make computations based on whether or not a value is null. + +Example of null-aware operators are: + +- **Optional Chaining Operator (?.):** + + We use ?. when we want to call a method/getter on an object if and only if that object is not null (otherwise, return null). + + ```dart + String? name = user?.name; + + // This code is same as + // String? name = (user == null) ? null : user.name; + ``` + +- **Default Operator (??):** + + We use ?? when you want to evaluate and return an expression if another expression resolves to null. It is also called the **if-null operator** and **coalescing operator**. The null-aware operator is ??, which returns the expression on its left unless that expression’s value is null. In which case it’s null it returns the expression on its right. + + ```dart + String? hello; + String? greeting = hello ?? 'Hey'; + + // This code is same as + // String? greeting = (hello == null) ? 'Hey' : hello; + ``` + +- **Logical Nullish Assignment (??=):** + + We use ??= when we want to assign a value to an object if that object is null. Otherwise, it returns the object. + + ```dart + int? x; + x ??= 3; // Assigns 3 to the variable `x` + x ??= 5; // As x is not null now, it's value is still 3 + ``` diff --git a/questions/what-do-you-mean-by-null-aware-operators/metadata.json b/questions/what-do-you-mean-by-null-aware-operators/metadata.json new file mode 100644 index 0000000..175d9e1 --- /dev/null +++ b/questions/what-do-you-mean-by-null-aware-operators/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-do-you-mean-by-null-aware-operators", + "rank": 28, + "difficulty": "easy" +} diff --git a/questions/what-do-you-mean-by-open-source-software-is-flutter-open-source/en-US.mdx b/questions/what-do-you-mean-by-open-source-software-is-flutter-open-source/en-US.mdx new file mode 100644 index 0000000..bbb1f36 --- /dev/null +++ b/questions/what-do-you-mean-by-open-source-software-is-flutter-open-source/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What do you mean by open-source software? Is Flutter open-source? +--- + +Open-source software is software with source code that anyone can inspect, modify, and enhance. Open-source software is developed in a decentralized and collaborative way, relying on peer review and community production. Open source software is often cheaper, more flexible, and has more longevity than its proprietary peers because it is developed by communities rather than a single author or company. + +Yes, Flutter is an open-source software development kit. diff --git a/questions/what-do-you-mean-by-open-source-software-is-flutter-open-source/metadata.json b/questions/what-do-you-mean-by-open-source-software-is-flutter-open-source/metadata.json new file mode 100644 index 0000000..f38fd50 --- /dev/null +++ b/questions/what-do-you-mean-by-open-source-software-is-flutter-open-source/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-do-you-mean-by-open-source-software-is-flutter-open-source", + "rank": 8, + "difficulty": "easy" +} diff --git a/questions/what-is-a-custompainter-in-flutter/en-US.mdx b/questions/what-is-a-custompainter-in-flutter/en-US.mdx new file mode 100644 index 0000000..75244f4 --- /dev/null +++ b/questions/what-is-a-custompainter-in-flutter/en-US.mdx @@ -0,0 +1,30 @@ +--- +title: What is a `CustomPainter` in Flutter? +--- + +In Flutter, a `CustomPainter` is a class that allows to create custom graphics and animations by painting on a Canvas. It is used in conjunction with a `CustomPaint` widget to create custom visuals that can be added to a widget tree. + +To use `CustomPainter`, we need to create a class that extends `CustomPainter` and implements the `paint` and `shouldRepaint` methods. The `paint` method is where we define what to draw on the canvas, while the `shouldRepaint` method is used to determine whether to repaint the canvas when the widget is updated. + +```dart +// Custom Painter +class RectanglePainter extends CustomPainter { + @override + void paint(Canvas canvas, Size size) { + final paint = Paint() + ..color = Colors.blue + ..style = PaintingStyle.fill; + final rect = Rect.fromLTWH(0, 0, size.width, size.height); + canvas.drawRect(rect, paint); + } + + @override + bool shouldRepaint(RectanglePainter oldDelegate) => false; +} + +// How to use the CustomPainter using CustomPaint widget +CustomPaint( + painter: RectanglePainter(), + size: Size(200, 200), // defines the sixe of the canvas +), +``` diff --git a/questions/what-is-a-custompainter-in-flutter/metadata.json b/questions/what-is-a-custompainter-in-flutter/metadata.json new file mode 100644 index 0000000..94a8403 --- /dev/null +++ b/questions/what-is-a-custompainter-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-a-custompainter-in-flutter", + "rank": 73, + "difficulty": "advanced" +} diff --git a/questions/what-is-a-globalkey-in-flutter/en-US.mdx b/questions/what-is-a-globalkey-in-flutter/en-US.mdx new file mode 100644 index 0000000..102e940 --- /dev/null +++ b/questions/what-is-a-globalkey-in-flutter/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is a GlobalKey in Flutter? +--- + +A `GlobalKey` is a unique identifier for a widget in the widget tree, allowing the widget to be accessed and manipulated from outside of its parent or ancestor widgets. It is a class in the Flutter framework that can be used with stateful or stateless widgets to uniquely identify a widget. + +With a `GlobalKey`, we can access a widget's state, as well as invoke its methods and properties from other widgets in the widget tree. This can be useful in situations where we need to manipulate a widget's state from outside of its parent widget, such as in form validation or when implementing animations. + +However, it is important to use `GlobalKey` sparingly and only when necessary, as overuse can lead to poor code maintainability and performance issues. When possible, it is generally recommended to use the `BuildContext` object and Flutter's reactive programming model to handle state and data management in the application. diff --git a/questions/what-is-a-globalkey-in-flutter/metadata.json b/questions/what-is-a-globalkey-in-flutter/metadata.json new file mode 100644 index 0000000..ca3e24c --- /dev/null +++ b/questions/what-is-a-globalkey-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-a-globalkey-in-flutter", + "rank": 56, + "difficulty": "intermediate" +} diff --git a/questions/what-is-a-mediaquery-in-flutter/en-US.mdx b/questions/what-is-a-mediaquery-in-flutter/en-US.mdx new file mode 100644 index 0000000..0b818c8 --- /dev/null +++ b/questions/what-is-a-mediaquery-in-flutter/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: What is a `MediaQuery` in Flutter? +--- + +In Flutter, a `MediaQuery` is a widget that provides information about the device's screen size, orientation, and other display-related characteristics. It is typically used to create responsive UIs that adapt to different screen sizes and densities. + +The `MediaQuery` widget is usually placed at the root of the widget tree, and it provides a `MediaQueryData` object that contains various properties related to the device's display, such as: + +- **Screen size**: `MediaQueryData.size` returns the size of the device's screen in logical pixels (i.e., independent of the device's pixel density). +- **Screen orientation**: `MediaQueryData.orientation` returns the orientation of the device's screen (portrait or landscape). +- **Pixel density**: `MediaQueryData.devicePixelRatio` returns the device's pixel density, which is the ratio between physical pixels and logical pixels. +- **Text scaling factor**: `MediaQueryData.textScaleFactor` returns the user's preferred text scaling factor, which can be used to adjust the font size of text in the app. +- **Platform**: `MediaQueryData.platformBrightness` returns the platform's preferred brightness mode (light or dark). diff --git a/questions/what-is-a-mediaquery-in-flutter/metadata.json b/questions/what-is-a-mediaquery-in-flutter/metadata.json new file mode 100644 index 0000000..33c7d08 --- /dev/null +++ b/questions/what-is-a-mediaquery-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-a-mediaquery-in-flutter", + "rank": 71, + "difficulty": "intermediate" +} diff --git a/questions/what-is-a-modal-bottom-sheet-in-flutter/en-US.mdx b/questions/what-is-a-modal-bottom-sheet-in-flutter/en-US.mdx new file mode 100644 index 0000000..5f88702 --- /dev/null +++ b/questions/what-is-a-modal-bottom-sheet-in-flutter/en-US.mdx @@ -0,0 +1,18 @@ +--- +title: What is a modal bottom sheet in Flutter? +--- + +In Flutter, a modal bottom sheet is a type of popup that is displayed at the bottom of the screen and covers a portion of the parent widget. Modal bottom sheets are commonly used to display additional options or information that are related to the parent widget, but require additional user input to complete an action. + +Modal bottom sheets are created using the `showModalBottomSheet()` method, which takes a `BuildContext` and a `builder` argument. The `builder` argument is a callback that returns a widget that represents the content of the modal bottom sheet. + +```dart +showModalBottomSheet( + context: context, + builder: (BuildContext context) { + return Container( + // WRITE YOUR CODE HERE + ); + }, +); +``` diff --git a/questions/what-is-a-modal-bottom-sheet-in-flutter/metadata.json b/questions/what-is-a-modal-bottom-sheet-in-flutter/metadata.json new file mode 100644 index 0000000..f9c5738 --- /dev/null +++ b/questions/what-is-a-modal-bottom-sheet-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-a-modal-bottom-sheet-in-flutter", + "rank": 67, + "difficulty": "easy" +} diff --git a/questions/what-is-a-theme-in-flutter/en-US.mdx b/questions/what-is-a-theme-in-flutter/en-US.mdx new file mode 100644 index 0000000..5403bfa --- /dev/null +++ b/questions/what-is-a-theme-in-flutter/en-US.mdx @@ -0,0 +1,28 @@ +--- +title: What is a `Theme` in Flutter? +--- + +In Flutter, a `Theme` is a widget that provides a way to customize the visual appearance of an app. A `Theme` widget can be used to set the colors, fonts, and other visual properties for a specific part or the entire app. + +Using a `Theme` widget, we can define a set of colors, fonts, and other properties that apply to all widgets within the Theme's subtree. This can make it easier to maintain consistency in the app's visual appearance and reduce the amount of duplicated code. + +Here are some common use cases for using a Theme widget: + +- Setting the app's primary and accent colors +- Defining text styles for various widget types (e.g. headings, body text, etc.) +- Setting default button styles +- Defining shapes and elevations for Material Design widgets +- Setting default padding and margins for widgets + +```dart +MaterialApp( + theme: ThemeData( + primaryColor: Colors.blue, + accentColor: Colors.orange, + textTheme: TextTheme( + headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold), + bodyText1: TextStyle(fontSize: 18), + ), + ), +), +``` diff --git a/questions/what-is-a-theme-in-flutter/metadata.json b/questions/what-is-a-theme-in-flutter/metadata.json new file mode 100644 index 0000000..9c1f2e7 --- /dev/null +++ b/questions/what-is-a-theme-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-a-theme-in-flutter", + "rank": 64, + "difficulty": "easy" +} diff --git a/questions/what-is-an-aspectratio-widget-used-for/en-US.mdx b/questions/what-is-an-aspectratio-widget-used-for/en-US.mdx new file mode 100644 index 0000000..8de053d --- /dev/null +++ b/questions/what-is-an-aspectratio-widget-used-for/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is an `AspectRatio` widget used for? +--- + +The `AspectRatio` widget in Flutter is used to ensure that a widget maintains a specific aspect ratio, regardless of the size of the parent container. This can be useful in cases where you want a widget to have a specific shape, such as a square or a rectangle with a fixed width-to-height ratio. + +The aspect ratio is defined as the width of the widget divided by its height. The `AspectRatio` widget takes the aspect ratio as an argument and sets the width or height of the widget such that the aspect ratio is maintained. The other dimension is automatically adjusted to match. + +For example, if you want to create a square widget, you can wrap the widget in an AspectRatio widget with an aspect ratio of 1.0, and the widget will always be square, regardless of the size of the parent container. diff --git a/questions/what-is-an-aspectratio-widget-used-for/metadata.json b/questions/what-is-an-aspectratio-widget-used-for/metadata.json new file mode 100644 index 0000000..9e56a35 --- /dev/null +++ b/questions/what-is-an-aspectratio-widget-used-for/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-an-aspectratio-widget-used-for", + "rank": 37, + "difficulty": "easy" +} diff --git a/questions/what-is-animation-and-animationcontroller/en-US.mdx b/questions/what-is-animation-and-animationcontroller/en-US.mdx new file mode 100644 index 0000000..9de64d7 --- /dev/null +++ b/questions/what-is-animation-and-animationcontroller/en-US.mdx @@ -0,0 +1,50 @@ +--- +title: What is `Animation` and `AnimationController`? +--- + +`Animation` is a way to describe a graphical representation of a changing value over time. It can be used to animate the properties of widgets, such as size, color, position, and opacity, to create smooth and visually appealing transitions. + +`AnimationController` is a central class in Flutter's animation framework that is used to control the animations. It defines the duration, direction, and other properties of an animation, and provides methods for starting, stopping, and monitoring the progress of the animation. + +In Flutter, animations can be created by using the `AnimationController` in combination with `Tween` and `Curve` objects, which define the animation's starting and ending values and the progression of the animation over time. + +```dart +class MyAnimation extends StatefulWidget { + @override + _MyAnimationState createState() => _MyAnimationState(); +} + +class _MyAnimationState extends State + with SingleTickerProviderStateMixin { + AnimationController _controller; + Animation _animation; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: Duration(seconds: 2), + vsync: this, + ); + _animation = Tween(begin: 0, end: 300).animate(_controller) + ..addListener(() { + setState(() {}); + }); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container( + height: _animation.value, + width: _animation.value, + child: FlutterLogo(), + ); + } +} +``` diff --git a/questions/what-is-animation-and-animationcontroller/metadata.json b/questions/what-is-animation-and-animationcontroller/metadata.json new file mode 100644 index 0000000..03a1f03 --- /dev/null +++ b/questions/what-is-animation-and-animationcontroller/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-animation-and-animationcontroller", + "rank": 34, + "difficulty": "intermediate" +} diff --git a/questions/what-is-applifecyclestate/en-US.mdx b/questions/what-is-applifecyclestate/en-US.mdx new file mode 100644 index 0000000..91c9729 --- /dev/null +++ b/questions/what-is-applifecyclestate/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: What is `AppLifecycleState`? +--- + +The `AppLifecycleState` defines the state that an application can be. + +- **detached (AppLifecycleState.detached):** This means the application is still hosted on flutter engine but is detached from any host views. It can either be in the progress of attaching a view when engine was first initializes, or after the view being destroyed due to a Navigator pop. + +- **inactive (AppLifecycleState.inactive):** This means the application is in an inactive state and is not receiving user input. Simply we can say the app is in the foreground and not running in the background on your mobile phone. + +- **paused (AppLifecycleState.paused):** This means the application is not currently visible to the user, not responding to user input, and running in the background. + +- **resumed (AppLifecycleState.resumed):** This means the application is visible and responding to user input. diff --git a/questions/what-is-applifecyclestate/metadata.json b/questions/what-is-applifecyclestate/metadata.json new file mode 100644 index 0000000..e36355b --- /dev/null +++ b/questions/what-is-applifecyclestate/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-applifecyclestate", + "rank": 29, + "difficulty": "intermediate" +} diff --git a/questions/what-is-assert-used-for-in-dart-and-flutter/en-US.mdx b/questions/what-is-assert-used-for-in-dart-and-flutter/en-US.mdx new file mode 100644 index 0000000..7f4163e --- /dev/null +++ b/questions/what-is-assert-used-for-in-dart-and-flutter/en-US.mdx @@ -0,0 +1,24 @@ +--- +title: What is `assert` used for in Dart and Flutter? +--- + +The `assert` is a statement in Dart and Flutter that checks if a boolean condition is true and triggers an exception if the condition is false. It is typically used for debugging purposes, as it is intended to be used in development only and will be ignored in a production environment. + +An `assert` statement takes the following form: + +``` +assert(condition); +``` + +where `condition` is the boolean expression to be evaluated. If `condition` is `true`, the `assert` statement does nothing. However, if `condition` is `false`, the `assert` statement throws an `AssertionError` with a message indicating that the condition failed. + +Here's an example of using an `assert` statement to check if a variable has a certain value: + +```dart +int score = 50; +assert(score >= 60, "Score must be at least 60"); +``` + +In this example, if `score` is less than 60, the `assert` statement will throw an `AssertionError` with the message `Score must be at least 60`. + +In summary, `assert` is used in Dart and Flutter to validate conditions during development and help catch potential bugs before they make it to production. diff --git a/questions/what-is-assert-used-for-in-dart-and-flutter/metadata.json b/questions/what-is-assert-used-for-in-dart-and-flutter/metadata.json new file mode 100644 index 0000000..56f064a --- /dev/null +++ b/questions/what-is-assert-used-for-in-dart-and-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-assert-used-for-in-dart-and-flutter", + "rank": 40, + "difficulty": "easy" +} diff --git a/questions/what-is-buildcontext-in-flutter-and-why-is-it-needed/en-US.mdx b/questions/what-is-buildcontext-in-flutter-and-why-is-it-needed/en-US.mdx new file mode 100644 index 0000000..8a2bce1 --- /dev/null +++ b/questions/what-is-buildcontext-in-flutter-and-why-is-it-needed/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is `BuildContext` in Flutter? And why is it needed? +--- + +`BuildContext` is a locator that tracks and locates each widget in a widget tree. `BuildContext` objects are passed to **WidgetBuilder** functions, and are available from the `State.context` member. Some static functions (e.g. **showDialog**, **Theme.of**, and so forth) also take build contexts so that they can act on behalf of the calling widget, or obtain data specifically for the given context. + +There are many reasons why `BuildContext` is important. From locating widgets in the tree to interacting with **RenderObjects**, the context makes all of these interactions possible. It serves as the **bridge** between the widgets and rendering layer and is especially powerful for combining functionality or using information from one tree in another. diff --git a/questions/what-is-buildcontext-in-flutter-and-why-is-it-needed/metadata.json b/questions/what-is-buildcontext-in-flutter-and-why-is-it-needed/metadata.json new file mode 100644 index 0000000..97b67d3 --- /dev/null +++ b/questions/what-is-buildcontext-in-flutter-and-why-is-it-needed/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-buildcontext-in-flutter-and-why-is-it-needed", + "rank": 10, + "difficulty": "intermediate" +} diff --git a/questions/what-is-code-splitting-in-flutter-and-how-does-it-help/en-US.mdx b/questions/what-is-code-splitting-in-flutter-and-how-does-it-help/en-US.mdx new file mode 100644 index 0000000..d528d1a --- /dev/null +++ b/questions/what-is-code-splitting-in-flutter-and-how-does-it-help/en-US.mdx @@ -0,0 +1,15 @@ +--- +title: What is code-splitting in Flutter, and how does it help? +--- + +In Flutter, code-splitting refers to dividing your app's code into smaller, independent modules that can be loaded on demand, rather than loading the entire app at once. This technique is typically used with deferred components or dynamic libraries. + +**Benefits:** +- Reduced initial load time, only essential parts of the app are loaded upfront, improving performance. +- Optimized memory usage, non-essential features remain unloaded until needed. +- Improved user experience, faster startup and efficient navigation. + +**How it helps:** +For example, in large Flutter apps, you can defer loading less frequently used features, like onboarding screens or admin dashboards, using tools like deferred components in Android or iOS. + +In practice, it enhances scalability and performance, especially in apps with extensive functionality. diff --git a/questions/what-is-code-splitting-in-flutter-and-how-does-it-help/metadata.json b/questions/what-is-code-splitting-in-flutter-and-how-does-it-help/metadata.json new file mode 100644 index 0000000..1194374 --- /dev/null +++ b/questions/what-is-code-splitting-in-flutter-and-how-does-it-help/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-code-splitting-in-flutter-and-how-does-it-help", + "rank": 97, + "difficulty": "advanced" +} diff --git a/questions/what-is-dart-and-why-does-flutter-use-it/en-US.mdx b/questions/what-is-dart-and-why-does-flutter-use-it/en-US.mdx new file mode 100644 index 0000000..e106aaa --- /dev/null +++ b/questions/what-is-dart-and-why-does-flutter-use-it/en-US.mdx @@ -0,0 +1,8 @@ +--- +title: What is Dart and Why does Flutter use it? +--- + +Dart is a programming language designed for client development, such as for the web and mobile apps. It is developed by Google and can also be used to build server and desktop applications. It is an object-oriented, class-based, garbage-collected language with C-style syntax. + +- 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. +- Dart uses the Just In Time compilation. This drastically reduces the time of development and responds faster. diff --git a/questions/what-is-dart-and-why-does-flutter-use-it/metadata.json b/questions/what-is-dart-and-why-does-flutter-use-it/metadata.json new file mode 100644 index 0000000..f205552 --- /dev/null +++ b/questions/what-is-dart-and-why-does-flutter-use-it/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-dart-and-why-does-flutter-use-it", + "rank": 2, + "difficulty": "easy" +} diff --git a/questions/what-is-factory-constructor/en-US.mdx b/questions/what-is-factory-constructor/en-US.mdx new file mode 100644 index 0000000..86c93ee --- /dev/null +++ b/questions/what-is-factory-constructor/en-US.mdx @@ -0,0 +1,26 @@ +--- +title: What is Factory constructor? +--- + +A factory constructor in Flutter is a special type of constructor that returns an instance of a class, but it does not necessarily create a new object every time it's called. The purpose of a factory constructor is to allow classes to provide alternative ways to create objects without exposing the implementation details of the object creation process. For example, a factory constructor could return an instance from a cache, return a subtype of the class, or use a factory method to create an instance. + +In Flutter, factory constructors are declared using the `factory` keyword and have no body. Instead, they return an instance of the class, which can be an instance of the class, a subtype of the class, or a completely different type. This allows clients of the class to create objects in different ways, depending on their needs. + +For example: + +```dart +class Rectangle { + final double width; + final double height; + + Rectangle(this.width, this.height); + + factory Rectangle.square(double side) { + return Rectangle(side, side); + } +} +``` + +In this example, the factory constructor `Rectangle.square` takes a side parameter and returns a Rectangle object with equal width and height. This allows clients of the Rectangle class to create square objects without knowing how squares are implemented as rectangles. + +This helps to create a more flexible and reusable codebase, and it also makes it easier to maintain and test the code. diff --git a/questions/what-is-factory-constructor/metadata.json b/questions/what-is-factory-constructor/metadata.json new file mode 100644 index 0000000..8b8f152 --- /dev/null +++ b/questions/what-is-factory-constructor/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-factory-constructor", + "rank": 48, + "difficulty": "intermediate" +} diff --git a/questions/what-is-fat-arrow-notation-in-dart/en-US.mdx b/questions/what-is-fat-arrow-notation-in-dart/en-US.mdx new file mode 100644 index 0000000..fc2c871 --- /dev/null +++ b/questions/what-is-fat-arrow-notation-in-dart/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: What is Fat Arrow Notation in Dart? +--- + +A fat arrow (=>) is used to define a single expression in a function. This is a cleaner way to write functions with a single statement. + +Syntax: + +``` +ReturnType FunctionName(Params) => Expression; +``` + +Example: + +```dart +// Without fat arrow notation +String findSquare(int n) { + return 'The square of $n is ${n * n}.'; +} + +// With fat arrow notation +String findSquare(int n) => 'The square of $n is ${n * n}.'; +``` diff --git a/questions/what-is-fat-arrow-notation-in-dart/metadata.json b/questions/what-is-fat-arrow-notation-in-dart/metadata.json new file mode 100644 index 0000000..8bf742c --- /dev/null +++ b/questions/what-is-fat-arrow-notation-in-dart/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-fat-arrow-notation-in-dart", + "rank": 19, + "difficulty": "easy" +} diff --git a/questions/what-is-flutter-tree-shaking/en-US.mdx b/questions/what-is-flutter-tree-shaking/en-US.mdx new file mode 100644 index 0000000..e243542 --- /dev/null +++ b/questions/what-is-flutter-tree-shaking/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is Flutter Tree Shaking? +--- + +`Tree shaking` is a technique used by modern compilers to reduce the size of the output by eliminating code that is not being used. In Flutter, `tree shaking` refers to the process of removing unused widgets, libraries, and other code from the final build of an application. This helps to reduce the size of the application and improve performance by only including the code that is actually used by the application. + +Tree shaking in Flutter works by analyzing the dependencies of each widget and only including the widgets that are actually used in the final build. This means that if a widget or library is not used, it will not be included in the final build, reducing the size and improving the performance of the application. + +In summary, Flutter Tree shaking is a feature that helps to optimize the size and performance of Flutter applications by only including the code that is actually used. diff --git a/questions/what-is-flutter-tree-shaking/metadata.json b/questions/what-is-flutter-tree-shaking/metadata.json new file mode 100644 index 0000000..2ce4a64 --- /dev/null +++ b/questions/what-is-flutter-tree-shaking/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-flutter-tree-shaking", + "rank": 36, + "difficulty": "advanced" +} diff --git a/questions/what-is-flutter/en-US.mdx b/questions/what-is-flutter/en-US.mdx new file mode 100644 index 0000000..08b2bbc --- /dev/null +++ b/questions/what-is-flutter/en-US.mdx @@ -0,0 +1,5 @@ +--- +title: What is Flutter? +--- + +Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, macOS, Windows, and the web from a single codebase. Flutter was released in May 2017. Developers consider it as the fastest and most expressive way to create native apps. Flutter will have a significant impact on the development of high-quality, feature-packed mobile applications in the near future due to its simplicity, high performance as a result of its development, and rich user interface. diff --git a/questions/what-is-flutter/metadata.json b/questions/what-is-flutter/metadata.json new file mode 100644 index 0000000..2cfadf1 --- /dev/null +++ b/questions/what-is-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-flutter", + "rank": 1, + "difficulty": "easy" +} diff --git a/questions/what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui/en-US.mdx b/questions/what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui/en-US.mdx new file mode 100644 index 0000000..656158b --- /dev/null +++ b/questions/what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui/en-US.mdx @@ -0,0 +1,44 @@ +--- +title: What is `FutureBuilder` in Flutter and how is it used to build dynamic UI? +--- + +`FutureBuilder` is a widget in Flutter that allows us to build a dynamic UI based on the value of a Future. A Future is an asynchronous operation that returns a value in the future. For example, we might use a Future to retrieve data from a server, or to perform a long-running computation. + +The `FutureBuilder` widget listens to the Future and builds the UI based on its state. The UI can be different for three states: + +**Uncompleted**: When the Future is running, we can show a loading indicator or any other widget to indicate that the operation is in progress. + +**Completed with data**: When the Future completes with data, we can use the data to build the UI. For example, we might display a list of items retrieved from the server. + +**Completed with an error**: If the Future completes with an error, we can show an error message or any other widget to indicate that something went wrong. + +Here's an example of using `FutureBuilder` to retrieve data from a server and display a list of items: + +```dart +Future> _fetchData() async { + // Simulate fetching data from a server + return Future.delayed(Duration(seconds: 2), () => ["Item 1", "Item 2", "Item 3"]); +} + +@override +Widget build(BuildContext context) { + return FutureBuilder>( + future: _fetchData(), + builder: (context, snapshot) { + if (snapshot.hasData) { + return ListView.builder( + itemCount: snapshot.data.length, + itemBuilder: (context, index) { + return Text(snapshot.data[index]); + }, + ); + } else if (snapshot.hasError) { + return Text("Error: ${snapshot.error}"); + } + return CircularProgressIndicator(); + }, + ); +} +``` + +In this example, the `_fetchData` function returns a Future that retrieves data from a server. The `FutureBuilder` widget listens to the Future and uses the `builder` callback to build the UI based on its state. If the Future is running, the `CircularProgressIndicator` is displayed. If the Future completes with data, the data is displayed in a list. If the Future completes with an error, an error message is displayed. diff --git a/questions/what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui/metadata.json b/questions/what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui/metadata.json new file mode 100644 index 0000000..a90b820 --- /dev/null +++ b/questions/what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-futurebuilder-in-flutter-and-how-is-it-used-to-build-dynamic-ui", + "rank": 43, + "difficulty": "intermediate" +} diff --git a/questions/what-is-hot-reload-and-hot-restart-in-flutter/en-US.mdx b/questions/what-is-hot-reload-and-hot-restart-in-flutter/en-US.mdx new file mode 100644 index 0000000..92d8b80 --- /dev/null +++ b/questions/what-is-hot-reload-and-hot-restart-in-flutter/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is `Hot Reload` and `Hot Restart` in Flutter? +--- + +Flutter's `Hot Reload` feature injects the updated source code files into the running **Dart Virtual Machine (VM)**, and rebuilds the widget tree preserving the app state to quickly view the effects of the changes. + +Whereas `Hot Restart` loads the updated source code files into the VM and restarts the Flutter app, losing all the previous app states. diff --git a/questions/what-is-hot-reload-and-hot-restart-in-flutter/metadata.json b/questions/what-is-hot-reload-and-hot-restart-in-flutter/metadata.json new file mode 100644 index 0000000..25404e5 --- /dev/null +++ b/questions/what-is-hot-reload-and-hot-restart-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-hot-reload-and-hot-restart-in-flutter", + "rank": 7, + "difficulty": "easy" +} diff --git a/questions/what-is-inheritedwidget-in-flutter/en-US.mdx b/questions/what-is-inheritedwidget-in-flutter/en-US.mdx new file mode 100644 index 0000000..e62504b --- /dev/null +++ b/questions/what-is-inheritedwidget-in-flutter/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is `InheritedWidget` in Flutter? +--- + +`InheritedWidget` is a class in the Flutter framework that is used to pass data down the widget tree. It provides a convenient way to share data between widgets without having to pass the data explicitly through each individual widget in the tree. + +An `InheritedWidget` is a widget that, when it is inserted into the widget tree, can be accessed by descendant widgets using the `context.inheritFromWidgetOfExactType` method. This allows data to be passed down the tree to widgets that are nested several levels deep, without having to pass the data through every single widget in between. + +`InheritedWidget` is often used to provide data to descendant widgets that is frequently required, such as the theme or the current locale. By wrapping your application in an `InheritedWidget`, you can make this data available to all of your widgets, and avoid having to pass it down through multiple levels of the widget tree. diff --git a/questions/what-is-inheritedwidget-in-flutter/metadata.json b/questions/what-is-inheritedwidget-in-flutter/metadata.json new file mode 100644 index 0000000..834978e --- /dev/null +++ b/questions/what-is-inheritedwidget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-inheritedwidget-in-flutter", + "rank": 35, + "difficulty": "advanced" +} diff --git a/questions/what-is-isolate-in-flutter/en-US.mdx b/questions/what-is-isolate-in-flutter/en-US.mdx new file mode 100644 index 0000000..d3b6c28 --- /dev/null +++ b/questions/what-is-isolate-in-flutter/en-US.mdx @@ -0,0 +1,24 @@ +--- +title: What is isolate in Flutter? +--- + +An `Isolate` in Flutter is a separate thread of execution that runs concurrently with the main isolate (thread) of a Flutter application. An isolate has its own memory heap, so it can run code and access data independently of the main isolate. This allows you to run CPU-intensive or blocking operations on a background isolate, so that they don't block the main UI thread. + +An isolate can be created using the `Isolate.spawn` method. This method takes a callback function that runs in the new isolate. The callback function receives a `SendPort` as an argument, which can be used to send messages to and receive messages from the main isolate. + +Here's an example of how to create an isolate in Flutter: + +```dart +import 'dart:isolate'; + +void backgroundTask(SendPort sendPort) { + // Code that runs in the background isolate +} + +void main() { + final receivePort = ReceivePort(); + Isolate.spawn(backgroundTask, receivePort.sendPort); +} +``` + +In this example, the `backgroundTask` function runs in the background isolate. The main function creates the isolate and passes a `SendPort` to the `backgroundTask` function, which can be used to communicate with the main isolate. diff --git a/questions/what-is-isolate-in-flutter/metadata.json b/questions/what-is-isolate-in-flutter/metadata.json new file mode 100644 index 0000000..998f65a --- /dev/null +++ b/questions/what-is-isolate-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-isolate-in-flutter", + "rank": 45, + "difficulty": "advanced" +} diff --git a/questions/what-is-pubspecyaml-file-and-what-does-it-do/en-US.mdx b/questions/what-is-pubspecyaml-file-and-what-does-it-do/en-US.mdx new file mode 100644 index 0000000..42f141f --- /dev/null +++ b/questions/what-is-pubspecyaml-file-and-what-does-it-do/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is `pubspec.yaml` file and what does it do? +--- + +Every Flutter project includes a `pubspec.yaml` file, which is generated while creating a new Flutter project. It’s located at the top of the project tree and contains metadata about the project that the Dart and Flutter tooling needs to know. + +The pubspec file specifies dependencies that the project requires, such as particular packages (and their versions), fonts, or image files. It also specifies other requirements, such as dependencies on developer packages (like testing or mocking packages), or particular constraints on the version of the Flutter SDK. diff --git a/questions/what-is-pubspecyaml-file-and-what-does-it-do/metadata.json b/questions/what-is-pubspecyaml-file-and-what-does-it-do/metadata.json new file mode 100644 index 0000000..40d0a88 --- /dev/null +++ b/questions/what-is-pubspecyaml-file-and-what-does-it-do/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-pubspecyaml-file-and-what-does-it-do", + "rank": 3, + "difficulty": "easy" +} diff --git a/questions/what-is-resizetoavoidbottominset-when-should-we-use-it/en-US.mdx b/questions/what-is-resizetoavoidbottominset-when-should-we-use-it/en-US.mdx new file mode 100644 index 0000000..8c0aa84 --- /dev/null +++ b/questions/what-is-resizetoavoidbottominset-when-should-we-use-it/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is `resizeToAvoidBottomInset`? When should we use it? +--- + +The `resizeToAvoidBottomInset` is a property in the `Scaffold` widget. It is a boolean property that determines whether the body of the `Scaffold` should be resized to avoid the on-screen keyboard when it is displayed. + +It should be used when the body of the `Scaffold` contains a form or text input fields, and it is desirable to avoid having the input fields covered by the on-screen keyboard when the user is entering text. diff --git a/questions/what-is-resizetoavoidbottominset-when-should-we-use-it/metadata.json b/questions/what-is-resizetoavoidbottominset-when-should-we-use-it/metadata.json new file mode 100644 index 0000000..ba24519 --- /dev/null +++ b/questions/what-is-resizetoavoidbottominset-when-should-we-use-it/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-resizetoavoidbottominset-when-should-we-use-it", + "rank": 32, + "difficulty": "intermediate" +} diff --git a/questions/what-is-sound-null-safety/en-US.mdx b/questions/what-is-sound-null-safety/en-US.mdx new file mode 100644 index 0000000..6a9cc6c --- /dev/null +++ b/questions/what-is-sound-null-safety/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is sound null safety? +--- + +**Sound null safety** makes types in code non-nullable by default and enables special static checks and compiler optimizations to guarantee that null-dereference errors won't appear at runtime because they will be spotted at compile-time and fixed. + +**Null safety** is a guarantee within an object-oriented programming language that no object references will have null or void values. diff --git a/questions/what-is-sound-null-safety/metadata.json b/questions/what-is-sound-null-safety/metadata.json new file mode 100644 index 0000000..5099ba0 --- /dev/null +++ b/questions/what-is-sound-null-safety/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-sound-null-safety", + "rank": 24, + "difficulty": "intermediate" +} diff --git a/questions/what-is-state-management-in-flutter/en-US.mdx b/questions/what-is-state-management-in-flutter/en-US.mdx new file mode 100644 index 0000000..5611b50 --- /dev/null +++ b/questions/what-is-state-management-in-flutter/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: What is State Management in Flutter? +--- + +State management in Flutter refers to the management of the state of widgets and their properties in a Flutter app. State management is an essential concept in Flutter because it allows developers to create dynamic and interactive user interfaces that respond to user input and changes in data. + +In Flutter, widgets can be either stateful or stateless. Stateless widgets are widgets that do not change over time, whereas stateful widgets are widgets that can change their properties and appearance over time. + +State management in Flutter involves managing the state of stateful widgets, which can be done using various techniques and design patterns, such as: + +- **StatefulWidget and State**: This is the most basic and straightforward way to manage the state of a widget in Flutter. In this approach, a widget is split into two classes: `StatefulWidget` and `State`. The `StatefulWidget` is responsible for creating the `State` object, and the `State` object is responsible for managing the state of the widget. + +- **InheritedWidget and InheritedModel**: These are two classes that allow the sharing of data between widgets in a Flutter app. `InheritedWidget` and `InheritedModel` can be used to manage the state of a widget by passing data down the widget tree. + +- **Provider**: This is a third-party library that simplifies state management in Flutter. `Provider` uses `InheritedWidget` under the hood and provides a simple and easy-to-use API for managing the state of a widget. + +- **BLoC (Business Logic Component) pattern**: This is a design pattern that separates the business logic and presentation layers of an app. BLoC can be used for state management by creating a stream of events that represent changes to the state of the widget. diff --git a/questions/what-is-state-management-in-flutter/metadata.json b/questions/what-is-state-management-in-flutter/metadata.json new file mode 100644 index 0000000..2e97224 --- /dev/null +++ b/questions/what-is-state-management-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-state-management-in-flutter", + "rank": 78, + "difficulty": "intermediate" +} diff --git a/questions/what-is-texteditingcontroller/en-US.mdx b/questions/what-is-texteditingcontroller/en-US.mdx new file mode 100644 index 0000000..176c34c --- /dev/null +++ b/questions/what-is-texteditingcontroller/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is `TextEditingController`? +--- + +The `TextEditingController` is a class in the Flutter framework that provides control over the text in a text field. It allows you to read and modify the text, set the selection, and listen to changes to the text. + +It is typically used in conjunction with a `TextField` widget to create an editable text input field in a Flutter application. The `TextEditingController` is assigned to the `controller` property of the `TextField`, and it can be used to retrieve the entered text, set the initial text, or respond to changes in the text. diff --git a/questions/what-is-texteditingcontroller/metadata.json b/questions/what-is-texteditingcontroller/metadata.json new file mode 100644 index 0000000..5f61181 --- /dev/null +++ b/questions/what-is-texteditingcontroller/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-texteditingcontroller", + "rank": 33, + "difficulty": "easy" +} diff --git a/questions/what-is-the-difference-between-container-and-sizedbox-widget/en-US.mdx b/questions/what-is-the-difference-between-container-and-sizedbox-widget/en-US.mdx new file mode 100644 index 0000000..2d7393f --- /dev/null +++ b/questions/what-is-the-difference-between-container-and-sizedbox-widget/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is the difference between `Container` and `SizedBox` widget? +--- + +**SizedBox** is a widget for giving some constant height or width between two widgets. It does not contain any decorative properties just like color, shape, borderRadius etc. + +On the other hand **Container** is a widget that any person can modify according to their needs. + +When used for whitespace, there is a linter warning to prefer SizedBox instead of Container. Because a Container is a heavier widget than a SizedBox, and as bonus, SizedBox has a const constructor, so it won't even create a new instance during runtime. diff --git a/questions/what-is-the-difference-between-container-and-sizedbox-widget/metadata.json b/questions/what-is-the-difference-between-container-and-sizedbox-widget/metadata.json new file mode 100644 index 0000000..73bf86f --- /dev/null +++ b/questions/what-is-the-difference-between-container-and-sizedbox-widget/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-container-and-sizedbox-widget", + "rank": 27, + "difficulty": "easy" +} diff --git a/questions/what-is-the-difference-between-cupertino-and-material-design-in-flutter/en-US.mdx b/questions/what-is-the-difference-between-cupertino-and-material-design-in-flutter/en-US.mdx new file mode 100644 index 0000000..a0f2f4c --- /dev/null +++ b/questions/what-is-the-difference-between-cupertino-and-material-design-in-flutter/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: What is the difference between Cupertino and Material Design in Flutter? +--- + +Cupertino and Material Design are two design languages used in Flutter for building iOS and Android apps, respectively. While both design languages follow different design principles and have unique features, they share some similarities as well. + +Here are some of the main differences between Cupertino and Material Design in Flutter: + +1. **Visual Design**: Cupertino design is characterized by its use of translucency, minimalism, and flat design, whereas Material Design uses bold typography, bright colors, and depth effects to create a layered look. + +2. **Navigation and Layout**: Cupertino design uses a bottom navigation bar for app navigation and has a more top-down layout approach, while Material Design uses a drawer for navigation and has a left-to-right layout approach. + +3. **Widgets**: Cupertino and Material Design have different sets of widgets that reflect their design language. For example, Cupertino widgets have a more minimalist look, with more whitespace and fewer borders, whereas Material Design widgets are more vibrant, with bright colors and more pronounced borders. + +4. **Iconography**: The icons used in Cupertino and Material Design are also different. Cupertino icons have a more minimalist design, with fewer details and a more stylized look, whereas Material Design icons are more detailed and three-dimensional. + +Despite these differences, both design languages share some commonalities in the way they implement responsive design and use animations to enhance the user experience. Flutter allows developers to easily switch between Cupertino and Material Design widgets and design principles, making it possible to create apps that have a consistent look and feel across both iOS and Android platforms. diff --git a/questions/what-is-the-difference-between-cupertino-and-material-design-in-flutter/metadata.json b/questions/what-is-the-difference-between-cupertino-and-material-design-in-flutter/metadata.json new file mode 100644 index 0000000..218836e --- /dev/null +++ b/questions/what-is-the-difference-between-cupertino-and-material-design-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-cupertino-and-material-design-in-flutter", + "rank": 79, + "difficulty": "easy" +} diff --git a/questions/what-is-the-difference-between-expanded-and-flexible-widget/en-US.mdx b/questions/what-is-the-difference-between-expanded-and-flexible-widget/en-US.mdx new file mode 100644 index 0000000..95ddad0 --- /dev/null +++ b/questions/what-is-the-difference-between-expanded-and-flexible-widget/en-US.mdx @@ -0,0 +1,25 @@ +--- +title: What is the difference between `Expanded` and `Flexible` widget? +--- + +The only difference between these two widgets is the `Flexible` widget takes only the space needed by the child, whereas the `Expanded` widget enforces its child to take all the available space. + +The `Expanded` widget in flutter is shorthand of `Flexible` with the fit set to **FlexFit. tight**. + +```dart +Column(children: [ + Row( + children: [_ExpandedWidget(), _FlexibleWidget()], + ), + Row( + children: [_ExpandedWidget(), _ExpandedWidget()], + ), + Row( + children: [_FlexibleWidget(), _FlexibleWidget()], + ), +]), +``` + +

+ Expanded vs Flexible +

diff --git a/questions/what-is-the-difference-between-expanded-and-flexible-widget/metadata.json b/questions/what-is-the-difference-between-expanded-and-flexible-widget/metadata.json new file mode 100644 index 0000000..2dd3a69 --- /dev/null +++ b/questions/what-is-the-difference-between-expanded-and-flexible-widget/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-expanded-and-flexible-widget", + "rank": 18, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-difference-between-main-and-runapp-functions-in-flutter/en-US.mdx b/questions/what-is-the-difference-between-main-and-runapp-functions-in-flutter/en-US.mdx new file mode 100644 index 0000000..9209d8a --- /dev/null +++ b/questions/what-is-the-difference-between-main-and-runapp-functions-in-flutter/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is the difference between `main()` and `runApp()` functions in Flutter? +--- + +The `main()` function tells Dart where the program starts, and it must be in the file that is considered the "entry point" for the program. By convention, this will be in a file called `main.dart`. This main function can execute any code within it's code block. + +The `runApp()` function should return widget that would be attached to the screen as a root of the widget tree that will be rendered. diff --git a/questions/what-is-the-difference-between-main-and-runapp-functions-in-flutter/metadata.json b/questions/what-is-the-difference-between-main-and-runapp-functions-in-flutter/metadata.json new file mode 100644 index 0000000..8ff8c7e --- /dev/null +++ b/questions/what-is-the-difference-between-main-and-runapp-functions-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-main-and-runapp-functions-in-flutter", + "rank": 4, + "difficulty": "easy" +} diff --git a/questions/what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter/en-US.mdx b/questions/what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter/en-US.mdx new file mode 100644 index 0000000..9ed72e8 --- /dev/null +++ b/questions/what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is the difference between `NetworkImage` and `Image.network` in flutter? +--- + +`NetworkImage` class creates an object that provides an image from the src URL passed to it. It is not a widget and does not output an image to the screen. + +`Image.network` creates a widget that displays an image on the screen. It is just a named constructor on the **Image** class. It sets the image property using the **NetworkImage** . This image property is then used to display the image. diff --git a/questions/what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter/metadata.json b/questions/what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter/metadata.json new file mode 100644 index 0000000..2716e97 --- /dev/null +++ b/questions/what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-networkimage-and-imagenetwork-in-flutter", + "rank": 30, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-difference-between-padding-and-margin-in-flutter/en-US.mdx b/questions/what-is-the-difference-between-padding-and-margin-in-flutter/en-US.mdx new file mode 100644 index 0000000..d2cceda --- /dev/null +++ b/questions/what-is-the-difference-between-padding-and-margin-in-flutter/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: What is the difference between padding and margin in Flutter? +--- + +In Flutter, `padding` and `margin` are two properties used to adjust the spacing between widgets in the layout. + +- Padding is the amount of space added within a widget, between its content and its border. It affects the layout of the widget and increases the size of the widget. Padding is set using the `padding` property of a widget and can be applied to any widget. + +- Margin is the amount of space added outside a widget, between the widget and its parent container. It does not affect the layout of the widget but rather positions the widget within its parent. Margin is set using the `margin` property of a widget and can only be applied to widgets that are inside a container. + +In summary, `padding` is used to adjust the space inside a widget while `margin` is used to adjust the space outside a widget. Both `padding` and `margin` are important properties for achieving the desired layout and spacing between widgets in a Flutter application. diff --git a/questions/what-is-the-difference-between-padding-and-margin-in-flutter/metadata.json b/questions/what-is-the-difference-between-padding-and-margin-in-flutter/metadata.json new file mode 100644 index 0000000..17b9508 --- /dev/null +++ b/questions/what-is-the-difference-between-padding-and-margin-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-padding-and-margin-in-flutter", + "rank": 57, + "difficulty": "easy" +} diff --git a/questions/what-is-the-difference-between-provider-vs-inheritedwidget/en-US.mdx b/questions/what-is-the-difference-between-provider-vs-inheritedwidget/en-US.mdx new file mode 100644 index 0000000..08e5662 --- /dev/null +++ b/questions/what-is-the-difference-between-provider-vs-inheritedwidget/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: What is the difference between Provider vs. InheritedWidget? +--- + +Provider and InheritedWidget are both ways to share data between widgets in Flutter, but they differ in their implementation and approach. + +InheritedWidget is a built-in widget in Flutter that allows the sharing of data between widgets in a tree structure. It works by creating a tree of widgets, where each widget can access data from its ancestor widget. This makes it easy to share data between widgets without the need for callback functions or prop drilling. InheritedWidget can be used for simple to moderately complex cases, but can become cumbersome to use for more complex use cases. + +Provider is a third-party package that provides an easy and efficient way to manage state in Flutter. It is built on top of InheritedWidget and offers a more declarative approach to managing state. Provider allows widgets to access data by declaring what data they need and then automatically rebuilding when the data changes. Provider is highly scalable and can be used for both simple and complex use cases. + +In summary, while both Provider and InheritedWidget can be used to share data between widgets, Provider offers a more declarative and scalable approach to managing state, while InheritedWidget is a built-in widget in Flutter that can be used for simple to moderately complex use cases. diff --git a/questions/what-is-the-difference-between-provider-vs-inheritedwidget/metadata.json b/questions/what-is-the-difference-between-provider-vs-inheritedwidget/metadata.json new file mode 100644 index 0000000..511d552 --- /dev/null +++ b/questions/what-is-the-difference-between-provider-vs-inheritedwidget/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-provider-vs-inheritedwidget", + "rank": 53, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter/en-US.mdx b/questions/what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter/en-US.mdx new file mode 100644 index 0000000..5c46724 --- /dev/null +++ b/questions/what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter/en-US.mdx @@ -0,0 +1,7 @@ +--- +title: What is the difference between `WidgetsApp` and `MaterialApp` in Flutter? +--- + +`WidgetsApp` is a convenient widget that wraps a number of widgets that are commonly required for an application. It also provides basic navigation. + +`MaterialApp` builds an application that uses the mterial design. It is built upon the `WidgetsApp` and contains some material-design specific functionality, such as **AnimatedTheme**. We certainly don't require `MaterialApp` every time when building a Flutter project. `CupertinoApp` gives iOS like look and feel, or we can even define our custom sets of widgets. diff --git a/questions/what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter/metadata.json b/questions/what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter/metadata.json new file mode 100644 index 0000000..ff4ce34 --- /dev/null +++ b/questions/what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-difference-between-widgetsapp-and-materialapp-in-flutter", + "rank": 14, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-event-loop/en-US.mdx b/questions/what-is-the-event-loop/en-US.mdx new file mode 100644 index 0000000..cc82f0e --- /dev/null +++ b/questions/what-is-the-event-loop/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is the event loop? +--- + +In Flutter, the event loop is a mechanism used to manage the flow of events and callbacks in an application. The event loop runs on a single thread and is responsible for processing events, such as user input or network I/O, and executing any associated callbacks. + +The event loop works by maintaining a queue of events and callbacks that need to be processed. When an event occurs, such as a user tapping a button, the event is added to the end of the event queue. The event loop then dequeues events from the front of the queue and executes any associated callbacks, such as updating the user interface or performing a network request. + +The event loop is a crucial part of the Flutter framework, as it allows developers to create responsive and interactive applications that can handle user input and respond to changes in real-time. By using the event loop effectively, developers can ensure that their applications remain fast and responsive, even when performing complex tasks or running on slower devices. diff --git a/questions/what-is-the-event-loop/metadata.json b/questions/what-is-the-event-loop/metadata.json new file mode 100644 index 0000000..a53559a --- /dev/null +++ b/questions/what-is-the-event-loop/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-event-loop", + "rank": 52, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-extension-method-in-dart/en-US.mdx b/questions/what-is-the-extension-method-in-dart/en-US.mdx new file mode 100644 index 0000000..3a09f77 --- /dev/null +++ b/questions/what-is-the-extension-method-in-dart/en-US.mdx @@ -0,0 +1,46 @@ +--- +title: What is the extension method in Dart? +--- + +Extension method allows us to add new functionality on top of existing libraries.For example, you can add extra functionality to the Dart core String library, that are only available in your app. + +Syntax to create an extension method: + +``` +extension on { + // ()* +} +``` + +Example of an Dart extension method: + +```dart +// an extension method +extension StringExtension on String { + String capitilizeWord() { + return this.split(' ').map((word) => word[0].toUpperCase() + word.substring(1)).join(' '); + } +} + +// example of using the above extension +String myString = 'welcome to the flutter world!!!'; +print(myString.capitilizeWord()); // Welcome To The Flutter World!!! +``` + +Here is how we can unleash the power of extension methods in Flutter: + +```dart +// an extension on widget +extension WidgetExtension on Widget { + Widget addPadding([double padding = 8.0]) { + return Padding( + padding: EdgeInsets.all(padding), + child: this, + ); + } +} + +// example of using the above extension +Text('Text widget with the default padding of 8.0').addPadding(); +Text('Text widget with padding of 16.0').addPadding(16.0); +``` diff --git a/questions/what-is-the-extension-method-in-dart/metadata.json b/questions/what-is-the-extension-method-in-dart/metadata.json new file mode 100644 index 0000000..fe3c818 --- /dev/null +++ b/questions/what-is-the-extension-method-in-dart/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-extension-method-in-dart", + "rank": 22, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-flutter-rendering-pipeline-and-how-does-it-work/en-US.mdx b/questions/what-is-the-flutter-rendering-pipeline-and-how-does-it-work/en-US.mdx new file mode 100644 index 0000000..a77bf99 --- /dev/null +++ b/questions/what-is-the-flutter-rendering-pipeline-and-how-does-it-work/en-US.mdx @@ -0,0 +1,14 @@ +--- +title: What is the Flutter rendering pipeline and how does it work? +--- + +The Flutter rendering pipeline is the process through which Flutter converts UI code into pixels on the screen. It has the following stages: + +1. **UI Widgets:** The Flutter app starts with the widget tree, where you define the structure of your UI. This tree is immutable. +2. **Element Tree:** The widget tree is transformed into the element tree, which is mutable and holds the state and structure of the app. +3. **Render Tree:** The element tree builds a render tree, which describes the layout and paint information of each widget. +4. **Layout Phase:** In this phase, the size and position of each widget in the render tree are calculated. Parent widgets pass constraints to child widgets to determine their dimensions. +5. **Painting Phase:** Once layout calculations are complete, the render tree generates painting commands for each widget. +6. **Compositing:** Flutter combines painting layers into a single visual representation. This step optimizes rendering by batching layers. +7. **Rasterization:** The Skia engine takes the composited layers and converts them into actual pixels to display on the screen. +8. **GPU Rendering:** Finally, the GPU renders the rasterized content onto the device screen. diff --git a/questions/what-is-the-flutter-rendering-pipeline-and-how-does-it-work/metadata.json b/questions/what-is-the-flutter-rendering-pipeline-and-how-does-it-work/metadata.json new file mode 100644 index 0000000..2f2da37 --- /dev/null +++ b/questions/what-is-the-flutter-rendering-pipeline-and-how-does-it-work/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-flutter-rendering-pipeline-and-how-does-it-work", + "rank": 93, + "difficulty": "advanced" +} diff --git a/questions/what-is-the-purpose-of-safearea-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-safearea-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..484bb4d --- /dev/null +++ b/questions/what-is-the-purpose-of-safearea-widget-in-flutter/en-US.mdx @@ -0,0 +1,5 @@ +--- +title: What is the purpose of `SafeArea` widget in Flutter? +--- + +The `SafeArea` widget insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen. It will also indent the child by the amount necessary to avoid the Notch, or similar creative physical features of the display. diff --git a/questions/what-is-the-purpose-of-safearea-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-safearea-widget-in-flutter/metadata.json new file mode 100644 index 0000000..85a9a34 --- /dev/null +++ b/questions/what-is-the-purpose-of-safearea-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-safearea-widget-in-flutter", + "rank": 20, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..c161c01 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter/en-US.mdx @@ -0,0 +1,46 @@ +--- +title: What is the purpose of the `AnimatedBuilder` widget in Flutter? +--- + +The `AnimatedBuilder` widget in Flutter is used to create complex animations by separating the animation logic from the widget tree. It provides a builder function that returns a widget tree, and an animation object that can be used to animate the properties of the widgets in the tree. + +Here's a simple code example that demonstrates how to use `AnimatedBuilder`: + +```dart +class MyWidget extends StatefulWidget {... + +class _MyWidgetState extends State with SingleTickerProviderStateMixin { + late AnimationController _controller; + late Animation _animation; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: const Duration(seconds: 1), + vsync: this, + ); + _animation = Tween(begin: 0, end: 1).animate(_controller); + _controller.repeat(reverse: true); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return AnimatedBuilder( + animation: _animation, + builder: (context, child) { + return Opacity( + opacity: _animation.value, + child: Container( ... ), + ); + }, + ); + } +} +``` diff --git a/questions/what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter/metadata.json new file mode 100644 index 0000000..08a8764 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-animatedbuilder-widget-in-flutter", + "rank": 74, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..5181dff --- /dev/null +++ b/questions/what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: What is the purpose of the `AnimatedSwitcher` widget in Flutter? +--- + +The `AnimatedSwitcher` widget in Flutter is used to create animated transitions between two or more widgets. The purpose of the `AnimatedSwitcher` widget is to provide an easy-to-use way to animate changes in the widget tree. When you use the `AnimatedSwitcher`, you can specify a new child widget to be displayed, and the `AnimatedSwitcher` will animate the transition between the old and new widgets using a customizable animation. + +The `AnimatedSwitcher` widget has several properties that can be used to customize the animation, including the duration of the animation, the type of animation, and whether or not to fade the widgets in and out. + +Some common use cases for the `AnimatedSwitcher` widget include: + +- Swapping out one widget for another in response to user input +- Animating changes to a list of items, such as adding or removing items +- Creating smooth transitions between screens or pages in a multi-page app diff --git a/questions/what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter/metadata.json new file mode 100644 index 0000000..3a73b91 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-animatedswitcher-widget-in-flutter", + "rank": 76, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget/en-US.mdx b/questions/what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget/en-US.mdx new file mode 100644 index 0000000..6ad81c5 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget/en-US.mdx @@ -0,0 +1,47 @@ +--- +title: What is the purpose of the `didUpdateWidget` method in a StatefulWidget? +--- + +In Flutter, `StatefulWidget` is a widget that has mutable state that can change over time. When the state of a `StatefulWidget` changes, the framework rebuilds the widget tree to reflect the new state. + +The `didUpdateWidget` method is a lifecycle method that is called when the framework rebuilds a `StatefulWidget`. Specifically, it is called when a new instance of the widget is created and inserted into the widget tree, and when the widget's configuration (i.e., the values of its properties) changes. + +The purpose of the `didUpdateWidget` method is to allow the widget to respond to changes in its configuration. In particular, it provides an opportunity for the widget to update its state in response to changes in its properties. This can be useful, for example, if the widget needs to re-fetch data from a network service or rebuild its child widgets in response to a change in its configuration. + +```dart +class MyWidget extends StatefulWidget { + final String data; + + MyWidget({required this.data}); + + @override + _MyWidgetState createState() => _MyWidgetState(); +} + +class _MyWidgetState extends State { + String _data = ''; + + @override + void initState() { + super.initState(); + _data = widget.data; + } + + @override + void didUpdateWidget(covariant MyWidget oldWidget) { + super.didUpdateWidget(oldWidget); + if (widget.data != oldWidget.data) { + setState(() { + _data = widget.data; + }); + } + } + + @override + Widget build(BuildContext context) { + return Text(_data); + } +} +``` + +In this example, we define a `StatefulWidget` called `MyWidget` that takes a data parameter in its constructor. We use the `didUpdateWidget` method to update the widget's state (i.e., the `_data` variable) when the data parameter changes. When the widget is built, it displays the current value of `_data` using a `Text` widget. diff --git a/questions/what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget/metadata.json b/questions/what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget/metadata.json new file mode 100644 index 0000000..0806219 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-didupdatewidget-method-in-a-statefulwidget", + "rank": 72, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget/en-US.mdx b/questions/what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget/en-US.mdx new file mode 100644 index 0000000..6609510 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget/en-US.mdx @@ -0,0 +1,11 @@ +--- +title: What is the purpose of the `dispose()` method in a StatefulWidget? +--- + +The `dispose()` method is a lifecycle method in the `State` class of a `StatefulWidget` in the Flutter framework. It is called when the stateful widget is removed from the widget tree, giving us the opportunity to perform any cleanup tasks or release any resources that the widget may have used. + +In the `dispose()` method, we can perform tasks such as closing streams, cancelling network requests, or disposing of any controllers or listeners that the widget may have used. By doing so, we can prevent memory leaks and ensure that the widget doesn't continue to consume system resources after it is no longer needed. + +It is important to note that the `dispose()` method is not called during a hot reload or a rebuild, as the widget is not removed from the widget tree in these cases. However, it will be called when the widget is removed from the widget tree due to a state change or when the parent widget is removed. + +Overall, the `dispose()` method provides a way to clean up any resources that the widget may have used, ensuring that the application runs smoothly and efficiently. diff --git a/questions/what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget/metadata.json b/questions/what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget/metadata.json new file mode 100644 index 0000000..fb39976 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-dispose-method-in-a-statefulwidget", + "rank": 55, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-expanded-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-expanded-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..00cde6b --- /dev/null +++ b/questions/what-is-the-purpose-of-the-expanded-widget-in-flutter/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is the purpose of the Expanded widget in Flutter? +--- + +In Flutter, the `Expanded` widget is used to adjust the available space for a child widget of a `Row`, `Column`, or `Flex` widget, by dividing the remaining free space among the children. + +When an `Expanded` widget is used, the child widget of the Row, Column, or Flex takes up as much available space as possible in the direction of the `mainAxisSize` property of the parent widget. This means that if the parent widget is a Row, the Expanded widget expands the child widget horizontally, and if the parent is a Column, the Expanded widget expands the child widget vertically. + +If there is more than one Expanded widget in the same Row, Column, or Flex, the available space is divided among the children based on their `flex` property, which determines the proportion of the remaining free space that each child should occupy. diff --git a/questions/what-is-the-purpose-of-the-expanded-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-expanded-widget-in-flutter/metadata.json new file mode 100644 index 0000000..4344b61 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-expanded-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-expanded-widget-in-flutter", + "rank": 59, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-fittedbox-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-fittedbox-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..b1a4b63 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-fittedbox-widget-in-flutter/en-US.mdx @@ -0,0 +1,13 @@ +--- +title: What is the purpose of the `FittedBox` widget in Flutter? +--- + +The `FittedBox` widget in Flutter is used to automatically scale and position its child within its own bounds. The purpose of the `FittedBox` widget is to provide an easy-to-use way to adjust the size and position of a child widget to fit within its parent widget. When using the `FittedBox`, we can specify a child widget that is larger or smaller than its parent, and the `FittedBox` will automatically scale and position the child widget to fit within the parent widget's bounds. + +The `FittedBox` widget has several properties that can be used to customize the scaling behavior, including the fit property which determines how the child widget should be scaled, and the alignment property which determines where the child widget should be positioned within the parent widget. + +Some common use cases for the `FittedBox` widget include: + +- Scaling and centering an image within a container widget +- Scaling and positioning text within a layout to fit within available space +- Scaling and positioning UI elements to fit within different screen sizes. diff --git a/questions/what-is-the-purpose-of-the-fittedbox-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-fittedbox-widget-in-flutter/metadata.json new file mode 100644 index 0000000..f26f04d --- /dev/null +++ b/questions/what-is-the-purpose-of-the-fittedbox-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-fittedbox-widget-in-flutter", + "rank": 77, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget/en-US.mdx b/questions/what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget/en-US.mdx new file mode 100644 index 0000000..9948cd7 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is the purpose of the `initState()` method in a StatefulWidget? +--- + +The `initState()` method is a lifecycle method in the `StatefulWidget` class of the Flutter framework. It is called once when the stateful widget is first inserted into the widget tree and it is used to initialize the state of the widget. + +In the `initState()` method, we can perform one-time initialization tasks, such as setting default values for your widget's state or initializing any controllers that the widget might use. It is important to note that the `initState()` method is only called once during the lifetime of a `StatefulWidget`. After the `initState()` method is called, subsequent updates to the widget's state will not cause the `initState()` method to be called again. + +Overall, the `initState()` method provides a way to set up the initial state of the widget and perform any necessary initialization tasks. diff --git a/questions/what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget/metadata.json b/questions/what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget/metadata.json new file mode 100644 index 0000000..964ff88 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-initstate-method-in-a-statefulwidget", + "rank": 54, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..cf0047a --- /dev/null +++ b/questions/what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter/en-US.mdx @@ -0,0 +1,25 @@ +--- +title: What is the purpose of the `LayoutBuilder` widget in Flutter? +--- + +The `LayoutBuilder` widget in Flutter is used to get the constraints of the parent widget and build child widgets based on these constraints. + +The purpose of `LayoutBuilder` is to enable creating responsive UIs that adapt to the size of their parent widget. The `LayoutBuilder` widget provides a callback that takes in the `BoxConstraints` of the parent widget, which represent the minimum and maximum width and height of the widget. + +These constraints can be used to build child widgets that fit within the available space. For example, the `MediaQuery.of(context).size` property can be used to to get the screen size, and then using the `LayoutBuilder` widget to create a child widget that adjusts its size based on the screen size. + +Here's an example of using LayoutBuilder to create a widget that adjusts its size based on the available space: + +```dart +LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return Container( + width: constraints.maxWidth * 0.5, + height: constraints.maxHeight * 0.5, + child: Text('This widget will take up 50% of the available space'), + ); + }, +); +``` + +In this example, the `Container` widget will take up 50% of the available width and height, based on the `BoxConstraints` provided by the `LayoutBuilder`. This allows the widget to adjust its size based on the available space, making it more responsive. diff --git a/questions/what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter/metadata.json new file mode 100644 index 0000000..15f8501 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-layoutbuilder-widget-in-flutter", + "rank": 61, + "difficulty": "intermediate" +} diff --git a/questions/what-is-the-purpose-of-the-material-design-icons-package-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-material-design-icons-package-in-flutter/en-US.mdx new file mode 100644 index 0000000..a1a72a3 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-material-design-icons-package-in-flutter/en-US.mdx @@ -0,0 +1,30 @@ +--- +title: What is the purpose of the Material Design Icons package in Flutter? +--- + +The Material Design Icons package in Flutter provides a set of icons that follow the Material Design guidelines for iconography. These icons are designed to be simple, easy to recognize, and scalable, making them ideal for use in mobile apps and web applications. + +The Material Design Icons package contains over 4,000 icons that cover a wide range of categories, including action icons, alert icons, communication icons, content icons, device icons, editor icons, file icons, hardware icons, image icons, maps icons, navigation icons, notification icons, places icons, social icons, toggle icons, and more. + +To use Material Design Icons, first we need to add the package as a dependency to your Flutter project. Then, we can use any of the icons in the app by importing the `MaterialIcons` class and referencing the icon by name. + +```dart +import 'package:flutter/material.dart'; +import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text('My App'), + ), + body: Center( + child: Icon(MdiIcons.home), + ), + ); + } +} +``` + +Overall, the Material Design Icons package is a useful resource for Flutter developers, as it provides a large set of high-quality icons that can be used to enhance the user experience of their apps. diff --git a/questions/what-is-the-purpose-of-the-material-design-icons-package-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-material-design-icons-package-in-flutter/metadata.json new file mode 100644 index 0000000..a60f672 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-material-design-icons-package-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-material-design-icons-package-in-flutter", + "rank": 80, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-navigator-class-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-navigator-class-in-flutter/en-US.mdx new file mode 100644 index 0000000..6bb8996 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-navigator-class-in-flutter/en-US.mdx @@ -0,0 +1,12 @@ +--- +title: What is the purpose of the `Navigator` class in Flutter? +--- + +In Flutter, the `Navigator` class is used to manage a stack of pages or routes in an app. It provides methods to push and pop routes onto and off of the stack, allowing the user to navigate between different screens or views within the app. + +Here are some of the key features and use cases of the `Navigator` class in Flutter: + +1. The `Navigator` class provides methods to push and pop routes onto and off of the stack. When a route is pushed onto the stack, it becomes the topmost route and is displayed on the screen. When a route is popped off the stack, the previous route becomes the topmost route and is displayed on the screen. +2. The `Navigator` class provides a way to pass data between routes using the push method's arguments parameter. +3. The `Navigator` class allows to manage the navigation history by controlling which routes are pushed onto and popped off of the stack. +4. The `Navigator` class provides options to customize the transition animation when navigating between routes, such as sliding, fading, or scaling the new route into view. diff --git a/questions/what-is-the-purpose-of-the-navigator-class-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-navigator-class-in-flutter/metadata.json new file mode 100644 index 0000000..3cf83be --- /dev/null +++ b/questions/what-is-the-purpose-of-the-navigator-class-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-navigator-class-in-flutter", + "rank": 75, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-scaffold-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-scaffold-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..cb3e0c3 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-scaffold-widget-in-flutter/en-US.mdx @@ -0,0 +1,9 @@ +--- +title: What is the purpose of the scaffold widget in Flutter? +--- + +The `Scaffold` widget in Flutter is a basic structure or layout for a screen or a page in a Flutter application. It provides a visual structure for displaying a material design-style layout, which includes app bars, drawers, floating action buttons, and more. + +The Scaffold widget serves as a container for different widgets, such as a `AppBar`, `BottomNavigationBar`, `Drawer`, and `FloatingActionButton`. It also provides a body property for adding the main content of the screen, and backgroundColor property for setting the background color of the screen. + +Using a Scaffold widget can help to quickly build a basic structure for a Flutter application's user interface. The widgets it contains can be customized to achieve a wide range of designs and functionalities. diff --git a/questions/what-is-the-purpose-of-the-scaffold-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-scaffold-widget-in-flutter/metadata.json new file mode 100644 index 0000000..8865ae7 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-scaffold-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-scaffold-widget-in-flutter", + "rank": 58, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..b9b8383 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter/en-US.mdx @@ -0,0 +1,26 @@ +--- +title: What is the purpose of the `SingleChildScrollView` widget in Flutter? +--- + +The `SingleChildScrollView` widget in Flutter is used to make its child widget scrollable if it overflows the parent container. + +The purpose of `SingleChildScrollView` is to provide a way to display content that is larger than the available space. This widget is often used when a widget contains a large amount of content that doesn't fit on the screen, such as a long list of items, a large image, or a form with many input fields. + +By wrapping the child widget in a `SingleChildScrollView`, the user can scroll through the content to see all of it. The `SingleChildScrollView` widget takes up as much space as its child widget requires, and allows the child to be scrolled vertically or horizontally to view all of its content. + +Here's an example of using `SingleChildScrollView` to create a scrollable list: + +```dart +SingleChildScrollView( + child: Column( + children: [ + ListTile(title: Text('Item 1')), + ListTile(title: Text('Item 2')), + ListTile(title: Text('Item 3')), + // Add more items here... + ], + ), +); +``` + +In this example, the `SingleChildScrollView` wraps a `Column` widget containing several `ListTile` widgets. If the content of the `Column` is too large to fit on the screen, the user can scroll through it to see all of the items. diff --git a/questions/what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter/metadata.json new file mode 100644 index 0000000..b93c723 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-singlechildscrollview-widget-in-flutter", + "rank": 62, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-stack-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-stack-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..51f9844 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-stack-widget-in-flutter/en-US.mdx @@ -0,0 +1,16 @@ +--- +title: What is the purpose of the `Stack` widget in Flutter? +--- + +In Flutter, the `Stack` widget is used to place widgets on top of each other in a specific order. It allows to position widgets at specific locations within the parent widget by using offsets or alignment. + +The main purpose of the `Stack` widget is to provide a way to overlay widgets on top of each other. For example, if we want to display a text label over an image, we can use a `Stack` widget to place the text label on top of the image. + +```dart +Stack( + children: [ + Image.network('https://picsum.photos/250?image=9'), + Center(child: Text('Hello, World!'), + ], +), +``` diff --git a/questions/what-is-the-purpose-of-the-stack-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-stack-widget-in-flutter/metadata.json new file mode 100644 index 0000000..93cf80b --- /dev/null +++ b/questions/what-is-the-purpose-of-the-stack-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-stack-widget-in-flutter", + "rank": 63, + "difficulty": "easy" +} diff --git a/questions/what-is-the-purpose-of-the-visibility-widget-in-flutter/en-US.mdx b/questions/what-is-the-purpose-of-the-visibility-widget-in-flutter/en-US.mdx new file mode 100644 index 0000000..e378e10 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-visibility-widget-in-flutter/en-US.mdx @@ -0,0 +1,23 @@ +--- +title: What is the purpose of the `Visibility` widget in Flutter? +--- + +In Flutter, the `Visibility` widget is used to control the visibility of a child widget based on a certain condition. The `Visibility` widget can be used to show or hide a widget dynamically, based on user interactions or other conditions. + +The `Visibility` widget has a visible property that determines whether its child is visible or not. If visible is set to true, the child is visible, and if it's set to false, the child is hidden. + +Here are some use cases for the `Visibility` widget: + +- Hiding/showing a widget based on a certain condition (e.g. a user's authentication status) +- Hiding/showing a widget based on user interactions (e.g. a dropdown menu that appears when a button is pressed) +- Animating the appearance/disappearance of a widget (e.g. fading in/out a widget when it appears/disappears) + +```dart +Visibility( + visible: true, // currently visible, set to `false` to disappear + child: Text( + 'Hello, World!', + style: TextStyle(fontSize: 24), + ), +), +``` diff --git a/questions/what-is-the-purpose-of-the-visibility-widget-in-flutter/metadata.json b/questions/what-is-the-purpose-of-the-visibility-widget-in-flutter/metadata.json new file mode 100644 index 0000000..a005c68 --- /dev/null +++ b/questions/what-is-the-purpose-of-the-visibility-widget-in-flutter/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-purpose-of-the-visibility-widget-in-flutter", + "rank": 65, + "difficulty": "easy" +} diff --git a/questions/what-is-the-role-of-the-flutterengine-in-the-flutter-framework/en-US.mdx b/questions/what-is-the-role-of-the-flutterengine-in-the-flutter-framework/en-US.mdx new file mode 100644 index 0000000..b6433fe --- /dev/null +++ b/questions/what-is-the-role-of-the-flutterengine-in-the-flutter-framework/en-US.mdx @@ -0,0 +1,10 @@ +--- +title: What is the role of the `FlutterEngine` in the Flutter framework? +--- + +The Flutter Engine is a portable runtime for hosting Flutter applications. It implements Flutter's core libraries, including animation and graphics, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain. It: + +- Executes Dart code in a separate isolate. +- Manages the rendering pipeline via the Skia engine. +- Facilitates communication between Flutter and native code through platform channels. +- Handles plugin integration and app lifecycle events. diff --git a/questions/what-is-the-role-of-the-flutterengine-in-the-flutter-framework/metadata.json b/questions/what-is-the-role-of-the-flutterengine-in-the-flutter-framework/metadata.json new file mode 100644 index 0000000..2ca2adc --- /dev/null +++ b/questions/what-is-the-role-of-the-flutterengine-in-the-flutter-framework/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-the-role-of-the-flutterengine-in-the-flutter-framework", + "rank": 94, + "difficulty": "advanced" +} diff --git a/questions/what-is-typedef-in-dart/en-US.mdx b/questions/what-is-typedef-in-dart/en-US.mdx new file mode 100644 index 0000000..11c609f --- /dev/null +++ b/questions/what-is-typedef-in-dart/en-US.mdx @@ -0,0 +1,21 @@ +--- +title: What is Typedef in Dart? +--- + +The `typedef` in Dart is a way to define a new type alias for a function type. It allows us to give a name to a function type and use that name to declare variables, function parameters, or return types. A `typedef` is useful when we want to refer to a complex function type multiple times in our code, as it makes our code more readable and reduces duplication. + +Here's an example of using `typedef` in Dart: + +```dart +typedef IntCallback = void Function(int value); + +void callBackMethod(IntCallback callback) { + callback(42); +} + +void main() { + callBackMethod((value) => print(value)); +} +``` + +In this example, the `IntCallback` typedef defines a function type that takes an int as a parameter and returns void. The `callBackMethod` function takes an `IntCallback` as a parameter and calls it. The main function uses a closure to define an implementation of `IntCallback` and passes it to the `callBackMethod` function. diff --git a/questions/what-is-typedef-in-dart/metadata.json b/questions/what-is-typedef-in-dart/metadata.json new file mode 100644 index 0000000..43836af --- /dev/null +++ b/questions/what-is-typedef-in-dart/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-typedef-in-dart", + "rank": 42, + "difficulty": "intermediate" +} diff --git a/questions/what-is-vsync-explain/en-US.mdx b/questions/what-is-vsync-explain/en-US.mdx new file mode 100644 index 0000000..a689ccf --- /dev/null +++ b/questions/what-is-vsync-explain/en-US.mdx @@ -0,0 +1,50 @@ +--- +title: What is `vsync`? Explain. +--- + +The `vsync` in Flutter is an abbreviation for "vertical synchronization". It's a feature that ensures that animations and user interface updates are synchronized with the device's screen refresh rate. This prevents visual artifacts, such as screen tearing or stuttering, which can occur when the device's screen refresh rate and the animation's frame rate are not in sync. + +In Flutter, `vsync` is provided through the `TickerProvider` interface, which is a factory for creating `Ticker` objects. The `Ticker` objects are used to drive animations, and the `TickerProvider` provides the `vsync` signal that ensures that animations are in sync with the device's screen refresh rate. + +To use `vsync` in Flutter, a `TickerProvider` must be passed to the `AnimationController` when it is created. This allows the `AnimationController` to access the `vsync` signal and use it to drive animations. + +```dart +class MyAnimation extends StatefulWidget { + @override + _MyAnimationState createState() => _MyAnimationState(); +} + +class _MyAnimationState extends State + with SingleTickerProviderStateMixin { + AnimationController _controller; + Animation _animation; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: Duration(seconds: 2), + vsync: this, + ); + _animation = Tween(begin: 0, end: 300).animate(_controller) + ..addListener(() { + setState(() {}); + }); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container( + height: _animation.value, + width: _animation.value, + child: FlutterLogo(), + ); + } +} +``` diff --git a/questions/what-is-vsync-explain/metadata.json b/questions/what-is-vsync-explain/metadata.json new file mode 100644 index 0000000..bfd8ecf --- /dev/null +++ b/questions/what-is-vsync-explain/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-is-vsync-explain", + "rank": 38, + "difficulty": "advanced" +} diff --git a/questions/what-technology-is-flutter-built-with/en-US.mdx b/questions/what-technology-is-flutter-built-with/en-US.mdx new file mode 100644 index 0000000..b34f445 --- /dev/null +++ b/questions/what-technology-is-flutter-built-with/en-US.mdx @@ -0,0 +1,17 @@ +--- +title: What technology is Flutter built with? +--- + +Flutter is an open-source UI software development toolkit created by Google for building natively compiled applications across mobile, web, and desktop from a single codebase. It's primarily developed using the Dart programming language, also by Google, which supports ahead-of-time (AOT) compilation for high-performance execution. + +The architecture of Flutter comprises three main components: + +1. **Flutter Framework**: Written in Dart, this layer provides a comprehensive set of libraries and widgets, including Material Design and Cupertino (iOS-style) widgets, enabling developers to craft highly customizable user interfaces. + +2. **Flutter Engine**: Primarily written in C++, the engine is responsible for rendering and core functionalities. Initially, Flutter utilized the Skia graphics library for rendering. However, with the release of Flutter 3.27, the Impeller rendering engine has become the default on both iOS and Android platforms. Impeller aims to deliver more predictable performance by precompiling shaders and leveraging modern graphics APIs like Metal. + +3. **Embedder**: This component allows Flutter applications to run on various platforms by providing an entry point and access to native APIs. It's platform-specific and integrates the Flutter engine into the target operating system. + +**Further Reading:** + +- [Flutter Architectural Overview](https://docs.flutter.dev/resources/architectural-overview) diff --git a/questions/what-technology-is-flutter-built-with/metadata.json b/questions/what-technology-is-flutter-built-with/metadata.json new file mode 100644 index 0000000..e81e62d --- /dev/null +++ b/questions/what-technology-is-flutter-built-with/metadata.json @@ -0,0 +1,5 @@ +{ + "slug": "what-technology-is-flutter-built-with", + "rank": 51, + "difficulty": "easy" +}