Flutter-Widgets.md

@@ -20,6 +20,35 @@ These flex widets lets you create flexible layouts in both the horizontal `Row`
 
 The `Container` widget lets you create a rectangular visual element. Containers can be decorated with a `BoxDecoration`, such as a background, a border, or a shadow. They can also have margins, padding, and constraints applied to its size
 
+## SnackBar
+
+A `SnackBar` is a lightweight widget used to temporarily display messages at the bottom of the screen. It is typically used to provide feedback or alert the user to a specific event or action.
+
+To display a SnackBar, use `ScaffoldMessenger.of(context).showSnackBar()`. ScaffoldMessager is a widget that provides access to the Scaffold widget that is closest to the widget tree. By passing in context into the of() method, the Scaffold widget that contains the current widget is retrived. `showSnackBar()` is then called to display the SnackBar at the bottom of the screen. showSnackBar takes a SnackBar as a parameter and displays it at the bottom of the Scaffold. Here is snippet of how it's being used in `create_player_page.dart`:
+```dart
+ScaffoldMessenger.of(context).showSnackBar(
+  SnackBar(
+	content: NotificationCard(
+		  cardTitle: state.response.success ? "Success" : "Error",
+		  description: state.response.description,
+		  success: state.response.success
+	),
+	duration: const Duration(seconds: 3),
+	behavior: SnackBarBehavior.floating,
+	padding: EdgeInsets.zero
+  ),
+);
+```
+In this snippet, the SnackBar is added to the Scaffold to display a message. NotificationCard is a custom widget that takes in 2 required parameters, cardTitle and description, along with an optional parameter 'success'. You can see the widget in `game_manager\lib\pages\shared\widgets\notification_card.dart`.
+
+Inside of the NotificationCard constructor, we check the success boolean from the response. If success is true, we set the card title to "Success". Else, we set it to "Error". Next, we set the description of the widget to the description from the response and set the success boolean to the boolean from the response.
+
+The `duration` defines how long the SnackBar should stay on screen for before disappearing. In this case, it is displayed for 3 seconds before disappearing.
+
+The `behavior` property is used to set the behavior of the SnackBar. When it is set to floating, the notification will float above the bottom of the screen and will not be attached to the Scaffold.
+
+The `padding` property is used to set the padding around the `SnackBar` content.
+
 ### Scaffold
 
 Perhaps the most common widget, the `Scaffold` widget provides a basic structure for building material design-style apps. A Scaffold typically contains a number of commonly used UI elements, such as an app bar, a bottom navigation bar, and a floating action button. The scaffold acts as a container for the primary visual elements of a screen, allowing developers to easily organize and layout their content