This project showcases a wide variety of Flutter Widgets, designed to help you understand how they work and how they can be used to build beautiful and functional user interfaces.
- StatefulWidget 🏗️: A widget that has mutable state.
- StatelessWidget 📦: A widget that never changes its state.
- Container 📦: A box model widget that can contain other widgets.
- Column 🏙️: A widget that arranges its children vertically.
- Row 🏃♂️: A widget that arranges its children horizontally.
- Text 📝: A widget to display a string of text with a single style.
- TextField ⌨️: A widget for inputting text from the user.
- ElevatedButton 🔘: A Material Design button that’s elevated above its background.
- TextButton
🅾️ : A Material Design button without elevation. - IconButton 🎨: A button with an icon.
- Image 🖼️: A widget to display an image from assets, file, or network.
- Icon 🏷️: A widget to display icons from Flutter’s set or custom icons.
- AppBar 🎩: A material design app bar that can hold titles, actions, and navigation.
- Drawer 🧳: A sliding menu panel that can contain navigation links or other content.
- ListView 📜: A scrollable list of widgets.
- GridView 🔲: A scrollable 2D array of widgets.
- Form 📄: A container for grouping form field widgets.
- FormField 📝: A widget that manages the state of form fields.
- Checkbox ☑️: A material design checkbox widget.
- Radio 🔘: A material design radio button widget for selecting one option from a set.
- Switch 🔄: A material design switch widget for toggling between two states.
- Slider 🛷: A widget for selecting a value from a range of values.
- RaisedButton 🆙: An older version of an elevated button that’s now deprecated.
- FloatingActionButton 🟢: A circular icon button for a primary action.
- GestureDetector 🤳: A widget that detects gestures, such as taps or drags.
- MaterialPageRoute 📑: A route that uses a material page transition.
- Navigator 🧭: A widget for managing routes and page transitions.
- AnimatedContainer 🎠: A container that animates property changes.
- AnimatedOpacity 💡: A widget that animates the opacity of a widget.
- Hero 🦸♀️: A widget for animating the transition of an object between screens.
- AlertDialog 💬: A material design dialog for showing alerts.
- SnackBar 🍫: A lightweight message that appears at the bottom of the screen.
- BottomNavigationBar 🔽: A navigation bar that is displayed at the bottom of the screen.
- TabBar 🔲: A widget for creating a tab-based navigation system.
- Expanded 🧱: A widget that expands a child of a Row, Column, or Flex to fill available space.
- Spacer 🚀: A widget that creates an adjustable amount of space in a layout.
- ClipRRect ✂️: A widget for clipping a widget with rounded corners.
- Padding ⛔: A widget that adds padding around a child widget.
- Align ⚖️: A widget for aligning its child within itself.
- Positioned 📍: A widget for positioning a child within a Stack.
- Stack 📚: A widget that allows for overlaying widgets on top of each other.
- AnimatedBuilder 🎨: A widget that listens to animations and rebuilds based on the animation's value.
- ClipPath ✂️: A widget that clips a widget using a custom path.
- DrawerHeader 🏠: A widget for creating a header for a Drawer widget.
- Shimmer ✨: A widget that provides shimmer effects like loading animations.
- ProgressIndicator ⏳: A widget to display progress on tasks or operations.
- ListTile 📋: A widget for creating a material list item with text and icons.
- Chip 💬: A material design element used for labels, selections, or tags.
- Card 🃏: A material design card widget used to display content in a flat surface.
- Tooltip 🧐: A widget to show informative text when the user hovers or taps an item.
- Cross-Platform Support: This project works seamlessly on both Android and iOS platforms.
- Custom Widgets: Learn to build reusable and custom widgets.
- Comprehensive Widget Coverage: Every widget in this list has been implemented with simple examples to help you understand usage.
- UI Composition: Demonstrates how to combine multiple widgets to form complex UI layouts.
- Theming and Styling: Learn how to apply custom themes to the widgets and adjust their appearance.
- Animations: Introduces simple animations to enhance user experience.
- Best Practices: See how Flutter’s best practices are used to write clean and maintainable code.
-
Flutter Documentation
-
Flutter Widget Catalog
-
Flutter Cookbook
-
Contributing
-
We welcome contributions! Whether it's improving documentation, adding more widgets, fixing bugs, or optimizing the code, your help is always appreciated.
-
Fork the repository and clone your fork.
-
Create a new branch for each feature or bug fix.
-
Make changes, commit them, and push your branch.
-
Submit a pull request to the main repository.