Flutter Tutorial - Responsive UI Text Layout - Auto Size Text

Learn to create responsive text layouts for Flutter mobile & web with Flutter Auto Size Text.
Click here to Subscribe to Johannes Milke: kzbin.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/auto...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Quiz App UI Tutorial: • Flutter Tutorial - 1/2...
Shop UI Tutorial: • Flutter Tutorial - 1/3...
Todo App UI Tutorial: • Flutter Tutorial - 1/2...
Tinder Dating App UI Tutorial: • Flutter Tutorial - Tin...
Fitness App UI Tutorial: • Flutter Tutorial - 1/2...
Social App UI Tutorial: • Flutter Tutorial - Soc...
App Bar Tutorial: • Flutter Tutorial - App...
Search App Bar Tutorial: • Flutter Tutorial - Sea...
TextField Tutorial: • Flutter Tutorial - Tex...
TextFormField & Forms Tutorial: • Flutter Tutorial - How...
Rich Text Tutorial: • Flutter Tutorial - Ric...
Buttons 2.0 Tutorial: • Flutter Tutorial - New...
Buttons 2.0 For Web Tutorial: • Flutter Tutorial - New...
TIMELINE
0:00 Introduction Auto Size Text
0:28 Not Responsive Text
1:08 Basic Responsive Text
2:06 Max Lines
3:39 Minimum + Maximum Font Sizes
4:14 Overflow Replacement
5:50 Preset Font Size
8:29 Step Granularity
10:31 Auto Size Group
12:01 Responsive Rich Text
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/autosize_text_example Quiz App UI Tutorial: kzbin.info/www/bejne/nYTZlWCfZa-Gqbc Shop UI Tutorial: kzbin.info/www/bejne/eYK9o2B9jcqSlbs Todo App UI Tutorial: kzbin.info/www/bejne/oX-cipmaacuoZpY Tinder Dating App UI Tutorial: kzbin.info/www/bejne/rGLaoJmepNqneM0 Fitness App UI Tutorial: kzbin.info/www/bejne/any0XpmVa75qppo Social App UI Tutorial: kzbin.info/www/bejne/hqengJqFmbqaobc App Bar Tutorial: kzbin.info/www/bejne/mnmld2d_f7-pfs0 Search App Bar Tutorial: kzbin.info/www/bejne/iJKkdHStq79pZ6c TextField Tutorial: kzbin.info/www/bejne/eWbLe3yBeLmlrM0 TextFormField & Forms Tutorial: kzbin.info/www/bejne/aKPRZIuYd86dr5Y Rich Text Tutorial: kzbin.info/www/bejne/gp6mnZR3aLB2e6c Buttons 2.0 Tutorial: kzbin.info/www/bejne/r6XPdX6Ad92KlaM Buttons 2.0 For Web Tutorial: kzbin.info/www/bejne/jGKop6ZmZZWsrJo

[@brucevang-vr]

Thank you for this tutorial. Nobody on youtube really talking about Responstive UI Text in Flutter

[@blueice1364]

Really appreciate your way of teaching. Thanks.

[@vinothvino1275]

Thanks for the tutorial! Keep doing it

[@pault54]

Wow very comprehensive summary of the topic,

[@kyrieirving6301]

Thank you for sharing the package!

[@HeyFlutter]

You are welcome, Ömer Önder 😊

[@coraleenamarie5869]

Thank you!!

[@yousefzk22]

keep going man wow thanks,

[@shavezhameed8866]

Great Tutorial! Do we have something like this for web apps?

[@thazeroword646]

Very nice useful video

[@h3w45]

thank you

[@rabbihossen9734]

Great 🧡

[@armanlaalfam3406]

Thank's you

[@thushankalana4940]

Thank you so much Sir ❤️❤️❤️🙏🙏🙏

[@HeyFlutter]

You’re most welcome, @thushankalana4940! 🙂

[@tranminhson2569]

Thank you so much

[@HeyFlutter]

You're most welcome, Tran Minh! 🙂

[@capungfly5352]

Next responsive navbar 😁

[@marcocharo7524]

super

[@jonacempelule9876]

I want to use the "autoSizeText" widget for responsive texts yeah. But the issue is that I use "Linkwell" as my text widget, (it detects urls)... Was wondering if it's possible to use 2 text widgets?, Is it possible to wrap a Text Widget with another?

[@kevinlee9028]

Hey Johannes, was wondering if you have a tutorial on setting text font to have min and max font size for accessiblity?

[@HeyFlutter]

Thank You Kevin Lee! Follow this link: stackoverflow.com/questions/59143443/how-to-make-flutter-app-font-size-independent-from-device-settings I hope you will get your answer 🙂

[@fortechknowledge8172]

great video

[@HeyFlutter]

Thank you, Fortech Knowledge! 🙂

[@kamil_supabase_enjoyer]

This package is amazing. I wonder why author updated it last time 17 months ago

[@HeyFlutter]

Glad you liked it, @tananga_flutter_supabase 😀

[@faizulla5838]

Молодец!!! 👌😎

[@HeyFlutter]

Thank you, @faizulla5838! 🙂

[@nativeworld0]

is maxLines is a compulsion parameter to make this auto_size_text package to work?? is there any way without using maxlines?

[@HeyFlutter]

Yes @nativeworld0 its required sort of because AutoSize text use it to resize it underneath.

[@raheelahmad7256]

How I can know adjusted font size programmatically. This is because I'm converting an AutoSizeText widget into a PDF Text widget, and I need to specify the exact font size after resizing.

[@HeyFlutter]

Thanks for the idea @raheelahmad7256 😀, i have added it in my list of future videos

[@Allinone...786]

If we give fontsize in MediaQuery.of(context).size.width * (% of device) than it's ok?

[@HeyFlutter]

Thank you, @Allinone...786! 🙂. It depends on your requirement.

[@Allinone...786]

@@HeyFlutter it's a correct way? To use this

[@adunbimosmilez5884]

nice but my question is... how can this be done for a text inside a button?

[@HeyFlutter]

Thank You @adunbimosmilez5884! Follow this link: stackoverflow.com/questions/58150444/how-to-make-text-responsive-in-flutter I hope you will get your answer 🙂

[@subrotobasak]

how to run flutter vs code in web? Please make a tutorial

[@subrotobasak]

@@HeyFlutter thanks

[@HeyFlutter]

Thanks, Subroto! 🙂 On the bottom right corner of VS Code it says "No Device" if you have no phone plugged in. If you click on it you can run it in Chrome (Web). Before you see this option "Chrome (Web)" you have to enable Flutter Web. Therefore look here: flutter.dev/docs/get-started/web

[@subrotobasak]

@@HeyFlutter omg after one year.. no problem I know you are busy man. However Thanks. My problem already solved

[@TrikNgonlen]

Haha...this is the missing piece... 😁😄