Flutter Feedback & Alert Widgets #

Purpose: These widgets notify users, show temporary messages, warnings, confirmations, and interactive pop-ups. They improve UX by providing clear feedback about actions, errors, and system states.

---

1. Dialog #

A general-purpose pop-up container used to display messages or custom UI.

showDialog(
  context: context,
  builder: (_) => Dialog(
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text("This is a custom dialog."),
    ),
  ),
);

Use case: Custom pop-ups, forms, confirmations.

---

2. AlertDialog #

A Material-styled dialog with title, content, and action buttons.

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    title: Text("Delete Item"),
    content: Text("Are you sure you want to delete this?"),
    actions: [
      TextButton(onPressed: () {}, child: Text("Cancel")),
      ElevatedButton(onPressed: () {}, child: Text("Delete")),
    ],
  ),
);

Use case: Warnings, confirmations, alerts.

---

3. BottomSheet #

Displays a panel from the bottom of the screen.

Standard BottomSheet: #

showBottomSheet(
  context: context,
  builder: (_) => Container(height: 200, child: Text("Bottom Sheet")),
);

Use case: Settings, actions, extra menus.

---

4. ModalBottomSheet #

A full-screen dimmed bottom sheet that requires user action to close.

showModalBottomSheet(
  context: context,
  builder: (_) => Container(height: 250, child: Text("Modal Bottom Sheet")),
);

Use case: Filters, forms, payment methods.

---

5. SnackBar #

Small message bar displayed temporarily at the bottom.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text("Item added to cart")),
);

Use case: Success messages, short alerts, undo actions.

---

6. Progress Indicators #

Show loading states.

Circular: #

CircularProgressIndicator();

Linear: #

LinearProgressIndicator();

Use case: API calls, file uploads, loading screens.

---

7. ExpansionTile #

Expandable list item that reveals more content when tapped.

ExpansionTile(
  title: Text("More Options"),
  children: [
    ListTile(title: Text("Option 1")),
    ListTile(title: Text("Option 2")),
  ],
);

Use case: FAQs, settings, categories.

---

8. ExpansionPanelList #

Creates multiple expandable sections.

ExpansionPanelList(
  expansionCallback: (index, isOpen) {},
  children: [
    ExpansionPanel(
      headerBuilder: (_, isOpen) => Text("Panel 1"),
      body: Text("Panel content"),
      isExpanded: true,
    ),
  ],
);

Use case: Complex forms, multi-section content.

---

9. RefreshIndicator #

Provides pull-to-refresh functionality.

RefreshIndicator(
  onRefresh: () async {},
  child: ListView(children: [Text("Pull to refresh")]),
);

Use case: News feeds, lists, dashboards.

---

10. Tooltip #

Shows helper text when user long-presses or hovers.

Tooltip(
  message: 'Refresh',
  child: Icon(Icons.refresh),
);

Use case: Icon explanations, accessibility.

---

✔ Summary #

Feedback & Alert Widgets help you build a responsive app by:

• Showing warnings
• Giving success messages
• Providing loading indicators
• Displaying expandable content
• Triggering bottom sheets and dialogs