In this tutorial we are going to add custom fonts to our app. Follow below steps:
1. Download fonts from fonts.google.com
2. Extract those fonts and add them creating a directory called fonts.
I have created a assets directory and fonts directory inside it to keep things separately(images, files , fonts nad etc).
3. Go to pubspec.yaml file and in bottom of the file add fonts section add specify family, fonts location and weights for different fonts as show in the image below:
Keep remember to add indentation and spaces properly otherwise you will get an error. And also before press package get save the file.
4. Go to the main.dart file and add a text widget with style property with value new TextStyle(). For our motivational quote app find the text widget where our quote lives and for the style property we have added TextStyle for text color.
For after the color property to add a font add the fontFamily property and it's accept value type of String, the font name. For the quote I have chosen 'Gaegu' font. nd I increased the font size a little bit. Default is 16.0.
new Text( 'Never give up Believe in yourself! Have faith in your abilities!
Without a humble but reasonable confidence in your own powers you
cannot be successful or happy.', style: new TextStyle( color: Colors.white, fontFamily: 'Gaegu', fontSize: 22.0, )),
You can specify font weight using below line(we only specified two fonts and weights in yaml file):
fontWeight: FontWeight.w500,
For our quote we don't need to specify font weight.
5. Now we need to add person name to the bottom right corner of our rectangle and we want
some padding for top of our person name. As shown in the image below:
To achieve that we have to use a multi child layout instead of Align widget. So, we can use column
widget and keep remember to add mainAxisAlignment property with MainAxisAlignment.min
this will get the minimum space for this column, as default it gets maximum space for the column.
Now code should look like below:
child: new Column( mainAxisSize: MainAxisSize.min, // keep remember to add this line children: <Widget>[ new Text( 'Never give up Believe in yourself! Have faith in your
abilities! Without a humble but reasonable confidence
in your own powers you cannot be successful or happy.', style: new TextStyle( color: Colors.white, fontFamily: 'Gaegu', fontSize: 22.0, )), //text
],
), //column
), //container
Now we can add text widget for person name.
6. Add another text widget below the first one with styles - I have used the 'Tajawal' fonts that we added earlier, font color is white, font size is 15.0, font weight is w300(remember? we added different font weight in yaml file. Check the image above). To separate letter a little bit I used letterSpace property with 0.5.
new Text('~ Norman Vincent Peale', style: new TextStyle( color: Colors.white, fontSize: 15.0, fontFamily: 'Tajawal', fontWeight: FontWeight.w300, letterSpacing: 0.5, )),
Now, this is still not in the bottom left corner and there is no space between quote and person name. To achieve that, we can wrap above text widget with a Container widget. Because Container widget allow us to easily position its child. and add padding to it. Now code should look like below:
new Container( alignment: Alignment.bottomRight, padding: const EdgeInsets.only(top: 10.0), child: new Text('~ Norman Vincent Peale', style: new TextStyle( color: Colors.white, fontSize: 15.0, fontFamily: 'Tajawal', fontWeight: FontWeight.w300, letterSpacing: 0.5, )), ),
alignment: Alignment.bottomRight, // to align text widget
padding: const EdgeInsets.only(top: 10.0), // I only need padding
for top of the name
Complete code should look like below:
So, in the next tutorial, I am going to show you how to change our flutter app icon. So stay tuned with SL Coder - Ego with Coding. Also you can watch my video.
No comments:
Post a Comment