From 7b451203b951dcf8de7fc173c9eff828995110e5 Mon Sep 17 00:00:00 2001
From: Hugh Ratsch <hugh.ratsch.18@gmail.com>
Date: Thu, 26 Sep 2024 18:06:26 -0500
Subject: [PATCH] added project 02 mi_card and created posts folder

---
 index.md                              |   1 +
 i_am_rich.md => posts/01_i_am_rich.md |   0
 posts/02_mi_card.md                   | 133 ++++++++++++++++++++++++++
 3 files changed, 134 insertions(+)
 rename i_am_rich.md => posts/01_i_am_rich.md (100%)
 create mode 100644 posts/02_mi_card.md

diff --git a/index.md b/index.md
index d83118c..29627a2 100644
--- a/index.md
+++ b/index.md
@@ -6,3 +6,4 @@ tags: []
 This is the start of my digital garden. I have high hopes that it will grow into something magical!
 
 
+\- [Study Notes](/posts)
diff --git a/i_am_rich.md b/posts/01_i_am_rich.md
similarity index 100%
rename from i_am_rich.md
rename to posts/01_i_am_rich.md
diff --git a/posts/02_mi_card.md b/posts/02_mi_card.md
new file mode 100644
index 0000000..79c2cc4
--- /dev/null
+++ b/posts/02_mi_card.md
@@ -0,0 +1,133 @@
+# 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!
\ No newline at end of file