Flutter Tutorial - Set Screen Background Color | Gradient Background

Flutter Tutorial - Set Screen Background Color | Gradient Background | In 7 Minutes

Рет қаралды 38,385

Күн бұрын

Use Flutter to set the Screen Background Color to a single background color or to apply a gradient background color in Flutter.
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/back...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Splash Screen Tutorial: • Flutter Tutorial - Nat...
Flutter Layout Basics Tutorial: • Flutter Layout Basics:...
App Bar Tutorial: • Flutter Tutorial - App...
Search App Bar Tutorial: • Flutter Tutorial - Sea...
First Flutter App Tutorial: • Flutter Tutorial - Hel...
Modal Bottom Sheet Tutorial: • Flutter Tutorial - Dra...
Image Tutorial: • Flutter Tutorial - Flu...
Video Player Tutorial: • Flutter Tutorial - Vid...
Sortable DataTable Tutorial: • Flutter Tutorial - Sor...
List Utility Methods Tutorial: • Flutter Tutorial - Dar...
User Profile Page UI Tutorial: • Flutter Tutorial - Use...
Quiz App UI Tutorial: • Flutter Tutorial - 1/2...
PDF Viewer Tutorial: • Flutter Tutorial - PDF...
Expandable List Tutorial: • Flutter Tutorial - Exp...
Navigation Drawer Tutorial: • Flutter Tutorial - Sid...
Search & Filter In ListView Tutorial: • Flutter Tutorial - Sea...
Staggered GridView Tutorial: • Flutter Tutorial - Gri...
Create Invoice PDF Document Tutorial: • Flutter Tutorial - Cre...
TIMELINE
0:00 Introduction Set Screen Background Color
0:19 Set Screen Background Color
0:47 Set Background Color Hex / Hex Color
1:15 Set AppBar Background Color
1:28 Set Full Screen Background Color
1:48 Set Multiple Screens Background Color / Set All Screens Background Color
2:51 Set Background Color Gradient
3:55 Set Multiple Background Color Gradient
4:10 Set Fullscreen Background
4:48 Change Gradient Alignment
5:18 Change Gradient Stops
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

Пікірлер: 42

@HeyFlutter Жыл бұрын

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/background_color_example

@qazqwe5419 2 жыл бұрын

Explainded simply and swiftly.

@kartikeyraghav4477 2 жыл бұрын

Thank you very much. You create videos which are really needed.

@Nico-rl4bo 2 жыл бұрын

I love flutter and your tutorials

@williamshakespear2190 3 жыл бұрын

The way I feel when I watch his videos and it instantly works 😊😂... Thank you.

@carlospijanowski 3 жыл бұрын

you are the best man ! from Brazil

@Digital_Education_App 3 жыл бұрын

superb your teching styles ...

@nishantburnwal3284 3 жыл бұрын

Sir please make a video on how to use flutter docs efficiently

@robertosousa2418 3 жыл бұрын

Nice work splashscreen? Thanks my friends! Brazilian guys!

@johnpeter122 3 жыл бұрын

Wow .. Awesome

@auliasabril1899 3 жыл бұрын

Good job 👍👍👍

@shorts_cute 3 жыл бұрын

Good work 💪

@pritomchaki4461 3 жыл бұрын

Though u work on common UI design, but always find some new Widget /Keyword/ Property in ur video, which are really helpful.

@rishabhbajpai648 3 жыл бұрын

You are awesome 👏👏👏

@Lulu-ze1zi Жыл бұрын

Amazing:) great explanation, subscribed right away

@HeyFlutter Жыл бұрын

Great, Thank you Lulu!

@khelasports7396 3 жыл бұрын

Thanks bro

@ahmedalaa9214 8 ай бұрын

Thank you, that was so sweet.

@HeyFlutter 8 ай бұрын

Thanks, @ahmedalaa9214! 🙂

@mustafamanhal Жыл бұрын

Thank you sooooooo much for sharing these videos ♥️♥️♥️♥️

@HeyFlutter Жыл бұрын

You’re most welcome, Mustafa Al-dolimy! 🙂

@nattawutxp 2 жыл бұрын

very good

@kamalCode 3 жыл бұрын

Sir, please dart keyboard Late, As, assert, await, Async,sync, export, factory, Interface, Yield, Typedef, Mixin, Rethrow, Part, Covariant, Deffered, EXTENSION, EXTERNAL

@yasinmoosavi585 2 жыл бұрын

thank you but how can i change color of bottom bar? i don't know the name , I mean the bar which has a home ,back and square icon?

@PrateekAher 3 жыл бұрын

Could you sometime demonstrate a gradient other than LinearGradient? Like RadialGradient and SweepGradient.

@mohammadmahfuzkhan5814 2 жыл бұрын

Awesome. keep up the good work bro...

@HeyFlutter 2 жыл бұрын

Thank You Mohammad Mahfuz.

@mohamedayman5240 Жыл бұрын

thank you so much!

@HeyFlutter Жыл бұрын

You are welcome, @mohamedayman5240 😊

@asaelamete366 3 жыл бұрын

thanks for the link but i hade it already, i try the different method they propos on it but i can make it work i mean i want to switch to different themes with different gradient Color. Thanks. by the way will you make a video for this in the next day, week or month ??

@metehangezer3774 3 жыл бұрын

can i make background and add animation like this? can i move the colors? thanks...

@metehangezer3774 3 жыл бұрын

@@HeyFlutter Can you make an animated video of it?

@asaelamete366 3 жыл бұрын

how can i make the gradientColor with the ThemeData please ?

@asaelamete366 3 жыл бұрын

@@HeyFlutter thanks for the link but i hade it already, i try the different method they propos on it but i can make it work i mean i want to switch to different themes with different gradient Color. Thanks. by the way will you make a video for this in the next day, week or month ??

@dsdridi5362 2 жыл бұрын

how to code this gradient effect into the Theme ( scaffoldBackgroundColor ) , to have it in every page ? and not just a Container 🤔

@miguelgoncalves6923 8 ай бұрын

did you found out how?

@user-tf9pt7yy7w 2 жыл бұрын

Is there any way to set linear gradient background color to the all the pages? I want my all of my app pages have the same gradient background. Always thanks!

@HeyFlutter 2 жыл бұрын

Thank You 김킥! Follow this link: www.kindacode.com/article/flutter-set-gradient-background-color-for-entire-screen/ I hope you will get your answer 🙂

@user-tf9pt7yy7w 2 жыл бұрын

@@HeyFlutter Wow.. you're incredible. Thank you veryveryvery much!!!