Related
Here's my code:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF282B32),
body: Column(
children: <Widget>[
createRow(
context,
"https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
"GuildProtect is a powerful, baterries-included moderation bot for your *safe* server!"
),
createDivider(),
createRow(
context,
"https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256",
"This is a very beatiful (because it's pink) avatar of this shitty website creator, enjoy!"
)
]
)
);
}
Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25),
child: Image.network(imageUrl),
),
Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
),
),
),
]
);
}
Divider createDivider() {
return const Divider(
color: Color(0xFF131518),
indent: 30,
endIndent: 30,
thickness: 1,
height: 20,
);
}
}
Here's the result:
Result
It's becomes clear when looking at divider line near the images that space above divider and up to first image is not the same as space below divider and down to the second image.
I want to divider's height divide by 2 and take the same amount of space below and above divider. Any clue how to do it?
The padding is only applied on top
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25),
It would be better to include bottom as well.
padding: const EdgeInsets.only(left: 50, top: 25,bottom:25 ),
I will prefer wrapping the top row with padding widget in this case or using SizedBox/Padding around createDivider
I am trying and make a Listeview work, which is nested inside of column that is nested inside of a container in flutter. The container is supposed to be a dialog. I think the problem is that the container has no defined hight (it is supposed to adapt to the screen size). With the current code I get a bottom overflow. Maybe because of the padding of the container?
I tried differen variants with expanded, flexible and singlechildscrollview but I can't make it work. The standard tip, wrap the ListView with Expanded seems not to work.
Thanks for your help!
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dialog',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: Center(
child: Column(
children: [
MaCard(mitarbeiterName: "Name"),
CustomDialogBoxRow(
title: "Sturmtruppler",
descriptions: "wird noch weichen",
text: "text")
],
),
),
),
);
}
}
class Constants {
Constants._();
static const double padding = 20;
static const double avatarRadius = 100;
static const double buttonHight = 100;
}
class CustomDialogBoxRow extends StatefulWidget {
final String title, descriptions, text;
const CustomDialogBoxRow({
Key? key,
required this.title,
required this.descriptions,
required this.text,
}) : super(key: key);
#override
_CustomDialogBoxRowState createState() => _CustomDialogBoxRowState();
}
class _CustomDialogBoxRowState extends State<CustomDialogBoxRow> {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Constants.padding),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: contentBox(context),
);
}
contentBox(context) {
return Stack(
children: <Widget>[
Container(
constraints: const BoxConstraints(minWidth: 400, maxWidth: 800),
padding: const EdgeInsets.only(
left: Constants.padding,
right: Constants.padding,
bottom: Constants.padding),
margin: const EdgeInsets.only(top: Constants.avatarRadius),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(Constants.padding),
boxShadow: [
const BoxShadow(
color: const Color.fromARGB(255, 79, 73, 73),
offset: const Offset(0, 5),
blurRadius: 5),
]),
child: Column(
children: [
SizedBox(
height: Constants.avatarRadius,
child: Row(
children: [
const SizedBox(
child: const Placeholder(),
),
const Expanded(
child: Placeholder(),
),
],
),
),
SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 50,
child: Text("bla"),
),
SizedBox(
height: 50,
child: Text("bla"),
),
SizedBox(
height: 50,
child: Text("bla"),
),
SizedBox(
height: 50,
child: Text("bla"),
)
],
),
)
],
),
),
Positioned(
left: Constants.padding,
right: Constants.padding,
child: Stack(
children: [
Container(
child: Align(
alignment: Alignment.topLeft,
child: Container(
width: Constants.avatarRadius * 2,
height: Constants.avatarRadius * 2,
child: const CircleAvatar(
radius: Constants.avatarRadius * 2,
backgroundImage: AssetImage('assets/images/SBE.jpg'),
),
),
),
),
],
),
),
],
);
}
}
class MaCard extends StatefulWidget {
MaCard({
Key? key,
required this.mitarbeiterName,
}) : super(key: key);
final String mitarbeiterName;
#override
State<MaCard> createState() => _MaCardState();
}
class _MaCardState extends State<MaCard> {
#override
Widget build(BuildContext context) {
return Card(
child: InkWell(
onTap: () {
print("card taped");
/*showDialog(context: context, builder: (BuildContext context) {
return
})*/
showDialog(
context: context,
builder: (BuildContext context) {
return CustomDialogBoxRow(
title: "Stormtrouper",
descriptions: "Jojo, this is card",
text: "Roger Roger",
);
});
},
child: SizedBox(
height: Constants.buttonHight,
width: 300,
child: Center(child: Text(widget.mitarbeiterName)),
),
));
}
}
Here is picture of what it should look like. My wonderful handdrawing is supposed to be the scrollable content.
Goal
It would be better using LayoutBuilder to get parent constraints and size the inner elements. Also You need to wrap with Expaned to get available spaces for infinite size widget.
I will highly recommend to check this video from Flutter.
Changes are made
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dialog',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: Center(
child: Column(
children: [
MaCard(mitarbeiterName: "Name"),
Expanded( //here
child: CustomDialogBoxRow(
title: "Sturmtruppler",
descriptions: "wird noch weichen",
text: "text"),
)
],
),
),
),
);
}
}
And on contentBox
contentBox(context) {
return LayoutBuilder(builder: (context, constraints) {
print(constraints);
return SizedBox(
width: constraints.maxWidth,
height: constraints.maxHeight,
child: Stack(
children: <Widget>[
Container(
constraints: const BoxConstraints(minWidth: 400, maxWidth: 800),
padding: const EdgeInsets.only(
left: Constants.padding,
right: Constants.padding,
bottom: Constants.padding),
margin: const EdgeInsets.only(top: Constants.avatarRadius),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(Constants.padding),
boxShadow: const [
BoxShadow(
color: Color.fromARGB(255, 79, 73, 73),
offset: Offset(0, 5),
blurRadius: 5),
]),
child: Column(
children: [
SizedBox(
height: Constants.avatarRadius,
child: Row(
children: [
const Expanded(
child: const Placeholder(),
),
const Expanded(
child: Placeholder(),
),
],
),
),
Expanded(
// or sizedBOx ( constraints.maxHeight- Constants.avatarRadius,)
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 450,
child: Text("bla"),
),
SizedBox(
height: 50,
child: Text("bla"),
),
SizedBox(
height: 50,
child: Text("bla"),
),
SizedBox(
height: 50,
child: Text("bla"),
)
],
),
),
)
],
),
),
// Positioned(
// left: Constants.padding,
// right: Constants.padding,
// child: Stack(
// children: [
// Container(
// child: Align(
// alignment: Alignment.topLeft,
// child: Container(
// width: Constants.avatarRadius * 2,
// height: Constants.avatarRadius * 2,
// child: const CircleAvatar(
// radius: Constants.avatarRadius * 2,
// backgroundImage: AssetImage('assets/images/SBE.jpg'),
// ),
// ),
// ),
// ),
// ],
// ),
// ),
//
],
),
);
});
}
I'm trying to achieve the skeleton view as shown in the attachment but couldn't get it exactly like shown, i have tried Shimmer package, the problem is gradient or mask width is more. Kindly help with sample for to achieve the same.
Used the shimmer: ^2.0.0
My ListView
return Padding(
padding: const EdgeInsets.only(top: 16),
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return ShimmerItem();
},
itemCount: 10,
),
);
ShimmerItem Widget:
class ShimmerItem extends StatelessWidget {
const ShimmerItem({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: Theme.of(context).cardTheme.color,
child: Container(
margin: EdgeInsets.only(left: 16, bottom: 8, top: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(right: 32.0),
child: ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.9,
)),
Padding(
padding: const EdgeInsets.only(right: 32.0, top: 8),
child: ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.6,
),
),
Padding(
padding: const EdgeInsets.only(top: 16, bottom: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.4,
),
SizedBox(
width: 10,
),
ShimmerWidget.rectangular(
height: 16,
width: MediaQuery.of(context).size.width * 0.4,
),
],
),
),
],
),
),
);
}
}
ShimmerWidget Class:
class ShimmerWidget extends StatelessWidget {
final double width;
final double height;
final ShapeBorder shapeBorder;
const ShimmerWidget.rectangular(
{this.width = double.infinity, required this.height})
: this.shapeBorder = const RoundedRectangleBorder();
const ShimmerWidget.circular(
{this.width = double.infinity,
required this.height,
this.shapeBorder = const CircleBorder()});
#override
Widget build(BuildContext context) => Shimmer.fromColors(
baseColor:
ColorHelper.colorWithTransparency(AppColors.shimmer_bg_color,
100),
highlightColor:
ColorHelper.colorWithTransparency(AppColors.shimmer_color_dark,
20),
period: Duration(milliseconds: 1500),
child: Container(
width: width,
height: height,
decoration: ShapeDecoration(
color: AppColors.shimmer_bg_color,
shape: shapeBorder,
),
),
);
}
We can use LayoutBuilder for measurement, which is depending on parent size and perfect for this case.
To struct the same UI, I am just constructing the ShimmerItem widget, rest of widget will be same.
To get rounded border I am using ClipRRect with providing borderRadius.
Padding to control the sounded spacing and SizedBox to provide space on Column's children.
Used Row's mainAxisAlignment: MainAxisAlignment.spaceBetween,to separate last two shimmer widgets.
Resource about layout-basics.
class ShimmerItem extends StatelessWidget {
const ShimmerItem({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final _border = BorderRadius.circular(12);
final double _bHeight = 24;
return LayoutBuilder(
builder: (context, constraints) => Padding(
padding: const EdgeInsets.all(12.0), //outside the card
child: Container(
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
color: Colors.grey,
),
padding: const EdgeInsets.all(8), // inner padding
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//* top large two
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight,
width: constraints.maxWidth,
),
),
const SizedBox(height: 8),
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight * .75,
width: constraints.maxWidth,
),
),
const SizedBox(height: 8),
//3rd row
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight * .75,
width: constraints.maxWidth * 0.6,
),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight,
width: constraints.maxWidth * 0.4,
),
),
ClipRRect(
borderRadius: _border,
child: ShimmerWidget.rectangular(
height: _bHeight,
width: constraints.maxWidth * 0.4,
),
),
],
),
],
),
),
),
);
}
}
I am using demo color.
You need wrap all your child inside 1 bigger Shimmer wrapper to do that, not Shimmer on every small retangle.
I have project code for this in my laptop but im working afar, sorry.
I am trying to remove the excess space at the bottom of my widget but have not been able to do so. since I am using a page builder with a lot of text. I have tried adding the height manually but its not enough since i cant predict the size of the text.
import 'package:flutter/material.dart';
import 'package:flutter_lorem/flutter_lorem.dart';
import 'package:blink/core/widgets/widgets.dart';
import 'package:blink/feeds/feeds_details/widgets/widgets.dart';
import 'package:blink/gen/assets.gen.dart';
class FeedsDetailPage extends StatelessWidget {
const FeedsDetailPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const FeedsDetailView();
}
}
class FeedsDetailView extends StatelessWidget {
const FeedsDetailView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final String text1 = lorem(paragraphs: 2, words: 55);
final String text2 = lorem(paragraphs: 9, words: 500);
final String text3 = lorem(paragraphs: 10, words: 400);
final String text4 = lorem(paragraphs: 8, words: 2000);
final String text5 = lorem(paragraphs: 12, words: 500);
final textList = [
text3,
text4,
text5,
];
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
child: Stack(
children: [
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 368,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
//color: Colors.blue,
),
child: Assets.images.nightBuilding.image(
fit: BoxFit.cover,
),
),
),
),
Positioned(
top: 250,
left: 20,
child: Container(
height: 60,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Theme.of(context)
.backgroundColor
.computeLuminance() >
0.5
? Colors.black
: Colors.white,
),
child: AppMediumText(text: text1),
),
),
Positioned(
top: 334,
right: 33,
child: ElevatedButtonSmall(
onpressed: () {},
text: '',
useIcon: true,
icon: Icons.account_balance,
fizedSize: const Size(50, 50),
radius: 35,
),
),
Positioned(
top: 334,
right: 105,
child: ElevatedButtonSmall(
onpressed: () {},
text: '',
useIcon: true,
icon: Icons.text_fields,
fizedSize: const Size(50, 50),
radius: 35,
),
),
],
),
),
const SizedBox(height: 8),
Divider(
color: Theme.of(context).colorScheme.secondary,
indent: 50,
endIndent: 50,
),
Container(
width: 380,
height: double.maxFinite,
child: PageView.builder(
itemCount: textList.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Column(
children: [
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: SizedBox(
width: 350,
height: double.maxFinite,
child: AppSmallText(
text: text2.replaceFirst(
text2[0],
text2[0].toUpperCase(),
),
),
),
),
],
);
} else {
return Column(
children: [
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: SizedBox(
width: 350,
height: double.maxFinite,
child: AppSmallText(
text: textList[index - 1].replaceFirst(
textList[0],
textList[0].toUpperCase(),
),
),
),
),
],
);
}
},
),
)
],
),
),
);
}
}
Ignore this line it is just an excess line. I am trying to remove the excess space at the bottom of my widget but have not been able to do so. since I am using a page builder with a lot of text. I have tried adding the height manually but its not enough since i cant predict the size of the text.
You can try mainAxisSize: MainAxisSize.min in your columns and remove height: double.maxFinite:
class FeedsDetailPage extends StatelessWidget {
const FeedsDetailPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const FeedsDetailView();
}
}
class FeedsDetailView extends StatelessWidget {
const FeedsDetailView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final String text1 = lorem(paragraphs: 2, words: 55);
final String text2 = lorem(paragraphs: 9, words: 500);
final String text3 = lorem(paragraphs: 10, words: 400);
final String text4 = lorem(paragraphs: 8, words: 2000);
final String text5 = lorem(paragraphs: 12, words: 500);
final textList = [
text3,
text4,
text5,
];
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
child: Stack(
children: [
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 368,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
//color: Colors.blue,
),
child: Assets.images.nightBuilding.image(
fit: BoxFit.cover,
),
),
),
),
Positioned(
top: 250,
left: 20,
child: Container(
height: 60,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Theme.of(context)
.backgroundColor
.computeLuminance() >
0.5
? Colors.black
: Colors.white,
),
child: AppMediumText(text: text1),
),
),
Positioned(
top: 334,
right: 33,
child: ElevatedButtonSmall(
onpressed: () {},
text: '',
useIcon: true,
icon: Icons.account_balance,
fizedSize: const Size(50, 50),
radius: 35,
),
),
Positioned(
top: 334,
right: 105,
child: ElevatedButtonSmall(
onpressed: () {},
text: '',
useIcon: true,
icon: Icons.text_fields,
fizedSize: const Size(50, 50),
radius: 35,
),
),
],
),
),
const SizedBox(height: 8),
Divider(
color: Theme.of(context).colorScheme.secondary,
indent: 50,
endIndent: 50,
),
Container(
width: 380,
child: PageView.builder(
itemCount: textList.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: SizedBox(
width: 350,
child: AppSmallText(
text: text2.replaceFirst(
text2[0],
text2[0].toUpperCase(),
),
),
),
),
],
);
} else {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: SizedBox(
width: 350,
child: AppSmallText(
text: textList[index - 1].replaceFirst(
textList[0],
textList[0].toUpperCase(),
),
),
),
),
],
);
}
},
),
)
],
),
),
);
}
}
Int values for price will not show on the app in the ProgrammesCard. Which way is best to solve this?
import 'package:flutter/material.dart';
import '../constants.dart';
class ProgrammesCard extends StatelessWidget {
List<_ProgrammesCard> _programmes() {
return [
_ProgrammesCard(
title: 'PROGRAMMES',
price: 'FROM £30',
period: '6-WEEK \nPROGRAMME',
imageURL: 'assets/images/programmes/kane.png',
),
_ProgrammesCard(
title: 'INDIVIDUAL ZOOM',
price: 'FROM £15 \nPER PLAYER',
period: 'EACH SESSION',
imageURL: 'assets/images/programmes/traore.jpeg',
),
_ProgrammesCard(
title: 'GROUP ZOOM',
price: 'FROM £5 \nPER PLAYER',
period: 'EACH SESSION',
imageURL: 'assets/images/programmes/wolves.png',
),
_ProgrammesCard(
title: 'PRIMAL FLOW',
price: 'FROM £5 \nPER PLAYER',
period: 'EACH SESSION',
imageURL: 'assets/images/programmes/podence.jpeg',
),
];
}
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {},
child: Container(
height: 270,
width: double.infinity,
child: ListView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.fromLTRB(12, 5, 5, 5),
children: _programmes().map<Widget>((photo) {
return _ProgrammesGridItem(programmesCard: photo);
}).toList(),
),
),
);
}
}
class _ProgrammesCard {
_ProgrammesCard({
this.imageURL,
this.title,
this.price,
this.period,
});
final String imageURL;
final String title;
final String price;
final String period;
}
class _ProgrammesText extends StatelessWidget {
const _ProgrammesText(this.text, this.fontSize);
final String text;
final double fontSize;
#override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
fontFamily: 'Cocogoose',
fontSize: fontSize,
color: kProgrammeTextColor),
);
}
}
class _ProgrammesGridItem extends StatelessWidget {
_ProgrammesGridItem({Key key, #required this.programmesCard})
: super(key: key);
final _ProgrammesCard programmesCard;
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
child: Container(
decoration: BoxDecoration(
color: kClub2Color,
),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 4),
child: RotatedBox(
quarterTurns: 3,
child: _ProgrammesText(programmesCard.title, 14),
),
),
SizedBox(
height: 10,
width: 10,
),
Row(
children: [
Container(
height: 40,
child: VerticalDivider(
color: kProgrammeTextColor,
thickness: 1,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
_ProgrammesText(programmesCard.price, 10),
],
),
_ProgrammesText(programmesCard.period, 8),
],
),
),
],
),
],
),
Stack(
children: <Widget>[
Image.asset(
programmesCard.imageURL,
width: 200,
height: 250,
fit: BoxFit.cover,
),
],
),
],
),
),
),
),
],
);
}
}
enter image description here
Your code looks okay.
I'm pretty sure your problem here is linked with the custom font Cocogoose you're using.
Double check that you correctly integrated the *.ttf files containing the Numbers of the font and you should be fine !