Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bolisettysujith/awesome-flutter-widgets
An📱application to show awesome Flutter widgets, UI designs 🎨, Tips & Tricks 🪄
https://github.com/bolisettysujith/awesome-flutter-widgets
List: awesome-flutter-widgets
awesome-flutter awesome-flutter-widgets dart flutter hacktoberfest ui ui-design widgets
Last synced: about 1 month ago
JSON representation
An📱application to show awesome Flutter widgets, UI designs 🎨, Tips & Tricks 🪄
- Host: GitHub
- URL: https://github.com/bolisettysujith/awesome-flutter-widgets
- Owner: BolisettySujith
- Created: 2022-10-12T22:33:14.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-20T11:27:22.000Z (over 1 year ago)
- Last Synced: 2024-04-22T21:05:54.651Z (8 months ago)
- Topics: awesome-flutter, awesome-flutter-widgets, dart, flutter, hacktoberfest, ui, ui-design, widgets
- Language: Dart
- Homepage:
- Size: 68.5 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
## Here are some awesome Flutter widgets
#### Table of the content 📑
1. Image Color Filter
2. Flip Card Widget
3. Image Viewer 3D
4. Interactive Viewer Widget
5. Reorderable List View Widget
6. Cupertino Context Menu Widget
7. Tabular View Widget
8. Amazon 'Swipe to place your order' UI
9. Stepper Widget
10. Confetti Widget
11. List Wheel Scroll View Widget
12. Custom Banner Widget
### Awesome Widget's Preview 😎
Image Color Filter
FlipCard
Image Viewer 3D
Interactive Viewer
Re-orderable List View
Cupertino Context Menu
Tabular View
Swipe to place order
Stepper
Confetti
List Wheel Scroll View
Custom Banner
## Overflow
### 1. Wanna get rid of Widgets Overflowed while placing them in a Row ?
Solution
### Just Wrap them 😎
**Use**
```dart
Wrap(
spacing: 5.0,
runSpacing: 5.0,
children: [
Container(color: Colors.yellow, height: 100, width: 100,),
Container(color: Colors.green, height: 100, width: 100,),
Container(color: Colors.blue, height: 100, width: 100,),
Container(color: Colors.red, height: 100, width: 100,),
Container(color: Colors.pink, height: 100, width: 100,),
Container(color: Colors.orange, height: 100, width: 100,),
Container(color: Colors.amber, height: 100, width: 100,)
],
)
```
### 2. Wanna get rid of Text overfitted when placing it inside a container smaller than it's size ?
Solution
### Just Fit that 😎
**Use**
```dart
Container(
height: 150,
width: 400,
color: Colors.cyan,
child: const FittedBox(
fit: BoxFit.contain,
child: Text(
"Hello",
style: TextStyle(
fontSize: 200
),
),
),
)
```
## Looking to contribute 📝 ?
Please read [CONTRIBUTING.md](/CONTRIBUTING.md) before writing a pull request.
*
Show some support by **⭐ing** this repository 😇
*
**
Happy Coding 😎
**