133 lines
3.7 KiB
Markdown
133 lines
3.7 KiB
Markdown
# 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! |