Get users First Letter of First Name in Flutter with Firebase? - firebase

Question

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
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.

Answer 1

The below code for a Stateless widget will create an Icon according to the UI you showed for reference.
It takes in the parameters:
firstName - The name of the person as String.
backgroundColor- The background colour for the circle enclosing the first letter.
textColor- The colour for the first letter
class NameIcon extends StatelessWidget {
final String firstName;
final Color backgroundColor;
final Color textColor;
const NameIcon(
{Key key, #required this.firstName, this.backgroundColor= Colors.white, this.textColor= Colors.black,})
: super(key: key);
String get firstLetter => this.firstName.substring(0, 1).toUpperCase();
#override
Widget build(BuildContext context) {
return FittedBox(
fit: BoxFit.contain,
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: this.backgroundColor,
border: Border.all(color: Colors.black, width: 0.5),
),
padding: EdgeInsets.all(8.0),
child: Text(this.firstLetter, style: TextStyle(color: this.textColor)),
),
);
}
}
The widget will automatically fit the size and height of the parent widget or a Container, if you want to specify the values explicitly then remove the FittedBox widget and then specify the height and width of the container.
OutPut:
Whole Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
body: Center(
child: Container(
height: 150.0,
width: 300.0,
child: NameIcon(
firstName: 'Hello',
),
),
),
);
}
}
class NameIcon extends StatelessWidget {
final String firstName;
final Color backgroundColor;
final Color textColor;
const NameIcon(
{Key key, #required this.firstName, this.backgroundColor= Colors.white, this.textColor= Colors.black,})
: super(key: key);
String get firstLetter => this.firstName.substring(0, 1).toUpperCase();
#override
Widget build(BuildContext context) {
return FittedBox(
fit: BoxFit.contain,
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: this.backgroundColor,
border: Border.all(color: Colors.black, width: 0.5),
),
padding: EdgeInsets.all(8.0),
child: Text(this.firstLetter, style: TextStyle(color: this.textColor)),
),
);
}
}

Answer 2

FittedBox(
fit: BoxFit.contain,
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.yellow,
border: Border.all(color: Colors.black, width: 0.5),
),
padding: EdgeInsets.all(8.0),
child: BlocBuilder(
cubit: BlocProvider.of<UserBloc>(context),
builder: (context, User user) {
return Text(
(user == null || user.firstName == null)
? 'Welcome'
: '${user.firstName[0].toUpperCase()}',
style: TextStyle(
fontFamily: 'Helvetica Neue',
fontWeight: FontWeight.bold,
fontSize: 25,
color: const Color(0xff3a4759),
),
textAlign: TextAlign.left,
);
}),
),
),