Flutter Tutorial - Responsive UI Text Layout

Flutter Tutorial - Responsive UI Text Layout - Auto Size Text

Рет қаралды 32,306

Күн бұрын

Learn to create responsive text layouts for Flutter mobile & web with Flutter Auto Size Text.
Click here to Subscribe to Johannes Milke: kzfaq.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

Пікірлер: 43

@HeyFlutter 2 жыл бұрын

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: kzfaq.info/get/bejne/nbmml5CalbC3o4k.html Shop UI Tutorial: kzfaq.info/get/bejne/ebeKpZB4vcvDj40.html Todo App UI Tutorial: kzfaq.info/get/bejne/obRpjMmVmczZYGg.html Tinder Dating App UI Tutorial: kzfaq.info/get/bejne/rJenosmZ1NvYcp8.html Fitness App UI Tutorial: kzfaq.info/get/bejne/arGBYMmQm7-boGw.html Social App UI Tutorial: kzfaq.info/get/bejne/htx0gsqAybvLm4k.html App Bar Tutorial: kzfaq.info/get/bejne/mq5yeZd6r8DaeJ8.html Search App Bar Tutorial: kzfaq.info/get/bejne/iMdxdqSo28CaYXk.html TextField Tutorial: kzfaq.info/get/bejne/eZuYfax8qLrWpp8.html TextFormField & Forms Tutorial: kzfaq.info/get/bejne/aNieZruTp8_OqWg.html Rich Text Tutorial: kzfaq.info/get/bejne/gtNzn8RymLGndXk.html Buttons 2.0 Tutorial: kzfaq.info/get/bejne/r9qcd657p967j3U.html Buttons 2.0 For Web Tutorial: kzfaq.info/get/bejne/jJd1qdZhlZbdpmw.html

@blueice1364 3 жыл бұрын

Really appreciate your way of teaching. Thanks.

@brucevang-vr 2 жыл бұрын

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

@vinothvino1275 3 жыл бұрын

Thanks for the tutorial! Keep doing it

@pault54 3 жыл бұрын

Wow very comprehensive summary of the topic,

@yousefzk22 3 жыл бұрын

keep going man wow thanks,

@coraleenamarie5869 3 жыл бұрын

Thank you!!

@kyrieirving6301 Жыл бұрын

Thank you for sharing the package!

@HeyFlutter Жыл бұрын

You are welcome, Ömer Önder 😊

@thazeroword646 3 жыл бұрын

Very nice useful video

@rabbihossen9734 2 жыл бұрын

Great 🧡

@h3w45 2 жыл бұрын

thank you

@shavezhameed8866 2 жыл бұрын

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

@armanlaalfam3406 2 жыл бұрын

Thank's you

@thushankalana4940 2 ай бұрын

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

@HeyFlutter 2 ай бұрын

You’re most welcome, @thushankalana4940! 🙂

@jonacempelule9876 2 жыл бұрын

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?

@tranminhson2569 2 жыл бұрын

Thank you so much

@HeyFlutter 2 жыл бұрын

You're most welcome, Tran Minh! 🙂

@capungfly5352 3 жыл бұрын

Next responsive navbar 😁

@fortechknowledge8172 Жыл бұрын

great video

@HeyFlutter Жыл бұрын

Thank you, Fortech Knowledge! 🙂

@marcocharo7524 2 жыл бұрын

super

@kevinlee9028 2 жыл бұрын

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

@HeyFlutter 2 жыл бұрын

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 🙂

@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 😀

@raheelahmad7256 10 ай бұрын

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 9 ай бұрын

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

@nativeworld0 2 ай бұрын

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

@HeyFlutter 2 ай бұрын

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

@faizulla5838 8 ай бұрын

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

@HeyFlutter 8 ай бұрын

Thank you, @faizulla5838! 🙂

@Allinone...786 8 ай бұрын

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

@HeyFlutter 8 ай бұрын

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

@Allinone...786 8 ай бұрын

@@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 🙂

@TrikNgonlen 3 жыл бұрын

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

@subrotobasak 3 жыл бұрын

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

@subrotobasak 3 жыл бұрын

@@HeyFlutter thanks

@HeyFlutter 2 жыл бұрын

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 2 жыл бұрын

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