hugh/flutter-study-notebook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added project 02 mi_card and created posts folder

Browse Source
This commit is contained in:
Hugh Ratsch
2024-09-26 18:06:26 -05:00
parent e0b8020501
commit 7b451203b9
3 changed files with 134 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
posts/01_i_am_rich.md
+129
View File
@@ -0,0 +1,129 @@
---
title: "Flutter App Code Breakdown: 'I Am Rich' App"
tags:
- project-01
---
# Flutter App Code Breakdown: "I Am Rich" App
## 1. Import Statement
```dart
import 'package:flutter/material.dart';
```
- **Purpose**: Imports the material package from Flutter.
- **Significance**: Provides access to pre-built widgets implementing Material Design.
- **Key Point**: Essential for almost all Flutter apps using Material Design.
## 2. Main Function
```dart
void main() {
runApp(
// App content here
);
}
```
- **Purpose**: Entry point of the Flutter app.
- **Function**: `runApp()` initializes the app and attaches the root widget to the screen.
- **Key Point**: Every Flutter app must have a `main()` function.
## 3. MaterialApp Widget
```dart
MaterialApp(
home: Scaffold(
// Scaffold content here
),
)
```
- **Purpose**: Root widget of the app.
- **Functions**:
- Sets up the basic app structure.
- Provides default theme data.
- Handles navigation and routing.
- **Key Point**: Wraps the entire app and is typically at the top of the widget tree.
## 4. Scaffold Widget
```dart
Scaffold(
backgroundColor: Colors.deepPurple[200],
appBar: AppBar(
// AppBar content here
),
body: Center(
// Body content here
),
)
```
- **Purpose**: Implements the basic Material Design visual layout structure.
- **Properties**:
- `backgroundColor`: Sets the background color of the entire screen.
- `appBar`: Defines the top app bar.
- `body`: Contains the main content of the app.
- **Key Point**: Provides a consistent structure for screens in your app.
## 5. AppBar Widget
```dart
AppBar(
title: const Text(
'I Am Rich',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w700),
),
centerTitle: true,
backgroundColor: Colors.deepPurple[600],
)
```
- **Purpose**: Creates a top app bar.
- **Properties**:
- `title`: Sets the title of the app bar (using a Text widget).
- `centerTitle`: Aligns the title to the center when true.
- `backgroundColor`: Sets the background color of the app bar.
- **Key Point**: Customizable top bar for navigation and branding.
## 6. Body Content
```dart
body: Center(
child: Image.asset('images/diamond.png'),
)
```
- **Purpose**: Defines the main content of the screen.
- **Widgets Used**:
- `Center`: Aligns its child to the center of the screen.
- `Image.asset`: Displays an image from the app's assets.
- **Key Point**: Demonstrates how to add and center an image in Flutter.
## Key Concepts Learned:
1. **Widget Tree Structure**: Understanding how widgets are nested to create the UI.
2. **Material Design Implementation**: Using Material widgets for a cohesive look.
3. **Customization**: Modifying widget properties for colors, styles, and alignment.
4. **Asset Management**: Including and displaying images from the app's assets.
5. **Layout Basics**: Using widgets like `Center` for basic layout control.
## Practice Exercises:
1. Change the app's color scheme to a different theme.
2. Add a floating action button to the Scaffold.
3. Implement a custom font for the app bar title.
4. Replace the image with a different asset or an icon.
5. Add a text description below the image using a Column widget.
## Additional Resources:
- [Flutter Documentation](https://flutter.dev/docs)
- [Material Design Guidelines](https://material.io/design)
- [Dart Language Tour](https://dart.dev/guides/language/language-tour)
Remember: Flutter development is best learned through practice. Try modifying this app and building upon it to reinforce your understanding!
```mermaid
graph TD
A[MaterialApp] --> B[Scaffold]
B --> C[AppBar]
B --> D[Body]
C --> E[Text 'I Am Rich']
D --> F[Center]
F --> G[Image.asset 'diamond.png']
style A fill:#f9d71c,stroke:#333,stroke-width:2px
style B fill:#f9d71c,stroke:#333,stroke-width:2px
style C fill:#a2d2ff,stroke:#333,stroke-width:2px
style D fill:#a2d2ff,stroke:#333,stroke-width:2px
style E fill:#ffafcc,stroke:#333,stroke-width:2px
style F fill:#ffafcc,stroke:#333,stroke-width:2px
style G fill:#ffafcc,stroke:#333,stroke-width:2px
posts/02_mi_card.md
+133
View File
@@ -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!