Last active
June 22, 2022 02:41
-
-
Save branflake2267/927f0d8c48b09da709b9b8aa3e08ab8b to your computer and use it in GitHub Desktop.
Flutter fonts example use.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
const String words1 = "Almost before we knew it, we had left the ground."; | |
const String words2 = "A shining crescent far beneath the flying vessel."; | |
const String words3 = "A red flair silhouetted the jagged edge of a wing."; | |
const String words4 = "Mist enveloped the ship three hours out from port."; | |
void main() { | |
runApp(new MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return new MaterialApp( | |
title: 'Flutter Fonts', | |
theme: new ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: new FontsPage(), | |
); | |
} | |
} | |
class FontsPage extends StatefulWidget { | |
@override | |
_FontsPageState createState() => new _FontsPageState(); | |
} | |
class _FontsPageState extends State<FontsPage> { | |
@override | |
Widget build(BuildContext context) { | |
// Roboto - Included with Material Design | |
var robotoContainer = new Container( | |
child: new Column( | |
children: <Widget>[ | |
new Text( | |
"Roboto", | |
), | |
new Text( | |
words1, | |
textAlign: TextAlign.center, | |
style: new TextStyle( | |
fontFamily: "Roboto", | |
fontSize: 20.0, | |
), | |
), | |
], | |
), | |
margin: const EdgeInsets.all(10.0), | |
padding: const EdgeInsets.all(10.0), | |
decoration: new BoxDecoration( | |
color: Colors.grey.shade200, | |
borderRadius: new BorderRadius.all(new Radius.circular(5.0)), | |
), | |
); | |
// Rock Salt - https://fonts.google.com/specimen/Rock+Salt | |
var rockSaltContainer = new Container( | |
child: new Column( | |
children: <Widget>[ | |
new Text( | |
"Rock Salt", | |
), | |
new Text( | |
words2, | |
textAlign: TextAlign.center, | |
style: new TextStyle( | |
fontFamily: "Rock Salt", | |
fontSize: 17.0, | |
), | |
), | |
], | |
), | |
margin: const EdgeInsets.all(10.0), | |
padding: const EdgeInsets.all(10.0), | |
decoration: new BoxDecoration( | |
color: Colors.grey.shade200, | |
borderRadius: new BorderRadius.all(new Radius.circular(5.0)), | |
), | |
); | |
// VT323 - https://fonts.google.com/specimen/VT323 | |
var v2t323Container = new Container( | |
child: new Column( | |
children: <Widget>[ | |
new Text( | |
"VT323", | |
), | |
new Text( | |
words3, | |
textAlign: TextAlign.center, | |
style: new TextStyle( | |
fontFamily: "VT323", | |
fontSize: 25.0, | |
), | |
), | |
], | |
), | |
margin: const EdgeInsets.all(10.0), | |
padding: const EdgeInsets.all(10.0), | |
decoration: new BoxDecoration( | |
color: Colors.grey.shade200, | |
borderRadius: new BorderRadius.all(new Radius.circular(5.0)), | |
), | |
); | |
// https://fonts.google.com/specimen/Ewert | |
var ewertContainer = new Container( | |
child: new Column( | |
children: <Widget>[ | |
new Text( | |
"Ewert", | |
), | |
new Text( | |
words4, | |
textAlign: TextAlign.center, | |
style: new TextStyle( | |
fontFamily: "Ewert", | |
fontSize: 25.0, | |
), | |
), | |
], | |
), | |
margin: const EdgeInsets.all(10.0), | |
padding: const EdgeInsets.all(10.0), | |
decoration: new BoxDecoration( | |
color: Colors.grey.shade200, | |
borderRadius: new BorderRadius.all(new Radius.circular(5.0)), | |
), | |
); | |
// Material Icons font - included with Material Design | |
String icons = ""; | |
// https://material.io/icons/#ic_accessible | |
// accessible:  or 0xE914 or E914 | |
icons += "\u{E914}"; | |
// https://material.io/icons/#ic_error | |
// error:  or 0xE000 or E000 | |
icons += "\u{E000}"; | |
// https://material.io/icons/#ic_fingerprint | |
// fingerprint:  or 0xE90D or E90D | |
icons += "\u{E90D}"; | |
// https://material.io/icons/#ic_camera | |
// camera:  or 0xE3AF or E3AF | |
icons += "\u{E3AF}"; | |
// https://material.io/icons/#ic_palette | |
// palette:  or 0xE40A or E40A | |
icons += "\u{E40A}"; | |
// https://material.io/icons/#ic_tag_faces | |
// tag faces:  or 0xE420 or E420 | |
icons += "\u{E420}"; | |
// https://material.io/icons/#ic_directions_bike | |
// directions bike:  or 0xE52F or E52F | |
icons += "\u{E52F}"; | |
// https://material.io/icons/#ic_airline_seat_recline_extra | |
// airline seat recline extra:  or 0xE636 or E636 | |
icons += "\u{E636}"; | |
// https://material.io/icons/#ic_beach_access | |
// beach access:  or 0xEB3E or EB3E | |
icons += "\u{EB3E}"; | |
// https://material.io/icons/#ic_public | |
// public:  or 0xE80B or E80B | |
icons += "\u{E80B}"; | |
// https://material.io/icons/#ic_star | |
// star:  or 0xE838 or E838 | |
icons += "\u{E838}"; | |
var materialIconsContainer = new Container( | |
child: new Column( | |
children: <Widget>[ | |
new Text( | |
"Material Icons", | |
), | |
new Text( | |
icons, | |
textAlign: TextAlign.center, | |
style: new TextStyle( | |
inherit: false, | |
fontFamily: "MaterialIcons", | |
color: Colors.black, | |
fontStyle: FontStyle.normal, | |
fontSize: 25.0, | |
), | |
), | |
], | |
), | |
margin: const EdgeInsets.all(10.0), | |
padding: const EdgeInsets.all(10.0), | |
decoration: new BoxDecoration( | |
color: Colors.grey.shade200, | |
borderRadius: new BorderRadius.all(new Radius.circular(5.0)), | |
), | |
); | |
return new Scaffold( | |
appBar: new AppBar( | |
title: new Text("Fonts"), | |
), | |
body: new ListView( | |
children: <Widget>[ | |
robotoContainer, | |
rockSaltContainer, | |
v2t323Container, | |
ewertContainer, | |
materialIconsContainer, | |
], | |
), | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: flontser | |
description: A new Flutter project. | |
dependencies: | |
flutter: | |
sdk: flutter | |
# For information on the generic Dart part of this file, see the | |
# following page: https://www.dartlang.org/tools/pub/pubspec | |
# The following section is specific to Flutter. | |
flutter: | |
# The following line ensures that the Material Icons font is | |
# included with your application, so that you can use the icons in | |
# the Icons class. | |
uses-material-design: true | |
fonts: | |
- family: Rock Salt | |
fonts: | |
# https://fonts.google.com/specimen/Rock+Salt | |
- asset: fonts/RockSalt.ttf | |
- family: VT323 | |
fonts: | |
# https://fonts.google.com/specimen/VT323 | |
- asset: fonts/VT323-Regular.ttf | |
- family: Ewert | |
fonts: | |
# https://fonts.google.com/specimen/Ewert | |
- asset: fonts/Ewert-Regular.ttf | |
This might have been probably solved by now, but do check if you have downloaded and put the font files in the right directory, either "yourappname/fonts" or "yourappname/assets"
Also same issue happened with me, and it was because I had not written the names of the files properly and of the ones I wanted to use.
Do refer this https://flutter.dev/docs/cookbook/design/fonts.
Lemme know if this doesn't solve the issue, I am happy to help anyone
How to use font AvenirNext on iOS ? This font is default supported by iOS.
This my tried not work:
fontFamily: 'AvenirNext',
fontFamily: 'AvenirNext-Regular',
How to use font AvenirNext on iOS ? This font is default supported by iOS.
This my tried not work:fontFamily: 'AvenirNext', fontFamily: 'AvenirNext-Regular',
fontFamily: 'Avenir Next'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When i am write Flutter Run command it shows up this error :
Error: unable to locate asset entry in pubspec.yaml: "fonts/VT323-Regular.ttf".
Error building assets
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done 6,2s
Gradle task assembleDebug failed with exit code 1
somebody know the solution?