User Internface Design Using Flutter

1. 

a) Install Flutter and Dart SDK. 

b) Write a simple Dart program to understand the language basics.

2. 

a) Explore various Flutter widgets (Text, Image, Container, etc.).

b) Implement different layout structures using Row, Column, and Stack widgets.

3. 

a) Design a responsive UI that adapts to different screen sizes.

b) Implement media queries and breakpoints for responsiveness.

4. 

a) Set up navigation between different screens using Navigator.

b) Implement navigation with named routes.

5. 

a) Learn about stateful and stateless widgets.

b) Implement state management using set State and Provider.

6. 

a) Create custom widgets for specific UI elements.

b) Apply styling using themes and custom styles.

7. 

a) Design a form with various input fields.

b) Implement form validation and error handling.

8. 

a) Create a scrollable List Widget in Form & Add items to it.

b) Implement the List View & Display the selected item in the prompt window.

9. 

a) Add animations to UI elements using Flutter 's animation framework.

b) Experiment with different types of animations (fade, slide, etc.).

10.

 a) Fetch data from a REST APL

b) Display the fetched data in a meaningful way in the UI.

Textbooks:

1. Marco L. Napoli , Beginning Flutter: A Hands-on Guide to App Development.

2. Rap Payne, Beginning App Development with Flutter: Create Cross-Platform Mobile Apps 151 Edition, Apres

3. Richard Rose, Flutter & Dart Cookbook, Developing Full stack Applications for the Cloud, Oreilly.

Course Objectives:- 

• Learns to Implement Flutter Widgets and Layouts

• Understands Responsive UI Design and with Navigation in Flutter

• Knowledge on Widgets and customize widgets for specific UI elements, Themes

• Understand to include animation apart from fetching data

Course Outcomes: At the end of this course, the student will be able to

CO1: Apply Flutter and Dart fundamentals to design and develop interactive user interfaces.(Apply-L3)

CO2: Implement UI layouts, navigation, state management, and responsive design principles for mobile applications. (Apply-L3)

CO3: Integrate animations, API data fetching, form validation, and debugging techniques to enhance application performance and usability. (Apply-L3)

CO4: Improve individual / teamwork skills, communication & report writing skills with ethical Value

Textbooks:

• Marco L. Napoli , Beginning Flutter: A Hands-on Guide to App Development.

• Rap Payne, Beginning App Development with Flutter: Create Cross-Platform Mobile Apps 151 Edition, Apres

• Richard Rose, Flutter & Dart Cookbook, Developing Full stack Applications for the Cloud, Oreilly.

Dart Language

Part A: True / False (15 Questions)

1. Dart is a purely procedural programming language.

   • Answer: False. Dart is an Object-Oriented (class-based) language.

2. The main() function is the entry point for all Dart applications.

   • Answer: True.

3. In Dart, once a variable is declared using var, its type can be changed later in the code.

   • Answer: False. var uses type inference; the type is fixed after initialization. Only dynamic allows the type to change.

4. Dart supports method overloading.

   • Answer: False. Dart does not support method overloading (multiple methods with the same name but different parameters). Named constructors are used as an alternative.

5. A final variable must be assigned a value at compile-time.

   • Answer: False. A final variable can be assigned a value at runtime but can only be set once. A const variable must be a compile-time constant.

6. All Dart objects are instances of the Object class.

   • Answer: True. Every type in Dart, except dynamic and the nullable version of Object (i.e., Object?), is a subtype of Object.

7. Dart uses the is keyword for type checking.

   • Answer: True. The is operator checks if an object is of a specific type.

8. The late keyword is used to declare a variable that is guaranteed to be initialized before its first use, otherwise, it throws a runtime error.

   • Answer: True.

9. Dart is primarily used only for web development.

   • Answer: False. Dart is used for web, mobile (Flutter), desktop, and server applications.

10. Dart's type system is unsound, meaning it cannot guarantee type safety.

    • Answer: False. Dart's type system is sound, especially with null safety, meaning types cannot lie.

11. The => fat arrow syntax in Dart is only used for if-else statements.

    • Answer: False. It is used for single-expression functions and is a shorthand for returning a value.

12. In Dart, the int and double types are subtypes of num.

    • Answer: True. num is the superclass for both int (integers) and double (floating-point numbers).

13. Dart supports multiple inheritance for classes.

    • Answer: False. Dart has single inheritance for classes but achieves code reuse through mixins and interfaces (implicit).

14. The await keyword can be used outside of an async function.

    • Answer: False. await can only be used inside a function marked with the async keyword.

15. A List in Dart must contain elements of the same data type.

    • Answer: False. Lists can contain elements of different types unless a specific type is defined (e.g., List<int>), or if the type is inferred as List<Object>.

Part B: Fill in the Blanks (15 Questions)

1. Dart was developed by Google and is the language behind the Flutter framework.

2. The keyword used to prevent a variable from being changed after it is initialized at runtime is final.

3. Dart's concurrency model uses Isolates instead of traditional threads to avoid shared memory state.

4. The default value of any uninitialized variable in Dart is null (in a null-safe context, variables must be explicitly made nullable using ? or marked with late).

5. A mixin is a way of reusing a class's code in multiple class hierarchies.

6. To include the value of a variable inside a string, you use string interpolation with the syntax $ or ${}.

7. A function that doesn't have a name is called an anonymous function (or lambda).

8. Asynchronous operations in Dart are primarily handled using Future objects and the keywords async and await.

9. The .. operator in Dart is called the cascade operator and allows you to perform a sequence of operations on the same object.

10. In Dart, the String type is represented by a sequence of UTF-16 code units.

11. The core collection type for an ordered group of objects is a List.

12. The try, catch, and finally keywords are used for exception handling in Dart.

13. The keyword used to define a class that cannot be instantiated and often serves as a base class is abstract.

14. A Getter is a special method used to read a property's value, and a Setter is used to write it.

15. Dart supports two types of compilation: AOT (Ahead-of-Time) for production/native code and JIT (Just-in-Time) for development (e.g., Hot Reload).

Part C: Match the Following (10 Questions)

Match the Dart feature on the left with its description on the right.

Feature (A) Description (B)

1. const(d) a. Represents a sequence of asynchronous events.

2. dynamic (e) b. The process of making multiple calls on the same object.

3. Stream (a) c. Explicitly converts an object from one type to another.

4. Cascade (..) (b) d. A compile-time constant.

5. as keyword(c) e. Disables static type checking for a variable.

Feature (A) Description (B)

6. Map(d) a. Used to implement an interface.

7. Future(e) b. Used to reuse code in multiple classes (not inheritance).

8. implements (a) c. A set of unique, unordered items.

9. with(b) d. A collection of key-value pairs.

10. Set(c) e. Represents a single asynchronous result.

Part D: Multiple Answers (10 Questions)

1. Which of the following are valid ways to declare an integer variable in Dart? (Select 3)

   • A. int count = 10; (Correct)

   • B. var count = 10; (Correct, type inference to int)

   • C. Integer count = 10;

   • D. num count = 10; (Correct)

2. Which of the following data types are built-in types in Dart? (Select 3)

   • A. int (Correct)

   • B. char

   • C. bool (Correct)

   • D. String (Correct)

3. What are the primary benefits of Dart's AOT (Ahead-of-Time) compilation? (Select 2)

   • A. Faster initial build time.

   • B. Faster execution/Startup speed (Correct)

   • C. Smaller code size/Native code generation (Correct)

   • D. Instantaneous hot-reload.

4. Which keywords are used to manage asynchronous programming in Dart? (Select 3)

   • A. async (Correct)

   • B. awaiting

   • C. yield (Used with streams/generators)

   • D. await (Correct)

   • E. Future (Correct)

5. What does Dart's sound null safety feature ensure? (Select 2)

   • A. Variables cannot be null unless explicitly marked as nullable. (Correct)

   • B. It removes the need for any exception handling.

   • C. It helps prevent null reference exceptions at runtime. (Correct)

   • D. All variables must be initialized immediately.

6. In Dart, a class can define a constructor using which of the following keywords? (Select 2)

   • A. const (Correct, for constant constructors)

   • B. static

   • C. factory (Correct, for constructors that don't always create a new instance)

   • D. override

7. Dart supports which type of parameters in functions? (Select 2)

   • A. Positional (Correct)

   • B. Value

   • C. Named (Correct)

   • D. Reference

8. Which operators are part of the null-aware operators in Dart? (Select 2)

   • A. !

   • B. ?? (Correct, null coalescing operator)

   • C. ?:

   • D. ?. (Correct, conditional member access operator)

9. Which collection types in Dart are indexed (ordered by index)? (Select 2)

   • A. Map

   • B. List (Correct)

   • C. Set

   • D. Iterable (The base for ordered collections like List)

10. A mixin in Dart is defined using which of the following keywords? (Select 2)

    • A. is

    • B. mixin (Correct, to define the mixin itself)

    • C. implements

    • D. with (Correct, to apply the mixin to a class)

3.a) Design a responsive UI that adapts to different screen sizes.

1. What is the general principle of responsive design in Flutter, and how does it differ from web responsiveness?

   • Answer: The general principle is to ensure the UI looks good and functions well across various device sizes and orientations. Unlike web (which uses CSS media queries and flexbox), Flutter often relies on widgets like LayoutBuilder, MediaQuery, Expanded, and Flexible to make layout decisions based on parent constraints or device metrics.

2. How can you determine the current screen's height and width within a widget?

   • Answer: By using MediaQuery.of(context).size.width and MediaQuery.of(context).size.height.

3. What is the purpose of the LayoutBuilder widget in building a responsive UI?

   • Answer: LayoutBuilder allows a widget to know and respond to the maximum constraints of its parent widget, which is crucial for creating adaptive layouts within sub-sections of the screen (e.g., in a sidebar or a detail pane).

4. Explain the difference between using MediaQuery and LayoutBuilder for responsiveness.

   • Answer: MediaQuery gives details about the entire screen (device size, brightness, etc.). LayoutBuilder gives details about the available space given by the parent to the current widget.

5. What is an "aspect ratio," and which widget can be used to maintain a fixed aspect ratio for a child widget regardless of the screen size?

   • Answer: An aspect ratio is the proportional relationship between width and height. The AspectRatio widget is used to size its child to a specified aspect ratio.

6. When designing for responsiveness, what is the significance of the fractional offset unit in Flutter?

   • Answer: It refers to using dimensions that are fractions of the available space (e.g., 80% of the screen width) rather than fixed pixel values, ensuring elements scale proportionally.

7. How would you ensure that a section of the UI only appears if the available width is greater than a specific breakpoint (e.g., 600 pixels)?

   • Answer: Use LayoutBuilder to check the constraints.maxWidth or use a conditional statement with MediaQuery.of(context).size.width.

8. What is the benefit of using Spacer widgets in a Row or Column for responsive spacing?

   • Answer: Spacer widgets use the flex property to take up any remaining space, distributing it proportionally, ensuring elements stay separated as the screen resizes.

9. What happens to a widget when it's wrapped in a Flexible widget with a flex value?

   • Answer: The widget is allowed to take up space only up to its intrinsic size, but if more space is available, it will expand according to its flex value (unless FlexFit.loose is used).

10. Name one third-party package commonly used in Flutter to simplify the creation of responsive layouts based on pre-defined breakpoints.

    • Answer: Packages like responsive_framework or flutter_screenutil are commonly used.

3.b) Implement media queries and breakpoints for responsiveness.

1. Define a "breakpoint" in the context of UI design.

   • Answer: A breakpoint is a predetermined screen size (width or height) where a responsive design's layout is specifically altered to better suit the change in screen dimensions (e.g., switching from a Column layout to a Row layout).

2. How do you access the device's current pixel ratio using MediaQuery?

   • Answer: By using MediaQuery.of(context).devicePixelRatio.

3. Which MediaQuery property can tell you if the device is currently in portrait or landscape orientation?

   • Answer: MediaQuery.of(context).orientation (which returns a Orientation enum value).

4. What is a "safe area," and which widget is used to respect it?

   • Answer: The safe area is the part of the screen not obscured by system UI elements like the notification bar (notch), status bar, or navigation bar. The SafeArea widget wraps the content to ensure it stays within these boundaries.

5. How would you use MediaQuery to define a breakpoint (e.g., Tablet breakpoint) in your code?

   • Answer: You would typically define a constant const double kTabletBreakpoint = 600.0; and then use an expression like: if (MediaQuery.of(context).size.width > kTabletBreakpoint) { ... }.

6. What is the significance of the padding property of MediaQueryData?

   • Answer: It describes the parts of the screen that are completely obscured by system UI, often used to calculate how much padding a scrollable view needs to avoid clipping.

7. If you need to define different navigation bar styles for phone and tablet sizes, which UI pattern or widget would you use to implement this breakpoint-based logic?

   • Answer: A common pattern is to use a LayoutBuilder or a custom function that uses MediaQuery to return a Phone-specific widget or a Tablet-specific widget based on the width.

8. Why is it generally discouraged to use a fixed pixel value (e.g., 400.0) for font sizes when aiming for a highly responsive design?

   • Answer: Fixed pixel values don't scale well across different devices and may appear too large on small screens or too small on large screens. It's often better to use relative sizing or dynamically adjust the size based on the screen width.

9. What is the unit of measure for the values returned by MediaQuery.of(context).size?

   • Answer: The values are in logical pixels (device-independent pixels), which Flutter uses to maintain visual consistency across devices with different pixel densities.

10. What are "view padding" and "view insets" in MediaQueryData, and what do they generally measure?

    • Answer: They measure the size of the operating system's intrusions (like the status bar, bottom navigation area, or keyboard) in logical pixels. viewInsets typically refers to the keyboard area, while viewPadding refers to fixed system cutouts.

4. Navigation

4.a) Set up navigation between different screens using Navigator.

1. Explain the "stack" concept of Flutter's Navigator.

   • Answer: The Navigator manages a stack of Route objects (screens/pages). When you move to a new screen, the new route is pushed onto the stack; when you go back, the top route is popped off the stack.

2. How do you navigate from Screen A to Screen B and pass data to Screen B?

   • Answer: By using Navigator.push(context, MaterialPageRoute(builder: (context) => ScreenB(data: myData))). The data is passed directly through the destination screen's constructor.

3. How do you navigate back to the previous screen and receive a result from it?

   • Answer: On Screen A, call await Navigator.push(...) to wait for the result. On Screen B (the destination), call Navigator.pop(context, resultValue) to return the result to Screen A.

4. What is the difference between Navigator.push() and Navigator.pushReplacement()?

   • Answer: push() adds a new route to the stack. pushReplacement() adds a new route but first removes the current route from the stack, so the user cannot navigate back to the previous screen.

5. If you are five screens deep (A -> B -> C -> D -> E), how do you return directly to screen B?

   • Answer: By using Navigator.popUntil(context, ModalRoute.withName('/bRouteName')) or a predicate function.

6. What is the default route transition animation provided by the MaterialPageRoute?

   • Answer: A platform-specific animation: typically a slide up on Android and a slide horizontally on iOS.

7. What happens if you call Navigator.pop() on the very first screen (root route) of the application?

   • Answer: The application will typically exit, as there are no more routes to pop off the stack.

8. How can you prevent the user from accidentally swiping back (using the platform gesture) on a specific screen?

   • Answer: By wrapping the screen's content in a WillPopScope widget and returning false in its onWillPop callback.

9. What is a PageRouteBuilder, and when is it typically used instead of MaterialPageRoute?

   • Answer: It's used when you need to define a custom transition animation between two screens, giving explicit control over the animation duration and effect.

10. Explain the purpose of the canPop property of the Navigator.

    • Answer: It returns a boolean value indicating whether the navigator can currently pop the top route off the stack (i.e., whether it's the root screen or not).

4.b) Implement navigation with named routes.

1. What is the benefit of using named routes over direct navigation (e.g., MaterialPageRoute)?

   • Answer: Named routes provide a centralized way to manage routes, making code cleaner and easier to maintain, especially for deep linking and large applications.

2. Where do you typically define the map of named routes in a Flutter application?

   • Answer: In the routes property of the MaterialApp or CupertinoApp widget, where you map a string route name (e.g., /detail) to the widget builder function.

3. How do you navigate to a screen using a named route?

   • Answer: By using Navigator.pushNamed(context, '/routeName').

4. How do you access the arguments (data) passed to a named route within the destination screen's build method?

   • Answer: By using ModalRoute.of(context)!.settings.arguments, and then casting the result to the expected data type.

5. What is the role of the initialRoute property in MaterialApp?

   • Answer: It specifies the name of the first route that should be displayed when the application starts, overriding the default behavior of displaying the widget defined in the home property (if both are present, initialRoute takes precedence).

6. What is the difference between Navigator.pushNamed() and Navigator.popAndPushNamed()?

   • Answer: pushNamed() adds a new named route on top of the stack. popAndPushNamed() first removes the current route from the stack, and then pushes the new named route.

7. What is the function signature required for the route builders in the routes map of MaterialApp?

   • Answer: The signature is (BuildContext context) => Widget, where the context is provided, and the function returns the widget (screen) to be displayed.

8. If you are deep in the navigation stack, how do you navigate back to the very first screen (/) and remove all routes in between?

   • Answer: By using Navigator.pushNamedAndRemoveUntil(context, '/', (Route<dynamic> route) => false). (The predicate returns false to remove all routes).

9. What happens if you use Navigator.pushNamed() for a route that is not defined in the MaterialApp's routes map?

   • Answer: It results in a runtime error (an exception) because the navigator cannot find a matching route builder function.

10. How can you handle dynamic route names (e.g., /user/123) using named routes?

    • Answer: By using the onGenerateRoute property of MaterialApp. This property is a function that intercepts any named route call not found in the routes map, allowing you to parse the route name and arguments manually.

5. State Management

5.a) Learn about stateful and stateless widgets.

1. What is a StatelessWidget, and what makes it "stateless"?

   • Answer: A widget that describes a part of the user interface that does not depend on mutable data or changes over time. It is stateless because all of its values are set upon construction and are immutable (final).

2. What is a StatefulWidget, and what is its primary purpose?

   • Answer: A widget that has a mutable state, meaning its appearance can change in response to events (e.g., user interaction, API response). It is used for dynamic UIs.

3. Describe the relationship between a StatefulWidget and its associated State class.

   • Answer: The StatefulWidget holds the configuration (immutable data) and the State object holds the mutable data and the widget's lifecycle logic. The widget itself is typically rebuilt, but the State object persists across builds.

4. Which method is the only required method in a StatelessWidget?

   • Answer: The build(BuildContext context) method.

5. What is the significance of the initState() method in the State lifecycle?

   • Answer: It is the first method called after the State object is created. It's used for one-time setup, initializing mutable variables, setting up subscriptions, or calling an API.

6. When is the dispose() method called in a StatefulWidget's lifecycle?

   • Answer: It is called when the State object is permanently removed from the widget tree. It is used to clean up resources, like cancelling subscriptions or controllers, to prevent memory leaks.

7. What happens to a widget if you change a property that is defined as final?

   • Answer: Nothing within the existing object changes. If the parent widget passes a new value for the final property, Flutter will create a new instance of the widget to reflect the change.

8. What is the didChangeDependencies() method used for in the State lifecycle?

   • Answer: It is called immediately after initState(), and also when an InheritedWidget that the widget depends on changes. It is the ideal place to call Provider.of(context) with listen: false or similar operations.

9. What is the purpose of the key property that many widgets accept?

   • Answer: Keys are used by Flutter to uniquely identify elements in the widget tree, which is essential for preserving the state of a widget (especially StatefulWidgets) when the collection they belong to changes.

10. Why should you generally avoid performing heavy, long-running calculations directly inside the build() method?

    • Answer: The build() method can be called very frequently (sometimes multiple times per frame). Placing heavy calculations there will lead to UI jank and poor performance.

5.b) Implement state management using setState and Provider.

1. What is the only way to trigger a rebuild of the UI in a StatefulWidget using basic state management?

   • Answer: By calling the setState(() { ... }) method.

2. What is the main limitation or drawback of using only setState for large applications (known as "prop drilling")?

   • Answer: setState only rebuilds the widget and its entire sub-tree, often resulting in unnecessary rebuilds of widgets that don't depend on the changed state, leading to performance issues and poor code organization.

3. Explain the core concept of the Provider package.

   • Answer: Provider is a wrapper around the InheritedWidget that makes it easy to expose a value (state) from a parent widget down the widget tree and allow dependent widgets to easily consume and react to changes in that value.

4. In the Provider package, what widget is used to expose a value to the widget tree?

   • Answer: ChangeNotifierProvider (for mutable state) or Provider (for immutable state) is typically used at or near the root of the tree.

5. What is the function of the ChangeNotifier class when implementing the Provider pattern?

   • Answer: ChangeNotifier is a class provided by Flutter that holds the mutable data. When this data changes, the state object must call notifyListeners() to alert all listening widgets to rebuild.

6. What is the difference between using context.watch<T>() and context.read<T>() in the Provider package?

   • Answer: watch is used to both get the value and rebuild the widget when the value changes (like listen: true). read is used only to get the value once and does not cause a rebuild when the value changes (like listen: false).

7. When should you use the Consumer<T> widget instead of context.watch<T>()?

   • Answer: Use Consumer<T> when you only want to rebuild a small, specific part of the widget tree, rather than rebuilding the entire build method of the widget.

8. Briefly explain the concept of "unnecessary rebuilds" in the context of setState.

   • Answer: When setState is called, all widgets below it in the tree are rebuilt, even if they aren't using the data that changed. This is the "unnecessary" part that state management packages aim to solve.

9. If you are using Provider and need to fetch API data when a screen loads, where is the best place in the StatefulWidget lifecycle to access the Provider value with listen: false?

   • Answer: In the initState() or didChangeDependencies() method.

10. In the Provider pattern, what is the significance of the lazy property in ChangeNotifierProvider?

    • Answer: If lazy is set to true (the default), the provider's create function is called only when the value is first looked up. If set to false, the value is created immediately when the widget is inserted into the tree.

6. Custom Widgets and Styling

6.a) Create custom widgets for specific UI elements.

1. Why is it a good practice to break down a complex UI into smaller, custom widgets?

   • Answer: It improves reusability, makes the code easier to read and maintain, and helps manage complexity by separating concerns, leading to smaller build methods.

2. What is the difference between extracting a widget and creating a function that returns a widget?

   • Answer: Extracting a widget creates a new StatelessWidget or StatefulWidget class, which gives Flutter better performance optimizations (like implicit const and key-based element tree management). Creating a function is less performant and often breaks Flutter's optimization process.

3. How do you ensure your custom widget is easily reusable across different parts of your application?

   • Answer: By defining its configurable parameters (like text, color, or a callback function) as final properties in the widget's constructor.

4. When creating a custom StatelessWidget, why must all its properties be declared as final?

   • Answer: Because a StatelessWidget describes an immutable part of the UI. Once created, its configuration should not change.

5. If your custom widget needs to execute a function when tapped, what is the best practice for defining that function in the widget's constructor?

   • Answer: Define it as a final VoidCallback (if it takes no arguments) or a final Function property in the constructor.

6. How would you pass a child widget into your custom container widget?

   • Answer: By defining a property of type final Widget child in the custom widget's constructor and using it in the build method.

7. What is the advantage of making a custom StatelessWidget constructor const?

   • Answer: It allows the widget instance to be created at compile time, which can significantly improve rendering performance by avoiding unnecessary widget rebuilds.

8. In a custom widget, what is a common pattern for defining required properties to ensure they are always provided?

   • Answer: Using the required keyword for named parameters in the constructor: MyWidget({super.key, required this.data}).

9. If your custom widget needs to manage its own internal state (e.g., a toggle button), should it be StatelessWidget or StatefulWidget?

   • Answer: It must be a StatefulWidget because it needs a persistent State object to store and mutate its internal data.

10. Explain how using const on child widgets (where possible) inside a custom widget's build method contributes to performance.

    • Answer: When the parent widget rebuilds, any child widget marked with const will not be rebuilt. Flutter knows the constant widget is unchanged and reuses its corresponding element in the element tree.

6.b) Apply styling using themes and custom styles.

1. What is the purpose of the ThemeData class in Flutter?

   • Answer: It is the configuration object that holds the global visual properties (colors, typography, button styles, etc.) for the entire application, applied via the MaterialApp widget.

2. How do you define a consistent color scheme for the entire application (e.g., primary color, accent color)?

   • Answer: By setting the colorScheme property within the ThemeData object in your MaterialApp.

3. How can a widget deep in the tree access the globally defined primary color of the application?

   • Answer: By using Theme.of(context).primaryColor or Theme.of(context).colorScheme.primary.

4. If a widget needs a specific style different from the main app theme (e.g., a red text on one screen), how do you override the theme locally?

   • Answer: By wrapping that specific widget (or a sub-tree) in a Theme widget and providing a new, modified ThemeData to its data property.

5. Explain the significance of the textTheme property in ThemeData.

   • Answer: textTheme defines a set of standard font styles (e.g., headlineLarge, bodyMedium, labelSmall) used consistently across the application, making typography easier to manage.

6. What is the difference between a system-defined color and a custom color swatch (e.g., using MaterialColor)?

   • Answer: A system-defined color (like Colors.red) is a single color value. A MaterialColor is a swatch that contains a base color and several shades of that color (from 50 to 900) for hierarchical use in the UI.

7. If you want all TextButtons in your app to have a specific foreground color, which property in ThemeData do you modify?

   • Answer: The textButtonTheme property (which takes a TextButtonThemeData object).

8. How does the InheritedWidget class enable the theme to be accessible across the entire widget tree?

   • Answer: The Theme widget internally uses an InheritedWidget to efficiently share the ThemeData object down the tree. Any widget using Theme.of(context) automatically establishes a dependency on this inherited data.

9. What is the role of the brightness property in ThemeData?

   • Answer: It specifies whether the overall theme is dark or light (Brightness.light or Brightness.dark), which affects the default values of various system widgets (e.g., the default AppBar color).

10. What is the most concise way to merge the current theme's properties with a few local overrides for a sub-tree?

    • Answer: Use the copyWith() method on the existing ThemeData object: Theme.of(context).copyWith(primaryColor: Colors.teal).

7. Forms and Validation

7.a) Design a form with various input fields.

1. Which widget is the primary widget for handling a single line of user text input in a non-form context?

   • Answer: The TextField widget.

2. How can you read or control the text entered into a TextField programmatically?

   • Answer: By creating and assigning a TextEditingController object to the controller property of the TextField.

3. What is the purpose of the decoration property in a TextField?

   • Answer: It defines the visual embellishments around the input field, using the InputDecoration widget for things like labelText, hintText, icons, and borders.

4. How do you configure a TextField to only accept numbers and show the numeric keyboard?

   • Answer: By setting the keyboardType property to TextInputType.number.

5. What is the function of the obscureText property, and when is it typically set to true?

   • Answer: It hides the text being entered, usually replacing it with dots or asterisks. It is set to true for password fields.

6. How can you limit the maximum number of characters a user can type into a TextField?

   • Answer: By setting the maxLength property.

7. What is the difference between hintText and labelText in InputDecoration?

   • Answer: hintText is displayed inside the field when it is empty. labelText is displayed above the field when focused, or inside the field when unfocused (and empty), acting as a title.

8. How do you define a callback function that is executed every time the text in a field changes?

   • Answer: By using the onChanged property of the TextField.

9. What is the name of the main widget used to group multiple input fields and manage the overall validation state?

   • Answer: The Form widget.

10. How can you automatically shift the UI up when the soft keyboard appears to prevent input fields from being covered?

    • Answer: By ensuring the parent Scaffold widget's resizeToAvoidBottomInset property is set to true (which is the default).

7.b) Implement form validation and error handling.

1. How do you access and control the state of the parent Form widget (e.g., to call a validation method)?

   • Answer: By creating a GlobalKey<FormState> and assigning it to the key property of the Form widget.

2. Which widget is specifically designed for text input within a Form that supports built-in validation?

   • Answer: The TextFormField widget.

3. Explain the purpose of the validator property in a TextFormField.

   • Answer: It takes a function that receives the current field value. If the value is valid, the function must return null. If invalid, it must return an error string (which Flutter then displays below the field).

4. What method must be called to trigger all validation checks within a Form?

   • Answer: The validate() method on the form's current state: _formKey.currentState!.validate().

5. How does the TextFormField display the error message returned by its validator function?

   • Answer: It automatically displays the error string below the input field and changes the color of the field's label and border to the theme's error color.

6. When should you use the onSaved callback in a TextFormField?

   • Answer: It is called when you manually call _formKey.currentState!.save(). It's used to persist the field's final, validated value to a variable or state object.

7. How do you manually reset the values of all fields within a Form?

   • Answer: By calling the reset() method on the form's current state: _formKey.currentState!.reset().

8. Describe a simple validation rule you could implement for a required email field.

   • Answer: Check if the input string is null or empty: if (value == null || value.isEmpty) return 'Email is required';. You might also add a regex check for a valid email format.

9. What happens to the form fields and the UI if you call _formKey.currentState!.validate() and some fields are invalid?

   • Answer: The method returns false, and the error messages for all invalid fields are immediately displayed on the screen.

10. How do you pass the value of a valid form field to an external object for processing (e.g., submitting the form to an API)?

    • Answer: You call _formKey.currentState!.save(), which triggers the onSaved callback for every field, where you store the value. Then, you use those stored values for the API call.

8. Lists and Scrolling

8.a) Create a scrollable List Widget in Form & Add items to it.

1. What is the main drawback of using a simple Column inside a SingleChildScrollView for a list with 100+ items?

   • Answer: A Column and SingleChildScrollView will build and render all 100+ widgets immediately, consuming excessive memory and causing slow initial load times, as it lacks lazy loading.

2. What is the most memory-efficient way to create a list of a large, potentially infinite number of items?

   • Answer: By using the ListView.builder constructor.

3. Explain the concept of "lazy loading" as implemented by ListView.builder.

   • Answer: ListView.builder only builds the widgets that are currently visible on the screen, plus a small buffer before and after. This saves memory and CPU time, as widgets only exist when they are needed.

4. When creating a list of a known, fixed number of items (e.g., 5 items), which ListView constructor is the simplest to use?

   • Answer: The default ListView constructor (which takes a list of widgets as its children property).

5. If you place a ListView directly inside a Column, what error will you likely encounter, and why?

   • Answer: A "Vertical viewport was given an unbounded height" error. This is because the ListView tries to take up infinite height, but the Column's vertical constraints are also unbounded. The ListView must be wrapped in an Expanded widget.

6. How do you reverse the scroll direction of a ListView?

   • Answer: By setting the reverse property to true.

7. What is the function of the itemCount property in ListView.builder?

   • Answer: It specifies the total number of items the list contains, allowing the builder to correctly calculate the scroll extent and range.

8. Which widget is a common choice for representing a single row in a ListView because it provides built-in structure for leading/trailing icons and titles?

   • Answer: The ListTile widget.

9. If you want to create a two-dimensional, scrollable grid of widgets, which specialized ListView equivalent should you use?

   • Answer: The GridView widget (or GridView.builder).

10. What is the significance of the ScrollController?

    • Answer: It allows you to programmatically control the scroll view, such as jumping to a specific position, checking the current offset, or listening for scroll events.

8.b) Implement the List View & Display the selected item in the prompt window.

1. How do you make an item in a ListView (or a ListTile) clickable to respond to a user tap?

   • Answer: By wrapping the widget in a GestureDetector or InkWell, and implementing the onTap callback.

2. In a ListTile, how do you display a small image on the left side and a descriptive arrow on the right side?

   • Answer: The image goes in the leading property, and the arrow (e.g., Icon(Icons.arrow_forward)) goes in the trailing property.

3. When a list item is tapped, what is the best widget to show a small, temporary informational message at the bottom of the screen?

   • Answer: A SnackBar, typically shown via ScaffoldMessenger.of(context).showSnackBar().

4. If you are displaying a list of model objects (e.g., List<User>), how do you pass the specific User object to the onTap handler?

   • Answer: Inside the ListView.builder's itemBuilder, you can access the object using the index: final user = userList[index]; and use it inside the onTap closure.

5. How can you add a visible line separator between each item in a list using a standard ListView constructor?

   • Answer: By using the ListView.separated constructor, which provides an separatorBuilder function to build a widget (like a Divider) between items.

6. What is the purpose of the key property if you are creating a list of widgets that can be rearranged (reordered)?

   • Answer: A unique key must be assigned to each list item to allow Flutter to correctly identify and maintain the state of each item (e.g., a checkbox state) when the order changes.

7. If you want the user to be able to pull down on the list to refresh the data, which widget should you wrap the ListView in?

   • Answer: The RefreshIndicator widget.

8. In the onTap of a list item, how do you show a persistent modal dialog window (like an alert)?

   • Answer: By calling the function showDialog() and providing a widget like AlertDialog for the content.

9. When using ListView.builder, what happens if you forget to set the itemCount property?

   • Answer: The list will assume an infinite number of items and try to build them as it scrolls, likely leading to an error or unexpected behavior.

10. Describe a scenario where you would use a GestureDetector instead of a simple InkWell for making a list item clickable.

    • Answer: Use GestureDetector when you need to detect more complex gestures like long press (onLongPress), double-tap, dragging, or specific movements, as InkWell is primarily for taps and visual ripple effects.

9. Animations

9.a) Add animations to UI elements using Flutter's animation framework.

1. Distinguish between an Explicit Animation and an Implicit Animation in Flutter.

   • Answer: Explicit Animations require a separate AnimationController and manual code to manage the animation's progress. Implicit Animations are simpler, driven by a StatefulWidget (e.g., AnimatedContainer) that automatically transitions when its properties change.

2. What is the role of the TickerProviderStateMixin?

   • Answer: It provides the Ticker needed by the AnimationController. A Ticker is responsible for telling the controller when to advance to the next frame (usually 60 times per second). It's typically added to a State class via with SingleTickerProviderStateMixin.

3. What is an AnimationController, and what three things does it allow you to control about an animation?

   • Answer: It is the object that manages the animation's progress. It controls the duration, starting/ending values, and the flow (e.g., forward(), reverse(), repeat()).

4. What does a Tween object represent in the animation process?

   • Answer: A Tween (short for "between") defines the range of the animated value (e.g., from 0.0 to 1.0 for opacity, or from 200 to 500 for a height).

5. What is the function of the addListener method on an Animation object?

   • Answer: It registers a callback function that is executed every time the animation's value changes, allowing you to manually call setState to rebuild the UI with the new animated value.

6. Which widget is typically used to simplify the process of rebuilding a UI in response to an Animation object's value changes, without requiring manual setState calls?

   • Answer: The AnimatedBuilder widget.

7. Explain the difference between using SingleTickerProviderStateMixin and TickerProviderStateMixin.

   • Answer: SingleTickerProviderStateMixin is used when a widget has only one AnimationController. TickerProviderStateMixin (without "Single") is used when a widget manages multiple AnimationControllers.

8. What is an "ease curve," and what object is used to apply it to an animation?

   • Answer: An ease curve (or Curve) defines the rate of change of an animation over time (e.g., accelerating, decelerating, bouncing). The CurvedAnimation class is used to apply a Curve to an AnimationController.

9. How do you create an animation that changes color from red to blue over two seconds?

   • Answer: By using a ColorTween (specifying begin: Colors.red, end: Colors.blue) and linking it to the AnimationController via the animate() method.

10. What are the four common status states of an AnimationController?

    • Answer: dismissed (at the start), forward (running to the end), reverse (running to the start), and completed (at the end).

9.b) Experiment with different types of animations (fade, slide, etc.).

1. Give an example of an Implicit Animation Widget that transitions between different heights and colors.

   • Answer: AnimatedContainer.

2. How would you create a simple fade-in/fade-out animation using an Explicit Animation widget?

   • Answer: By using the FadeTransition widget, passing it an Animation<double> object (often ranging from 0.0 to 1.0 for opacity).

3. To create a slide-out-of-view animation, which specific ...Transition widget would you use?

   • Answer: The SlideTransition widget.

4. What property must be changed to trigger the animation in an AnimatedOpacity widget?

   • Answer: The opacity property. When this property's value changes, the widget automatically animates the change over the specified duration.

5. If you need to change the size of a widget smoothly, which Implicit Animation widget is the simplest choice?

   • Answer: The AnimatedSize widget.

6. What is the primary use case for the Hero widget in animation?

   • Answer: To create a shared element transition animation, where a widget (like an image) appears to fly smoothly from one screen to the same location on the next screen during navigation.

7. Explain the Interval class in animation.

   • Answer: It allows you to define a segment of the total animation duration (e.g., 0.5 to 0.8) during which a specific part of a complex animation should run, ensuring different parts animate sequentially or staggered.

8. What is a Staggered Animation?

   • Answer: An animation composed of several smaller, sequential or overlapping animations, where different properties (e.g., opacity, size, position) animate at different times or rates using Intervals.

9. What is the function of the rotation property in a Transform.rotate widget, and what unit does it usually take for animation?

   • Answer: It applies a rotation to the child widget. It takes a double value representing the rotation in radians.

10. When using the AnimatedSize widget, what is the importance of the vsync property, and where does its value typically come from?

    • Answer: vsync receives the TickerProvider to control the animation's rate. Its value typically comes from the this reference of the State class that uses the TickerProviderStateMixin.

10. Data Fetching (API)

10.a) Fetch data from a REST API.

1. Which core Dart package is typically used for making HTTP requests (GET, POST, etc.)?

   • Answer: The dart:io package (for low-level access) or, more commonly, the external http package.

2. What is a Future in the context of an API call?

   • Answer: A Future is a Dart object that represents a potential value or error that will be available at some point in the future (i.e., when the API response is received).

3. What is the purpose of the await keyword when fetching data?

   • Answer: The await keyword pauses the execution of the async function until the Future (the API request) is complete and returns a value.

4. How do you convert the JSON response body received from an API into a Dart object (e.g., a Map)?

   • Answer: By using the jsonDecode() function from the dart:convert library.

5. Explain the difference between status codes 200, 404, and 500 in an API response.

   • Answer: 200 (OK): Request succeeded. 404 (Not Found): Client error, the requested resource does not exist. 500 (Internal Server Error): Server error, the server encountered an unexpected condition.

6. When defining a function to fetch data from an API, what keyword must you use in the function signature?

   • Answer: The async keyword.

7. What is "JSON serialization" (manual or automated) in the context of Dart model classes?

   • Answer: It's the process of mapping the keys and values from the JSON data structure (received as a Map) to the properties of a structured Dart class (the model).

8. How do you handle a network error (like "No Internet Connection") when using the http package?

   • Answer: By wrapping the API call in a try-catch block and catching specific exceptions like SocketException (for connection issues) or http.ClientException.

9. If an API call returns a list of JSON objects, what Dart type will jsonDecode() return?

   • Answer: It will return a List<dynamic> or List<Map<String, dynamic>>.

10. What is a better practice: putting the data fetching logic directly in the UI widget, or in a separate class?

    • Answer: It is better to put the logic in a separate Service or Repository class to achieve separation of concerns and make the code more testable.

10.b) Display the fetched data in a meaningful way in the UI.

1. Which widget is ideal for managing the three primary states (loading, error, data available) of an asynchronous operation like an API call?

   • Answer: The FutureBuilder<T> widget.

2. When using FutureBuilder, what does the snapshot object contain?

   • Answer: The current state of the Future. It contains properties like connectionState, hasData (boolean), hasError (boolean), and the actual data or error value.

3. How do you handle the "loading" state within the FutureBuilder's builder method?

   • Answer: By checking the snapshot.connectionState for ConnectionState.waiting and returning a widget like CircularProgressIndicator.

4. How do you check if the Future has completed successfully and contains data inside the FutureBuilder?

   • Answer: By checking if snapshot.hasData is true and optionally checking if snapshot.data is not null.

5. If the API returns a list of objects, which scrolling widget should you use to display this data efficiently inside the FutureBuilder's success branch?

   • Answer: ListView.builder (or GridView.builder), passing the fetched list's length to itemCount.

6. How do you handle the "error" state within the FutureBuilder's builder method?

   • Answer: By checking if snapshot.hasError is true and displaying a relevant error message, often using Text(snapshot.error.toString()).

7. What is the purpose of the initialData property in FutureBuilder?

   • Answer: It provides an initial value for the snapshot's data before the Future completes. This allows the UI to render immediately with a default or cached value while waiting for the network response.

8. In a scenario where you use the Provider package for state management, why might you not use a FutureBuilder in the UI?

   • Answer: Because the Provider (or similar state management solutions) handles the asynchronous state internally (in the model/controller) and exposes only the ready data and status flags to the UI, allowing the UI to use regular StatelessWidgets and Consumers.

9. When designing the UI for data display, why should you use optional chaining (?.) when accessing properties of the fetched data?

   • Answer: To safely handle cases where the data might still be null while the FutureBuilder is settling, or to comply with Dart's null safety rules if the model properties are nullable.

10. If you have multiple API calls that must all complete before the UI can render, how can you combine their execution into a single Future for a single FutureBuilder?

    • Answer: By using Future.wait([future1, future2, ...]), which returns a single Future that completes only when all the provided futures have completed.