I have got the user's first name fine, but I'm wondering how I can create an icon using the user's first letter in their name. See attached the UI.

See code below.

[User Profile UI](https://i.stack.imgur.com/5apBu.png)

**User Profile Page Screen**

```
BlocBuilder(
    cubit: BlocProvider.of<UserBloc>(context),
    builder: (context, User user) {
      return Text(
        (user == null || user.firstName == null)
            ? 'Welcome'
            : '${user.firstName}',
        style: TextStyle(
          fontFamily: 'Helvetica Neue',
          fontSize: 25,
          color: const Color(0xff3a4759),
        ),
        textAlign: TextAlign.left,
      );
    }),

```

Please note "UserBloc" is not relevant to the question so I haven't included it in this post.