Mobile App Development Cross-Platform Development Syllabus

Cross-Platform Development syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Cross-Platform Development in Mobile App Development, not a summary of it.

1. 1

   Flutter Fundamentals

   4 topics

   • Widgets and Widget Tree
   • Material and Cupertino Widgets
   • Navigation and Routing
   • Asset and Font Management
2. 2

   Flutter State Management

   3 topics

   • setState and InheritedWidget
   • Provider and Riverpod
   • BLoC Pattern
3. 3

   React Native Fundamentals

   4 topics

   • Core Components and JSX
   • Styling and Flexbox
   • Navigation (React Navigation)
   • Expo vs Bare Workflow
4. 4

   React Native State and Data

   3 topics

   • Hooks and Component State
   • Context and Redux
   • Data Fetching and React Query
5. 5

   Native Modules and Bridges

   3 topics

   • Platform Channels in Flutter
   • Native Modules in React Native
   • Accessing Device APIs
6. 6

   Cross-Platform Trade-offs

   3 topics

   • Performance Considerations
   • Platform-Specific Code
   • Code Sharing and Kotlin Multiplatform

Cross-Platform Development flashcards for Mobile App Development

21 of 64 cards from the Cross-Platform Development deck — real questions with worked answers.

1. In Flutter, what is a widget and what is the "widget tree"?

   A widget is an immutable description of part of the UI. The widget tree is the hierarchical composition of these widgets (parents nesting children) that Flutter uses to build the interface; the framework builds an element tree and render tree from it to actually paint pixels.

2. In Flutter, what is the key difference between a StatelessWidget and a StatefulWidget?

   A StatelessWidget is immutable and has no mutable internal state (rebuilds only when inputs change). A StatefulWidget pairs with a separate State object that persists across rebuilds and can call setState() to trigger UI updates when its data changes.

3. In Flutter's widget tree, what is the difference between the Widget tree, the Element tree, and the RenderObject tree?

   The Widget tree is the immutable configuration. The Element tree is the mutable instantiation that manages lifecycle and links widgets to render objects. The RenderObject tree handles layout, painting, and hit-testing. Elements provide the stable identity that lets Flutter efficiently reuse render objects across rebuilds.

4. In Flutter, what is the purpose of a Key on a widget?

   A Key preserves widget/element identity across rebuilds so Flutter can correctly match old elements to new widgets, especially in lists of same-type widgets. ValueKey, ObjectKey, and UniqueKey are local keys; GlobalKey uniquely identifies a widget app-wide and gives access to its State or BuildContext.

5. In Flutter, what are Material and Cupertino widgets, and when do you use each?

   Material widgets (MaterialApp, Scaffold, AppBar) implement Google's Material Design, typically for Android/cross-platform. Cupertino widgets (CupertinoApp, CupertinoNavigationBar) implement Apple's iOS design language. Use Material for a unified look or Cupertino to match native iOS appearance.

6. In Flutter, what does the Scaffold widget provide?

   Scaffold implements the basic Material visual layout structure: it provides slots for an appBar, body, floatingActionButton, drawer, bottomNavigationBar, and snackbars/bottom sheets, managing their placement on the screen.

7. In Flutter, contrast Container versus SizedBox and Row/Column as layout widgets.

   Container is a convenience widget combining padding, margins, decoration, and constraints. SizedBox forces a specific width/height (or adds fixed spacing). Row lays children horizontally and Column lays them vertically, both controlled by mainAxisAlignment and crossAxisAlignment.

8. In Flutter, what is the difference between Expanded and Flexible inside a Row or Column?

   Both distribute free space along the main axis by a flex factor. Expanded forces the child to fill all allotted space (flex fit = tight). Flexible allows the child to be at most that size but can be smaller (flex fit = loose). Expanded is Flexible with fit: FlexFit.tight.

9. In Flutter, how do Navigator.push and Navigator.pop manage screens?

   Flutter uses a stack of Route objects. Navigator.push(context, MaterialPageRoute(...)) pushes a new screen onto the stack; Navigator.pop(context) removes the top route and returns to the previous one, optionally passing a result value back.

10. In Flutter, what is the difference between imperative (Navigator 1.0) and declarative (Navigator 2.0 / Router) navigation?

    Navigator 1.0 is imperative: you call push/pop directly to mutate the stack. Navigator 2.0 (the Router API with Pages) is declarative: the entire navigation stack is derived from app state, enabling better deep linking and web URL synchronization. Packages like go_router wrap this.

11. In Flutter, how do you define and use named routes?

    You register a map in MaterialApp's routes: parameter (e.g. '/details': (context) => DetailsScreen()) or use onGenerateRoute. Then navigate with Navigator.pushNamed(context, '/details'), optionally passing arguments via the arguments parameter.

12. In Flutter, how are assets like images declared and loaded?

    Assets are declared under the flutter: assets: section of pubspec.yaml with their paths. They are loaded at runtime via widgets like Image.asset('path') or the rootBundle/AssetBundle APIs (e.g. rootBundle.loadString for text).

13. In Flutter, how do you add and use a custom font?

    Declare the font family and its .ttf/.otf files (with weight/style) under flutter: fonts: in pubspec.yaml. Then apply it with TextStyle(fontFamily: 'MyFont'), or set it globally in ThemeData's textTheme.

14. In Flutter, how does resolution-aware asset selection work with directories like 2.0x and 3.0x?

    Flutter looks for variants in subdirectories named by device pixel ratio (e.g. 2.0x/, 3.0x/) next to the main asset. At runtime it picks the variant matching the device's devicePixelRatio, so a $2.0\times$ screen loads the 2.0x image automatically.

15. In Flutter, what does setState() do and what are its limitations?

    setState() notifies the framework that a State object's internal data changed, scheduling a rebuild of that widget's subtree. Limitations: it only rebuilds locally, does not scale for sharing state across distant widgets, and calling it after dispose or during build causes errors.

16. In Flutter, what is an InheritedWidget and what problem does it solve?

    InheritedWidget efficiently propagates data down the tree so descendants can access it via context.dependOnInheritedWidgetOfExactType() without passing it manually through constructors (avoiding "prop drilling"). Dependent widgets rebuild automatically when the InheritedWidget's data changes. Theme and MediaQuery use it internally.

17. In Flutter, how does an InheritedWidget decide whether dependent widgets should rebuild?

    By overriding updateShouldNotify(oldWidget), which returns a bool. If it returns true when the new data differs from the old, all registered dependents are rebuilt; if false, they are not notified. This gives fine-grained control over rebuild propagation.

18. What is the Provider package in Flutter, and how does it relate to InheritedWidget?

    Provider is a wrapper around InheritedWidget that simplifies dependency injection and state management. You expose values with providers (Provider, ChangeNotifierProvider) and consume them via context.watch/read or Consumer, avoiding boilerplate while getting scoped, rebuild-efficient access.

19. In Flutter's Provider, what is the difference between context.watch, context.read, and context.select?

    context.watch<T>() subscribes and rebuilds the widget when T changes. context.read<T>() gets the value once without listening (use in callbacks). context.select<T,R>() listens to only a specific derived value R, rebuilding only when that slice changes for finer performance control.

20. What is Riverpod, and what advantages does it claim over Provider?

    Riverpod is a rewrite of Provider that is compile-safe and does not depend on the widget tree/BuildContext. Advantages: providers are global and testable, no ProviderNotFoundException at runtime, supports multiple providers of the same type, and offers auto-dispose and family modifiers.

21. In Riverpod, what are the main provider types (Provider, StateProvider, FutureProvider, NotifierProvider)?

    Provider exposes a read-only/computed value. StateProvider holds simple mutable state. FutureProvider (and StreamProvider) expose async data as AsyncValue. NotifierProvider/AsyncNotifierProvider expose complex mutable state managed by a Notifier class with methods.

See more Cross-Platform Development flashcards →

Planning Cross-Platform Development for Mobile App Development

Cross-Platform Development (Mobile App Development) FAQ