flutter-study-notebook/posts/02_mi_card.md

Flutter MiCard Project Study Guide

Project Overview

This project creates a digital business card app using Flutter. It demonstrates key concepts in Flutter development, including stateless widgets, layout design, custom fonts, and styling.

Key Components

1. Main Dart File (main.dart)

Entry Point

void main() {
  runApp(MyApp());
}

• The main() function is the entry point of the Flutter app.
• runApp() takes the root widget of the app as an argument.

MyApp Class

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // ...
    );
  }
}

• MyApp is a stateless widget, the root of your application.
• The build method describes the part of the user interface represented by this widget.

2. Widget Tree

To include the widget tree diagram in your markdown notes, use the following code block:

graph TD
    A[MaterialApp] --> B[Scaffold]
    B --> C[SafeArea]
    C --> D[Column]
    D --> E[CircleAvatar]
    D --> F1[Text 'Hugh Ratsch']
    D --> F2[Text 'FLUTTER DEVELOPER']
    D --> G[SizedBox with Divider]
    D --> H1[Card for Phone]
    D --> H2[Card for Email]
    H1 --> I1[ListTile]
    H2 --> I2[ListTile]
    I1 --> J1[Icon]
    I1 --> K1[Text]
    I2 --> J2[Icon]
    I2 --> K2[Text]

3. Key Widgets and Their Purposes

1. MaterialApp: Provides default theme and navigation structure.
2. Scaffold: Implements the basic material design layout.
3. SafeArea: Ensures content is displayed within the safe area of the device.
4. Column: Arranges children vertically.
5. CircleAvatar: Displays a circular image.
6. Text: Shows text with customizable styles.
7. SizedBox: Creates a fixed-size box, used here with a Divider.
8. Card: Creates a material design card containing a ListTile.
9. ListTile: A convenient widget for creating a row with leading and title.

4. Styling and Customization

Custom Fonts

Defined in pubspec.yaml:

fonts:
  - family: SofadiOne
    fonts:
      - asset: fonts/SofadiOne-Regular.ttf 
  - family: SourceCodePro
    fonts:
      - asset: fonts/SourceCodePro-VariableFont_wght.ttf

Used in the app:

fontFamily: 'SofadiOne',
// and
fontFamily: 'SourceCodePro',

Color Scheme

Custom colors are used throughout, defined using Color.fromRGBO():

backgroundColor: Color.fromRGBO(123, 79, 68, 1.0),
// and
color: Color.fromRGBO(62, 39, 35, 1.0),

Icons

Material icons are used in the ListTiles:

Icons.add_ic_call_rounded,
Icons.email,

5. Layout Techniques

• Column with mainAxisAlignment: MainAxisAlignment.center centers content vertically.
• Card widgets use margin for spacing.
• SizedBox with a Divider creates a line separator.

Learning Outcomes

1. Creating a stateless widget
2. Implementing a basic Flutter app structure
3. Using various layout widgets (Column, Card, ListTile)
4. Styling text with custom fonts and colors
5. Incorporating images and icons
6. Managing assets in a Flutter project
7. Creating a visually appealing layout

Exercises to Reinforce Learning

1. Change the background color of the app.
2. Add another Card with a different piece of information (e.g., website).
3. Implement a custom app bar.
4. Make the CircleAvatar respond to taps (you'll need to convert to a StatefulWidget).
5. Add animations to the Cards when the app starts.

Additional Resources

• Flutter Documentation
• Dart Language Tour
• Flutter Cookbook

Remember to refer to the README.md file for the project goals and additional learning points!