129 lines
4.0 KiB
Markdown
129 lines
4.0 KiB
Markdown
---
|
|
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 |