Flutter Custom Fonts in Text widget. Text Style in Flutter. Tutorial for Beginners using Dart #2.3

Access 7000+ courses for 60 days FREE: pluralsight.pxf.io/c/1291657/...
Beginners tutorial for Flutter apps. Learn how to style a Text and apply custom fonts to it and also make it Italic or Bold. Also, explore how to work in 'pubspec.yaml' file
Next Video: • Flutter Row, Column an...
Previous Video: • Flutter Container widg...
Codes for this video: bit.ly/2GsNnJg
Full Source code files: bit.ly/2NINczC .
.
Please donate and support my work
(If you think my free tutorials are better than paid ones :)
- Patreon: bit.ly/patreon-donate
- Paypal/Payoneer: [e-mail]
- UPI (only for India): smartherd@okaxis
:: If you want to develop a website or a mobile app, email me your requirement at [e-mail] :: Free demos provided beforehand ::
- Access my premium courses: bit.ly/sriyank-courses
Free Programming courses:
- Ruby Programming: bit.ly/smyt-r
- Dart Programming: bit.ly/smyt-d
- Kotlin Programming: bit.ly/smyt-k
- Java Programming: bit.ly/smyt-j
- Kotlin Coroutines: bit.ly/smyt-coru
Free Flutter course:
- Flutter App Development: bit.ly/2Rg7EFR
Free Android courses:
- Android using Kotlin: bit.ly/smyt-ka
- Android using Java: bit.ly/smyt-ja
- Android Material Design: bit.ly/2SMJqU6
- Android Jetpack Architecture: bit.ly/yt-j
- Android Multiple Screen Support: bit.ly/smyt-mss
- Android Retrofit: bit.ly/2Ee6GHn
More free programming courses:
- bit.ly/smy-list
Check out my website:
- bit.ly/smartherd
Let's get in touch! [Sriyank Siddhartha]
LinkedIn: bit.ly/sriyank-linkedin
Facebook: bit.ly/smartherd-facebook
Instagram: bit.ly/sriyank-instagram
Twitter: bit.ly/sriyank-twitter
Github: bit.ly/smartherd-github
--- Thank you for your love and support ---

[@MLEncyclo]

I love you, bro. For addition, I found that my font didn't work because of the spaces despite no error appeared. I solved it by aligning the "fonts:" right under the #. I hope it helps others.

[@asadullahehsan]

You are a really awesome person. Your tutorial is very informative, yet to the point. Keep it up. Your teaching style is wonderful.

[@MuhammadAfzal-om1wn]

I always feel some energy when you say "Perfect"

[@prabhatranjan2587]

awesome tutorials...perfect for me which i was looking for start flutter.

[@YasinIlhan61]

.your series is awesome!

[@latapatel2000]

"PERFECT".........Really it's Perfect learning.

[@JK92007]

its really a nice video......nice content....thanks bro...

[@nasirmehmood_]

i didn't understand why we need to be declare foneweight in pubspec.yaml since it is working correctly without declaring weight or style in yaml file. Please anybody help me

[@alihamrani8723]

You are the best! :D

[@midhunp8175]

Thanks for this video. How to create a flutter app to send messages to Facebook or WHATSAPP with different font styles. By using Advance sharing , I can send messages to WhatsApp without font style. Hopefully..

[@noelxxiv9382]

Hi how do you know which Raleway was running the Bold, the regular or light? Could you clarify @smartherd?

[@Ateyib]

hello, nice tutorial, but i have a question. whenever i make the font bigger(e.g fontSize: 144.0), the gap below and above the text also gets bigger. how do I avoid that if I want to place another widget directly below that text widget without any gap?

[@dholakiyaparth]

Perfect (y)

[@SandiriNikhil]

You can mention cmd+option+L (for Mac) & control+alt+L (Windows) for code formatting which helps us avoid adding/deleting spaces in pubspec.yaml

[@karthickrajalearn]

In 4m 35 Sec Thanks for Good Info Font Weights varries from 100 to 900 In 6m 07sec Great Tip Perfect Indentation Thanks for Mentioning 👍👍👍👍 8m 15sec Thanks for giving instructions for "Get Dependencies"

[@tanishq7046]

har bar joke marne ki koshish karte huye koi like nhi karta hehe

[@ujjwal4598]

Thanks a lot 👍❤️

[@eslamsalah832]

Thanks bro!

[@francescogavioli8358]

had to comment this line "uses-material-design: true" or it didn't execute, it's in pubspec.yaml ( it requested a key if the line wasn't commented ) Hope this helps who had my same issue

[@stephanyespinosa6279]

hello, i had a problem when i tied to run the code, i don know why, but i couldn't charge the image. i tried many times and in different projects but everytime y had the same misetake, can you help me?

[@ritheshjarvis4177]

Thanks man

[@ishanmadushanka3709]

thank you

[@aarushnagar3062]

Thanks for video. How to change background color of Text

[@MrNsaysHi]

inside the TextStyle use backgroundColor attribute, for example: Text ( "Lorem Text", style: TextStyle( backgroundColor: Colors.white, ), );

[@Reem-du7sd]

Can you add more than 2 fonts/"families" to .yaml?? Great video!

[@anningkyeireginald8453]

Yes you just have to copy from the family to the weight .it should not include the other family then you paste it at the end of another family

[@jigaryadav6150]

you can do all this in React Native by 5 min

[@itsahmed-dev]

Perfect

[@SandiriNikhil]

We need not add or delete spaces in pubspec.yaml. Just use cmd+option+L (Mac) or control+alt+L (Windows) to automatically setup indentation.

[@smartherd]

Thanks for the info.

[@sarthaksrivastava9025]

Actually I am working in VS code and there is nothing called directory in it. So, please give me an alternative.

[@Mr_me_only]

hello what's the shortcut to remove this # in pubspec.yaml, it's said but i didn't hear it well

[@michaeltolsma7717]

My font doesn't change besides the weight and italics. It looks nothing like how the Google Fonts shows.

[@chalapathinagavarmabhupath8432]

what happens if we use a weight that we didn't metioned in the pubspec.yml.

[@vrajdesai4299]

I am getting parameter format not correct error, but the app was working just fine few days back, please help me

[@ashwanisingh7349]

Please share the link for raleway font style I am not able to find it in Google font

[@adityatamang6016]

NEED HELP !! My pubspec.yaml is different than yours . It is not showing information about my projects or any types of FONTS to edit Plez help

[@manishakatiyar7816]

YAML (a recursive acronym for "YAML Ain't Markup Language") ***

[@knotdeveloper7433]

niceee

[@kusumsingh7908]

Error: unable to locate asset entry in pubspec.yaml: "fonts/Robot-Regular.ttf". Error building assets FAILURE: Build failed with an exception. How to solve this errror in this fonts

[@smartherd]

Compare your code with branch source code

[@OystaFX]

If you face an error with pubspec.yaml file alignment, make sure that the parent "font" folder has four(4) spaces before "- family: Raleway" declaration. Thank me later :)

[@nivyragavan6067]

fonts not changing sir.. plz do help

[@AgileGadgets]

I thought YAML stands for "Yet Another Markup Language". (shrug)

[@smartherd]

Oooo. Don't wry now u know

[@keshavmainali3687]

Ain't Markup Language

[@azammehmood3678]

Sir i have followed ur steps but .yaml file give error in lines, when i correct them then in another line, always give me error even that 2 space after the of each.plzz help me

[@zakariyamohamud8378]

The family determines the name of the font, which you use in the fontFamily property of a TextStyle object. The asset is a path to the font file, relative to the pubspec.yaml file. These files contain the outlines for the glyphs in the font. When building the app, these files are included in the app’s asset bundle. A single font can reference many different files with different outline weights and styles:

[@mahaarjun9640]

"Error: unable to locate asset entry in pubspec.yaml: "fonts/Raleway-Regular.ttf". Error building assets Finished with error: Gradle task assembleDebug failed with exit code 1" What this error mean?

[@smartherd]

Do u have the font file in ur fonts folder? Kindly check.

[@mahaarjun9640]

@@smartherd yes i have did everything in the video still error persists

[@smartherd]

check source code for error

[@mahaarjun9640]

Anyways thank you for replying. Invalidate caches/restart helped me! . A good and nice tutorial thank you for this job.

[@wanasaaaaaa]

@@mahaarjun9640 السلام عليكم أختي مها .. أنا برضو عندي نفس المشكلة تبعك وياليت لو عرفتي الحل تفيديني وشكرا