Flutter Widgets Categories with Examples

Flutter provides various widgets categorized based on their functionality. Here’s a simple
breakdown with examples for each type:

1. Accessibility Widgets
These widgets enhance app accessibility, making it usable for people with disabilities (e.g.,
screen readers).

Example: Semantics Widget

Semantics(
label: "A clickable star icon",
child: Icon([Link]),
)

🔹 Use case: Helps screen readers describe widgets for visually impaired users.

2. Animation and Motion Widgets

These widgets add animation effects to other widgets, making UI interactions smooth and
engaging.

Example: AnimatedOpacity
AnimatedOpacity(
duration: Duration(seconds: 2),
opacity: 0.5,
child: Text("Fading Text"),
)

🔹 Use case: Used for fade-in/out animations.

3. Assets, Images, and Icons Widgets

These handle image display and icons in Flutter apps.

Example: Image Widget

[Link]('assets/flutter_logo.png')

🔹 Use case: Display images from assets or network.

Example: Icon Widget

Icon([Link], size: 50, color: [Link])

🔹 Use case: Displays icons from Material Icons.

4. Async Widgets
These widgets handle asynchronous operations, like fetching data from APIs.

Example: FutureBuilder
FutureBuilder(
future: [Link](Duration(seconds: 3), () => "Loaded Data"),
builder: (context, snapshot) {
if ([Link] == [Link]) {
return CircularProgressIndicator();
}
return Text([Link]());
},
)

🔹 Use case: Used for API calls and async data fetching.

5. Basics Widgets
Essential widgets required in any Flutter app.

Example: Text Widget

Text("Hello, Flutter!")

🔹 Use case: Displays text.

Example: Container Widget

Container(
color: [Link],
padding: [Link](10),
child: Text("Inside a Container"),
)

🔹 Use case: A flexible box used for styling and layout.

6. Cupertino Widgets
iOS-style widgets that provide native iOS look and feel.

Example: CupertinoButton
CupertinoButton(
child: Text("iOS Button"),
onPressed: () {},
)

🔹 Use case: iOS-themed buttons.

7. Input Widgets
Widgets that accept user input.

Example: TextField Widget

TextField(
decoration: InputDecoration(labelText: "Enter your name"),
)

🔹 Use case: Used for text input fields.

8. Interaction Models Widgets

Manage user interactions, like touch gestures and navigation.

Example: GestureDetector
GestureDetector(
onTap: () => print("Tapped!"),
child: Container(
color: [Link],
padding: [Link](20),
child: Text("Tap me"),
 ),
)

🔹 Use case: Detects user gestures like taps, swipes.

9. Layout Widgets
Arrange other widgets on the screen.

Example: Column Widget

Column(
children: [
Text("Item 1"),
Text("Item 2"),
],
)

🔹 Use case: Arranges widgets vertically.

10. Material Components Widgets

Widgets following Google’s Material Design.

Example: ElevatedButton
ElevatedButton(
onPressed: () {},
child: Text("Click Me"),
)

🔹 Use case: Displays a Material Design button.

11. Painting and Effects Widgets

Modify the appearance of child widgets.

Example: Opacity Widget

Opacity(
opacity: 0.5,
 child: Text("Half Transparent Text"),
)

🔹 Use case: Changes widget transparency.

12. Scrolling Widgets

Provide scroll functionality for non-scrollable widgets.

Example: ListView
ListView(
children: [
Text("Item 1"),
Text("Item 2"),
],
)

🔹 Use case: Scrollable list.

13. Styling Widgets

Handle themes, responsiveness, and app size.

Example: Theme Widget

Theme(
data: ThemeData(primarySwatch: [Link]),
child: Text("Styled Text"),
)

🔹 Use case: Applies themes to widgets.

14. Text Widgets

Display text in various styles.

Example: RichText Widget

RichText(
text: TextSpan(
 children: [
TextSpan(text: "Bold ", style: TextStyle(fontWeight: [Link])),
TextSpan(text: "and Normal"),
],
),
)

🔹 Use case: Format text with different styles.

Conclusion
Flutter widgets are categorized based on their roles. By using the right widgets, you can create a
functional and visually appealing app.

Would you like more examples on any specific category? 😊