import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const Example(),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    const Color backgroundColor = Colors.yellow;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Chips with backgroundColor',
                style: Theme.of(context).textTheme.bodyLarge),
            Wrap(
              spacing: 8.0,
              runSpacing: 4.0,
              children: <Widget>[
                RawChip(
                  label: const Text('RawChip'),
                  backgroundColor: backgroundColor,
                  onPressed: () {},
                ),
                ActionChip(
                  label: const Text('ActionChip'),
                  backgroundColor: backgroundColor,
                  onPressed: () {},
                ),
                ChoiceChip(
                  label: const Text('ChoiceChip'),
                  selected: false,
                  backgroundColor: backgroundColor,
                  onSelected: (bool value) {},
                ),
                FilterChip(
                  label: const Text('FilterChip'),
                  backgroundColor: backgroundColor,
                  onSelected: (bool value) {},
                ),
                InputChip(
                  label: const Text('InputChip'),
                  backgroundColor: backgroundColor,
                  onPressed: () {},
                ),
              ],
            ),
            const SizedBox(height: 32.0),
            Text('Chips without backgroundColor',
                style: Theme.of(context).textTheme.bodyLarge),
            Wrap(
              spacing: 8.0,
              runSpacing: 4.0,
              children: <Widget>[
                RawChip(label: const Text('RawChip'), onPressed: () {}),
                ActionChip(
                  label: const Text('ActionChip'),
                  onPressed: () {},
                ),
                ChoiceChip(
                  label: const Text('ChoiceChip'),
                  selected: false,
                  onSelected: (bool value) {},
                ),
                FilterChip(
                  label: const Text('FilterChip'),
                  onSelected: (bool value) {},
                ),
                InputChip(
                  label: const Text('InputChip'),
                  onPressed: () {},
                ),
              ],
            ),
            const SizedBox(height: 32.0),
            Text('Buttons with backgroundColor',
                style: Theme.of(context).textTheme.bodyLarge),
            Wrap(
              spacing: 8.0,
              runSpacing: 4.0,
              children: <Widget>[
                TextButton(
                  style: TextButton.styleFrom(
                    backgroundColor: backgroundColor,
                  ),
                  onPressed: () {},
                  child: const Text('TextButton'),
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: backgroundColor,
                  ),
                  onPressed: () {},
                  child: const Text('ElevatedButton'),
                ),
                OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    backgroundColor: backgroundColor,
                  ),
                  onPressed: () {},
                  child: const Text('OutlinedButton'),
                ),
                FilledButton.tonal(
                  style: FilledButton.styleFrom(
                    backgroundColor: backgroundColor,
                  ),
                  onPressed: () {},
                  child: const Text('FilledButton'),
                ),
              ],
            ),
            const SizedBox(height: 32.0),
            Text('Buttons without backgroundColor',
                style: Theme.of(context).textTheme.bodyLarge),
            Wrap(
              spacing: 8.0,
              runSpacing: 4.0,
              children: <Widget>[
                TextButton(
                  onPressed: () {},
                  child: const Text('TextButton'),
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('ElevatedButton'),
                ),
                OutlinedButton(
                  onPressed: () {},
                  child: const Text('OutlinedButton'),
                ),
                FilledButton.tonal(
                  onPressed: () {},
                  child: const Text('FilledButton'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}