Skip to content

Instantly share code, notes, and snippets.

@branflake2267
Last active June 22, 2022 02:41
Show Gist options
  • Save branflake2267/927f0d8c48b09da709b9b8aa3e08ab8b to your computer and use it in GitHub Desktop.
Save branflake2267/927f0d8c48b09da709b9b8aa3e08ab8b to your computer and use it in GitHub Desktop.
Flutter fonts example use.
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: &#xE914; or 0xE914 or E914
icons += "\u{E914}";
// https://material.io/icons/#ic_error
// error: &#xE000; or 0xE000 or E000
icons += "\u{E000}";
// https://material.io/icons/#ic_fingerprint
// fingerprint: &#xE90D; or 0xE90D or E90D
icons += "\u{E90D}";
// https://material.io/icons/#ic_camera
// camera: &#xE3AF; or 0xE3AF or E3AF
icons += "\u{E3AF}";
// https://material.io/icons/#ic_palette
// palette: &#xE40A; or 0xE40A or E40A
icons += "\u{E40A}";
// https://material.io/icons/#ic_tag_faces
// tag faces: &#xE420; or 0xE420 or E420
icons += "\u{E420}";
// https://material.io/icons/#ic_directions_bike
// directions bike: &#xE52F; or 0xE52F or E52F
icons += "\u{E52F}";
// https://material.io/icons/#ic_airline_seat_recline_extra
// airline seat recline extra: &#xE636; or 0xE636 or E636
icons += "\u{E636}";
// https://material.io/icons/#ic_beach_access
// beach access: &#xEB3E; or 0xEB3E or EB3E
icons += "\u{EB3E}";
// https://material.io/icons/#ic_public
// public: &#xE80B; or 0xE80B or E80B
icons += "\u{E80B}";
// https://material.io/icons/#ic_star
// star: &#xE838; 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,
],
),
);
}
}
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
@branflake2267
Copy link
Author

branflake2267 commented Jul 23, 2017

Example:
screen shot 2017-07-23 at 12 42 27 pm

iOS android
screen shot 2017-07-23 at 12 38 32 pm screen shot 2017-07-23 at 12 45 29 pm

@YussufElarif
Copy link

Nice one, really helped me out.

@bucketclan
Copy link

How do I use Bold Italic of Roboto family?

@mouazdk
Copy link

mouazdk commented Mar 22, 2019

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?

@palcodes
Copy link

palcodes commented Jun 8, 2019

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

@anhhtz
Copy link

anhhtz commented Jan 15, 2020

How to use font AvenirNext on iOS ? This font is default supported by iOS.
This my tried not work:

fontFamily: 'AvenirNext',
fontFamily: 'AvenirNext-Regular',

@wowangus
Copy link

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