Flutter Tutorial for Beginners: Layout Basics

Full Flutter & Firebase course (discount code included): 👇👇
https://nnbd.me/ff

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:32:16 - Updating the pubspec.yaml file
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:
https://codewithandrea.com/videos/flu...


If you're new to Dart, check out my free Introduction to Dart: 👇👇
   • Introduction to Dart - Part 1: Variab...  

Happy coding!