Material Components for Flutter

Material chips are compact elements used to represent inputs, attributes, or actions. They should appear dynamically as a group of multiple interactive elements rather than as persistent buttons. There are four main types of chips, all of which are subclasses of the Chip class:

1. Input chips: Represent complex information like an entity (person, place, or thing). They convert text into chips to verify input.
2. Choice chips: Allow users to select a single option from a set. They serve as alternatives to radio buttons or single-select menus.
3. Filter chips: Use tags or descriptive words to filter content. They are alternatives to checkboxes or toggle buttons.
4. Action chips: Offer actions related to primary content and should appear contextually. They are alternatives to persistent buttons.

Expanding bottom sheets provide a small, collapsed surface that can be expanded by the user. They offer a middle ground between the persistent access of a standard sheet and the focus of a modal sheet.

Note: Expanding bottom sheets require creating a custom widget.

Sliders allow users to select values from a range. They are categorized by two main dimensions:

1. Selection Type

• Single point slider: Uses one thumb to select a single value.
• Range slider: Uses two thumbs to select a range of values.

2. Value Continuity

• Continuous sliders: Allow for any value within the range (no specific increments required).
• Discrete sliders: Use divisions to snap to specific values and display numeric labels.

Anatomy

A slider consists of:

• Track: The bar representing the range.
• Thumb: The draggable handle(s).
• Value label (optional): A popup showing the current value.
• Tick mark (discrete sliders only): Visual indicators for specific values.

Data table cells contain arbitrary widgets, so most styling (typography, colors) must be applied directly to the widgets inside DataCell or DataColumn (e.g., using TextStyle within a Text widget).

However, certain structural elements are controlled globally via ThemeData:

• Stroke/Divider Color: Set dividerColor in ThemeData to change the color of the lines separating rows/columns.
• Row Checkbox Color: Set accentColor in ThemeData to change the color of active checkboxes.
• Header Background: Use secondaryHeaderColor in ThemeData to style the column header area.
• General Dividers: The dividerColor property affects the container's stroke color.

The MaterialBanner widget is composed of several key parts, each controlled by specific properties:

Standard bottom sheets are surfaces that co-exist with the screen's main UI. They allow users to view and interact with both the sheet and the main content simultaneously. They are ideal for secondary content or features that need to remain visible while the user scrolls or pans the main UI.

To implement a standard bottom sheet, use the showBottomSheet function. Note that you often need to use a Builder widget to provide a BuildContext that is a descendant of the Scaffold.

For more advanced dragging behavior and snap points, consider using a DraggableScrollableSheet.

showBottomSheet(
  context: context,
  builder: (context) {
    return Wrap(
      children: [
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
      ],
    );
  },
);

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen using a scrim. They are an alternative to inline menus and dialogs on mobile, providing more space for content, icons, and actions. Modal bottom sheets are intended for mobile use only.

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Wrap(
      children: [
        ListTile(leading: Icon(Icons.share), title: Text('Share')),
        ListTile(leading: Icon(Icons.link), title: Text('Get link')),
      ],
    );
  },
);