Flutter Tutorial for Beginners: Layout Basics

Full Flutter & Firebase course (discount code included): 👇👇

Welcome to my introduction to Flutter for Beginners.

I have created this tutorial to help you learn about basic layouts in Flutter. This is part of my Flutter & Firebase course on Udemy.

INCLUDED IN THIS TUTORIAL

- MaterialApp, ThemeData, and how to create a Scaffold with an AppBar
- Column and Row widgets, and how to use the CrossAxisAlignment, MainAxisAlignment properties
- the Padding widget
- how to create and customise Text widgets
- creating custom button widgets: how to customise their color & shape, and add images with logos
- how to design a good and ergonomic widget API
- and much more

LESSONS:

00:00 - Intro
02:01 - Writing the root widget of the app
06:11 - Adding the MaterialApp
09:14 - Adding some folders to our project
11:26 - Adding a sign-in page
15:03 - The ThemeData class
17:17 - The AppBar widget
19:57 - Preview of the SignInPage layout
21:27 - Adding a Column layout
24:46 - The CrossAxisAlignment property
28:44 - Code formatting with dartfmt
32:57 - Adding some boxes and extracting code into a method
36:38 - Private methods
40:06 - Adding some padding
44:42 - The MainAxisAlignment property
45:58 - Text, TextStyle and FontWeight
49:12 - Introduction to buttons
51:04 - Adding the first button
54:35 - Button callbacks explained
58:51 - Customising button colors
01:02:03 - MaterialColor explained
01:05:13 - Changing button shapes
01:07:31 - Making code reusable
01:08:58 - Creating a reusable custom RaisedButton
01:15:40 - Creating a reusable SignInButton
01:19:55 - Setting default values
01:22:20 - Making the button height configurable
01:26:17 - Adding the remaining buttons
01:30:56 - Adding logos: introduction
01:36:20 - Image variants
01:38:15 - Adding an image inside a button
01:41:51 - Arranging widgets horizontally in a Row
01:46:20 - The Opacity widget
01:49:01 - Creating a custom SocialSignInButton
01:55:02 - The @required annotation
02:00:08 - Using assertions for better widget API design
02:09:12 - Conclusion

Note: To follow along from lesson 29 onwards, download this file and add it to the root of your project:

If you're new to Dart, check out my free Introduction to Dart: 👇👇

Happy coding!

[adminqs]

Andrea this is the PERFECT layout tutorial! You went above and beyond the call of duty my friend!

[amberarts]

I have seen half of the video till now and it is really an awesome tutorial for a beginners who has never worked with flutter before thank you

[umaiskhan]

The most wholesome tutorial of flutter on the internet!

[jeeradatekaowkanchana]

Your Video is very detail, easy to understand and accurate, Thank you for your kind providing this video for publishing.

[brunowario]

Wow finally after browsing multiple videos and sites, this tutorial is able to explain in depth without blabbering and simplifying it.

[amberarts]

completed my first lesson, thank you so much

[payini]

Great tutorial and content. Thank you!

[CodeWithRafiq]

Thank you very much. Very Half full Tutorial.

[MrVipulLal]

Very gentle introduction to flutter. Thanks

[glitchlover]

Uh thanks bro now I can code in flutter with confidence😃

[Akenaton-ynkk]

This was a really beautifull and well expalained tutorial, one of the best I have ever seen. You absolutelly earned one more subscriber

[gpathela]

Very good tutorial. Must for all Flutter beginners.

[JamesNithasWorld]

I liked the way you guided us... well done and keep it up.. This ended up me buying your Udemy course.😜😜👍

[ozzyfromspace]

Wow, that was simply amazing! No other way to put it lol

[sushilgarbuja]

wow this video change my life thanks for

[aureliusge]

Which hardware components (without monitor) for desktop(Linux/windows)you can recommend for low budget(300-400 usd) ? for comfortable work with flutter

[stunnaman]

Other than using opacity to hide an object. Can't we use margin to separate objects. Or other better ways

[jeeradatekaowkanchana]

The logo file is missing! cannot download, but I can finish learning by download from the web and change dimensions.

[kelvinyong]

Andrea i stuck at raised button, how to change to elevated button instead

[TrikNgonlen]

can we request something like this flutter with Laravel API (not the Firebase back end)? thanks