project02 - The second knockdown 👊

A basic Flutter project showcasing the use of Scaffolding and adding custom colors

This app focuses on adding Scaffolding and custom colors features of Flutter by following these steps:

project02 > lib > main.dart

1. final appBarColor = const Color(0xFFd2527f); Declaring a custom Color for our AppBar. We use final as we don't want the value of appBarColor to change anyhere throughout the app. Same goes for the use of const. Flutter uses 32-bit ARGB value i.e. Alpha Red Green Blue for colors. Every color value begins with 0x (thinking why 0x?), next comes the opacity to use, we choose FF or full opaque without any transparency. Next up is our usual hex value of d2527f without any hash (#).

2. final bgColor = const Color(0xFFe4e9ed); Same goes for the background color for the home.

3. home: Scaffold Here we create a Scaffold. This is used to implement Material Design providing APIs for other material elements like SnackBar, Drawer etc.

4. backgroundColor: bgColor, We use the declared bgColor inside the Scaffold to give it a value of 0xFFe4e9ed.

5. appBar: AppBar We initialise the AppBar which is basically a material toolbar containing the app's name and/or other elements like logo and other actions (menu).

6. backgroundColor: appBarColor Finally, we do the same, apply the declared appBarColor to the AppBar as its background color.