Skip to content

An📱application to show awesome Flutter widgets, UI designs 🎨, Tips & Tricks 🪄

Notifications You must be signed in to change notification settings

BolisettySujith/Awesome-Flutter-Widgets

Repository files navigation

Header

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

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

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 before writing a pull request.

Show some support by ⭐ing this repository 😇

Happy Coding 😎