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

---
title: "Flutter MiCard Project Study Guide"
tags:
  - project-02
---

# 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
```dart
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
```dart
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:

```mermaid
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`:
```yaml
fonts:
  - family: SofadiOne
    fonts:
      - asset: fonts/SofadiOne-Regular.ttf 
  - family: SourceCodePro
    fonts:
      - asset: fonts/SourceCodePro-VariableFont_wght.ttf
```
Used in the app:
```dart
fontFamily: 'SofadiOne',
// and
fontFamily: 'SourceCodePro',
```

#### Color Scheme
Custom colors are used throughout, defined using `Color.fromRGBO()`:
```dart
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:
```dart
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](https://flutter.dev/docs)
- [Dart Language Tour](https://dart.dev/guides/language/language-tour)
- [Flutter Cookbook](https://flutter.dev/docs/cookbook)

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