Everything in Flutter is a widget. Every component of the UI is made from a widget. Widgets are used to display Ui elements, such as text, buttons, image and more complex elements like lists and forms.
Everything in Flutter is a widget. Every component of the UI is made from a widget. Widgets are used to display UI elements, such as text, buttons, images and more complex elements like lists and forms.
In Flutter, a widget is a class that represents a visual element in the user interface. Widgets can be nested to create more complex layouts, and they can be customized and styled with various properties and parameters.
In Flutter, a widget is a class that represents a visual element in the user interface. Widgets can be nested to create more complex layouts, and they can be customized and styled with various properties and parameters.
...
@@ -22,7 +22,7 @@ To determine if a widget needs the `const` keyword, think "does the widget chang
...
@@ -22,7 +22,7 @@ To determine if a widget needs the `const` keyword, think "does the widget chang
The `Text` widget lets you create stylized text for your application. Example:
The `Text` widget lets you create stylized text for your application. Example:
```dart
```dart
Test(
Text(
"Hello, world",
"Hello, world",
textAlign:TextAlign.center,
textAlign:TextAlign.center,
style:constTextStyle(fontWeight:FontWeight.bold),
style:constTextStyle(fontWeight:FontWeight.bold),
...
@@ -31,7 +31,7 @@ Test(
...
@@ -31,7 +31,7 @@ Test(
### Row / Column
### Row / Column
These flex widets lets you create flexible layouts in both the horizontal `Row` and vertical `Column` directions. The design of these are based on the web's flexbox layout model.
These flex widgets lets you create flexible layouts in both the horizontal (Row) and vertical (Column) directions. The design of these are based on the web's flexbox layout model.
Example:
Example:
```dart
```dart
...
@@ -47,7 +47,7 @@ Row(
...
@@ -47,7 +47,7 @@ Row(
```
```
In this example, a person icon and the text "username" is displayed, with a small separator placed between them.
In this example, a person icon and the text "username" is displayed, with a small separator placed between them.
A `Column` works in a similar fashion but instead of placing items side by side, items go top to bottom.
A `Column` works in a similar fashion but instead of placing items side by side, items go on top of each other.
### Container
### Container
...
@@ -57,7 +57,7 @@ The `Container` widget lets you create a rectangular visual element. Containers
...
@@ -57,7 +57,7 @@ The `Container` widget lets you create a rectangular visual element. Containers
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.
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`:
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 the context into the of() method, the Scaffold widget that contains the current widget is retrieved. `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`:
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`.
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 [here](https://gitlab.engr.ship.edu/merlin/freshmanrpgsuite/-/blob/main/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.
Inside of the NotificationCard constructor, we check the success boolean from the response. If success is true, cardTitle is set to "Success". Else, cardTitle is 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 `duration`property defines how long the SnackBar should stay on the screen 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 `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. Aside from floating, the behavior can also be set to `SnackBarBehavior.fixed`. When the behavior is set to fix, the SnackBar will be positioned at the bottom of the screen and take up the entire width of the screen. It is fixed in place and does not move or change position, even if the user scrolls the page.
The `padding` property is used to set the padding around the `SnackBar` content.
The `padding` property is used to set the padding around the `SnackBar` content.