Skip to content

Widgets

This section provides an explanation of the basic widgets provided by Fireship.

@TODO @thruthesky Refer to the pub.dev API reference and explain how to use the widgets listed there.

LabelField

It is designed to make TextField usage more convenient.

UpdateBirthday

To display and allow users to edit their birthdate information on pages like the profile editing page, you can use the UpdateBirthday widget. It allows you to provide labels and descriptions.

Example:

UpdateBirthday(
    label: '생년월일',
    description: '본인 인증에 사용되므로 올바른 생년/월/일 정보를 선택해 주세요.',
)

DisplayPhotos - Displaying Photos

When you pass an array of URLs, it displays the photos on the screen.

DisplayPhotos(urls: List<String>.from(v ?? []))

Displaying Users

To display users in tile format, you can use the UserTile. If you have a user model, you can display it like UserTile(user: UserModel). If you only have the user ID, you can call UserTile.fromUid(uid).

Displaying User Information

When displaying user information, including the logged-in user, you can use UserDoc.

UserDoc can be utilized in the following ways:

  • Fetching user documents and displaying them on the screen
  • Updating user documents in real-time to display them on the screen. Rebuilding if the value in the database changes.
  • Displaying a specific field from the user document on the screen
  • Updating a specific field from the user document in real-time to display it on the screen. Rebuilding if the value in the database changes.

Example

UserDoc(uid: myUid!, builder: (user) => Text(user.displayName)),
UserDoc.sync(uid: myUid!, builder: (user) => Text(user.displayName)),
UserDoc.field(uid: myUid!, field: 'displayName', builder: (v) => Text(v.toString())),
UserDoc.fieldSync(uid: myUid!, field: 'displayName',  builder: (v) => Text(v.toString())),

By the way, in cases where data is not displayed in real-time, you can cache the data in memory using cacheId and then quickly display it on the screen. This can be particularly useful in scenarios where you call setState to reduce screen flickering.

Example - Using cacheId

UserDisplayName(uid: uid, cacheId: 'chatRoom'),

User Cache

Sometimes, after displaying user information and calling setState, the screen may flicker. Or you may not prefer continuously accessing the database. In such cases, using cacheId allows you to cache the value (or field) of the user at that cacheId location in memory.

UserDoc(cacheId: 'home');

Alternatively,

UserDoc.field(
    cacheId: cacheId,
    uid: uid,
    field: Field.displayName,
    builder: (data) => Text(
      data
    ),
  );

/// UserDoc( ... ) /// UserDoc.sync(uid: user.uid, field: 'displayName', builder: (data, $) => Text(data)), /// UserDoc.field( ... ) /// UserDoc.fieldSync( ...)

Displaying User Name

Example

 UserDisplayName(
  uid: userUid,
  user: user,
),

Example - You can use sync for real-time updates.

 UserDisplayName.sync(
  uid: userUid,
  user: user,
),

Displaying User Photo

Example - Displaying User Photo

UserAvatar(uid: userUid, size: 100, radius: 40),

Example - Displaying User Photo with Real-time Updates

Displaying User Background Photo

You can simply display it as follows.

UserBackgroundImage(
  uid: userUid,
  user: user,
),

If real-time update is needed, you can do as follows.

UserBackgroundImage.sync(
  uid: userUid,
  user: user,
),

Displaying user status message

Example

UserStateMessage(uid: ..., user: user),

Example - Real-time update via sync

UserStateMessage.sync(
  uid: userUid,
  user: user,
),

Buttons

This section explains various types of buttons. If you don't like the design, you can copy the source code and modify it to suit your needs.

Like Button

LikeButton(uid: userUid, user: user),

Bookmark Button

BookmarkButton(uid: userUid),

Chat Button

ChatButton(uid: uid),

Report Button

The report button can be used to report users, posts, comments, and chats.

Example - Reporting a User

ReportButton(uid: userUid),

Block Button

BlockButton(uid: userUid),