https://github.com/rahullkumr/flutter-02-mycard
used various widgets like Container, Column, Card, ListTile, etc to develop a Business card.
https://github.com/rahullkumr/flutter-02-mycard
Last synced: 3 months ago
JSON representation
used various widgets like Container, Column, Card, ListTile, etc to develop a Business card.
- Host: GitHub
- URL: https://github.com/rahullkumr/flutter-02-mycard
- Owner: Rahullkumr
- Created: 2023-08-19T13:49:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T13:25:07.000Z (about 1 year ago)
- Last Synced: 2025-02-06T08:21:19.937Z (5 months ago)
- Language: Dart
- Homepage:
- Size: 241 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## flutter-02-MyCard
used various widgets like Container, Column, Card, ListTile, etc to develop a Business card.
## The App
### 1. To keep the content in the safe area
> safe area: the area other than the place where icons like - signal, wifi, notification, notch, etc live.
use `SafeArea` widget
### 2. space between Containersss
- use `SizedBox()` widget
### 3. stretch container to fill entire available space
1. use `crossAxisAlignment.stretch`
2. using height/width
- `height: double.infinity` (for Column Widget)
- `width: double.infinity` (for Row Widget)
### 4. Learnt CircleAvatar widget
```
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('images/me.png'),
),
```
### 5. Styling ```Text``` widget using style property
```
Text(
"Rahul Kumar",
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
)
```
### 6. Adding custom fonts
1. Download the font and paste inside 'fonts' folder in the app's root directory
2. Uncomment `font area` in pubspec.yaml file and edit family name and other related properties, like this
```
fonts:
- family: Filxgirl
fonts:
- asset: fonts/Filxgirl.ttf
```
3. Use the font where needed, like this:
```
style: TextStyle(
fontFamily: 'Filxgirl',
fontSize: 40,
color: Colors.white,
)
```
4. Re-run the app
### 7. Why to use `Icon` widget instead of normal `Image` widget for icons?
- `Icon widget` uses a vector graphic, which is a mathematical representation of an image, so it can be rendered more quickly and resized without losing quality.
- `Image widget` is rasterized, which means that it is converted to a pixel-based image when it is rendered, so it will become pixelated if it is resized too much
- `Icon widget` allows you to change the color, size, and other properties of the icon. The Image widget only allows you to change the size of the image.
### 8. `Container` vs `Card` widget
- card is like a container widget but it has rounded corners and shadow along with few more properties
### 9. `Padding()` Widget
- used to give padding to those widgets that don't have padding property like Row(), Column(), Card(), etc
```
Padding(
padding: EdgeInsets.all(20.0),
child: Row(
children: [
Text("Padding widget example"),
]
)
)
```
### 10. `ListTile()` with Card() widget
- use ListTile() instead of Row() in Card() widget
```
ListTile(
leading: Icon(
Icons.phone,
),
title: Text(
'Rahul',
)
)
```
### 11. `Divider()` = `
`
----
### 12. Decoration properties of Container Widget
-----
Run any Flutter repository on Zapp website: refer this link
List of all Flutter apps: click here
