> For the complete documentation index, see [llms.txt](https://sumiths-organization.gitbook.io/workshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sumiths-organization.gitbook.io/workshop/adding-emoji-hints.md).

# Adding Emoji Hints

Create data.dart to hold the emoji data

Create a new file emoji\_grid.dart

```dart
import 'package:clipboard/clipboard.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'data.dart';

class EmojiGrid extends StatefulWidget {
  const EmojiGrid({super.key});

  @override
  State<EmojiGrid> createState() => _EmojiGridState();
}

class _EmojiGridState extends State<EmojiGrid> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: emojis.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: EmojiTile(
            emoji: emojis[index],
          ),
        );
      },
    );
  }
}

class EmojiTile extends StatefulWidget {
  final String emoji;

  const EmojiTile({required this.emoji, super.key});

  @override
  State<EmojiTile> createState() => _EmojiTileState();
}

class _EmojiTileState extends State<EmojiTile> {
  @override
  Widget build(BuildContext context) {
    bool isHovered = false;
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          isHovered = true;
        });
      },
      onExit: (_) {
        setState(() {
          isHovered = false;
        });
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.orangeAccent,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Padding(
            padding: const EdgeInsets.only(top: 15, left: 5),
            child: Center(
              child: Text(
                widget.emoji,
                style: const TextStyle(fontSize: 20),
              ),
            ),
          ),
          IconButton(
            color: Colors.redAccent,
            icon: Icon(
              FontAwesomeIcons.copy,
              color: isHovered ? Colors.white : IconTheme.of(context).color,
              size: 15,
            ),
            onPressed: () async {
              FlutterClipboard.copy(widget.emoji).then(
                (value) {
                  return ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text('Text Copied'),
                    ),
                  );
                },
              );
            },
          ),
        ]),
      ),
    );
  }
}

InputDecoration textFieldDecoration(BuildContext context, String hintText) =>
    InputDecoration(
      contentPadding: const EdgeInsets.all(5),
      hintText: hintText,
      border: OutlineInputBorder(
        borderRadius: const BorderRadius.all(
          Radius.circular(14),
        ),
        borderSide: BorderSide(
          color: Theme.of(context).colorScheme.secondary,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: const BorderRadius.all(
          Radius.circular(14),
        ),
        borderSide: BorderSide(
          color: Theme.of(context).colorScheme.secondary,
        ),
      ),
    );
```

We need 2 packages clipboard and font\_awesome\_flutter in pubspec.yaml

```yaml
clipboard: ^0.1.3
font_awesome_flutter: ^10.7.0
```

Add the grid to chat\_screen.dart above ChatWidget

```dart
const SizedBox(
              height: 80,
              child: EmojiGrid(),
            ),
```

<figure><img src="https://1152880144-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfGzGiAk2i26VFwzFPfXs%2Fuploads%2FrjhQ7ufL0VuLavojBv9c%2Fimage.png?alt=media&amp;token=0204e06a-866a-4244-88ad-a96e9ee9803f" alt=""><figcaption></figcaption></figure>