# Time Picker Widget

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2Fgit-blob-5db60a72703b1d3f68ad20e51b958f9a7e469c60%2Ftime-picker.gif?alt=media" alt="TimePicker"><figcaption><p>TimePicker</p></figcaption></figure>

To utilize an Time Picker in your Flutter UI, adhere to these steps:

**1.** Drag the Time Picker widget from the Insert menu and drop it into your desired location within your UI.

**2.** Customize the appearance and behavior of the Time Picker by adjusting its properties in the editing section on the right.

### Components of TimePicker Widget

| Component                   | Description                                                                                                                                              |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Align Icons**             | Click icons or use shortcut keys to align the TimePicker Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align TimePicker Widget. |
| **Postitions**              | Set TimePicker Widget positions on the X and Y axis of the mobile canvas.                                                                                |
| **Margin**                  | Adjust TimePicker Widget margin from top, bottom, left, or right by specifying margin values.                                                            |
| **TimePicker Show**         | Show the preview of the clock for selecting the time.                                                                                                    |
| **TimePicker Initial Time** | Set the time that you want to show initially.                                                                                                            |
| **Fill color**              | Give color to the TimePicker widget.                                                                                                                     |
| **Border Color**            | Choose a color to set the widget border color. Adjust the border color from inside, outside, or center of the widget by selecting it from the drop-down. |
| **Border Width**            | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes.                                         |
| **Shadow**                  | Apply a shadow effect to the widget by selecting either a normal or inner shadow type.                                                                   |
| **Visible**                 | By checking the checkbox the entire selected TimePicker Widget will be hidden.                                                                           |

If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303)

## Music to go with.

{% embed url="<https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878>" %}
Lofi music
{% endembed %}