Using Material Components

Chip(
  label: Text('Flutter'),
)

Chip(
  label: Text('Material Design'),
  deleteIcon: Icon(Icons.delete),
  onDeleted: () {
    print('Chip deleted');
  },
)

Chip(
  label: Text('Selected'),
  selected: true,
  onSelected: (bool selected) {
    print('Selected: $selected');
  },
)

FilterChip(
  label: Text('Option 1'),
  selected: false,
  onSelected: (bool selected) {
    setState(() {
      // Handle selection logic here
    });
  },
)

FilterChip(
  label: Text('Option 2'),
  avatar: CircleAvatar(
    backgroundImage: AssetImage('assets/images/avatar.png'),
  ),
  selected: true,
  onSelected: (bool selected) {
    setState(() {
      // Handle selection logic here
    });
  },
)

ChoiceChip(
  label: Text('Option 1'),
  selected: false,
  onSelected: (bool selected) {
    setState(() {
      // Handle selection
    });
  },
)

ChoiceChip(
  label: Text('Option 2'),
  selected: true,
  onSelected: (bool selected) {
    setState(() {
      // Handle deselection
    });
  },
)

InputChip(
  label: Text('Flutter'),
  selected: true,
  onSelected: (bool selected) {
    print('Selected: $selected');
  },
)

ActionChip(
  label: Text('Share'),
  onPressed: () {
    print('Share button pressed');
  },
)

import 'package:flutter/material.dart';

class MyProgressIndicator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Progress Example")),
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class AnimatedProgressIndicator extends StatefulWidget {
  @override
  _AnimatedProgressIndicatorState createState() => _AnimatedProgressIndicatorState();
}

class _AnimatedProgressIndicatorState extends State<AnimatedProgressIndicator> with TickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: Duration(seconds: 5),
      vsync: this,
    );
    animation = Tween<double>(begin: 0.0, end: 1.0).animate(controller);
    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Animated Progress")),
      body: Center(
        child: CircularProgressIndicator(
          value: animation.value,
          strokeWidth: 5.0,
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

LinearProgressIndicator(
  value: 0.5,
)

LinearProgressIndicator(
  value: 0.75,
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
)

import 'package:flutter/material.dart';

class MyListScreen extends StatefulWidget {
  @override
  _MyListScreenState createState() => _MyListScreenState();
}

class _MyListScreenState extends State<MyListScreen> {
  List<String> items = List.generate(20, (i) => &#x27;Item $i&#x27;);

  Future<void> _refreshData() async {
    // Simulate a network call or data refresh
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items = List.generate(20, (i) => &#x27;Updated Item $i&#x27;);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(&#x27;Refresh Example&#x27;)),
      body: RefreshIndicator(
        onRefresh: _refreshData,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(items[index]));
          },
        ),
      ),
    );
  }
}

Stepper(
  steps: [
    Step(
      title: Text('Step 1'),
      content: Text('Content for Step 1'),
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Content for Step 2'),
    ),
  ],
  currentStep: 0,
)

int _currentStep = 0;

Stepper(
  currentStep: _currentStep,
  onStepContinue: () {
    if (_currentStep < 2) {
      setState(() {
        _currentStep += 1;
      });
    }
  },
  onStepCancel: () {
    if (_currentStep > 0) {
      setState(() {
        _currentStep -= 1;
      });
    }
  },
  steps: [
    Step(
      title: Text('Personal Info'),
      content: TextField(
        decoration: InputDecoration(labelText: 'Name'),
      ),
    ),
    Step(
      title: Text('Contact Info'),
      content: TextField(
        decoration: InputDecoration(labelText: 'Email'),
      ),
    ),
    Step(
      title: Text('Confirmation'),
      content: Text('Review your information'),
    ),
  ],
)

DataTable(
  columns: [
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Age')),
    DataColumn(label: Text('City')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('John')),
      DataCell(Text('25')),
      DataCell(Text('New York')),
    ]),
    DataRow(cells: [
      DataCell(Text('Jane')),
      DataCell(Text('30')),
      DataCell(Text('Los Angeles')),
    ]),
  ],
)

bool sortAscending = true;
int? sortColumnIndex;

DataTable(
  sortColumnIndex: sortColumnIndex,
  sortAscending: sortAscending,
  onSort: (int columnIndex, bool ascending) {
    setState(() {
      sortColumnIndex = columnIndex;
      sortAscending = ascending;
    });
  },
  columns: [
    DataColumn(
      label: Text('Name'),
      onSort: (int columnIndex, bool ascending) {
        // Handle sorting logic here
      },
    ),
    DataColumn(label: Text('Age')),
  ],
  rows: [
    DataRow(cells: [DataCell(Text('John')), DataCell(Text('25'))]),
  ],
)

Tooltip(
  message: 'Save your changes',
  child: IconButton(
    icon: Icon(Icons.save),
    onPressed: () { /* Save logic */ },
  ),
)

Tooltip(
  message: 'This tooltip stays longer',
  waitDuration: Duration(milliseconds: 600),
  showDuration: Duration(seconds: 3),
  child: Text('Hover me'),
)