Update READMEs

README.md

@@ -1,19 +1,25 @@
-<h1 align="center">
-  Popover
-</h1>
+<h1 align="center">Popover</h1>
 
 <p align="center">
-Popover for Flutter
+  <a href="https://github.com/minikin/popover/">
+    <img src="https://i.ibb.co/WGZ3tbB/popover-demo-no-background.png" alt="Popover screenshots" />
+  </a>
+<h2 align="center">Popover for Flutter</h2>
 </p>
 
 <p align="center">
+  <a href="https://github.com/minikin/popover/actions">
+    <img src="https://github.com/minikin/popover/workflows/On%20Pull%20Request/badge.svg" alt="Current Build Status." />
+  </a>
+
   <a href="https://github.com/minikin/popover/blob/main/LICENSE">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Popover is released under the MIT license." />
   </a>
-  <a href="https://github.com/minikin/popover/actions">
-    <img src="https://github.com/minikin/popover/workflows/On%20Pull%20Request/badge.svg" alt="Current Build Status." />
+
+  <a href="https://github.com/tenhobi/effective_dart">
+    <img src="https://img.shields.io/badge/style-effective_dart-40c4ff.svg" alt="Effective Dart" />
   </a>
-  <a href="https://github.com/tenhobi/effective_dart"><img src="https://img.shields.io/badge/style-effective_dart-40c4ff.svg" alt="style: effective dart"></a>
+
   <a href="https://github.com/minikin/popover/blob/main/CODE_OF_CONDUCT.md">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>

example/README.md

@@ -1,16 +1,78 @@
 # Popover Example
 
-A new Flutter project.
+```dart
 
-## Getting Started
+import 'package:flutter/material.dart';
+import 'package:popover/popover.dart';
 
-This project is a starting point for a Flutter application.
+class PopoverItems extends StatelessWidget {
+  const PopoverItems({Key key}) : super(key: key);
 
-A few resources to get you started if this is your first Flutter project:
-
-- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
-
-For help getting started with Flutter, view our
-[online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+  @override
+  Widget build(BuildContext context) {
+    return Popover(
+      width: 200,
+      child: Container(
+        width: 80,
+        height: 40,
+        decoration: const BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.all(Radius.circular(5)),
+          boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 5)],
+        ),
+        child: const Center(child: Text('Click Me')),
+      ),
+      builder: (context) {
+        return Scrollbar(
+          child: Padding(
+            padding: const EdgeInsets.only(top: 8, bottom: 8),
+            child: ListView(
+              padding: const EdgeInsets.all(8),
+              children: [
+                InkWell(
+                  onTap: () => Navigator.of(context).pop(),
+                  child: Container(
+                    height: 50,
+                    color: Colors.amber[100],
+                    child: const Center(child: Text('Entry A')),
+                  ),
+                ),
+                const Divider(),
+                Container(
+                  height: 50,
+                  color: Colors.amber[200],
+                  child: const Center(child: Text('Entry B')),
+                ),
+                const Divider(),
+                Container(
+                  height: 50,
+                  color: Colors.amber[300],
+                  child: const Center(child: Text('Entry C')),
+                ),
+                const Divider(),
+                Container(
+                  height: 50,
+                  color: Colors.amber[400],
+                  child: const Center(child: Text('Entry D')),
+                ),
+                const Divider(),
+                Container(
+                  height: 50,
+                  color: Colors.amber[500],
+                  child: const Center(child: Text('Entry E')),
+                ),
+                const Divider(),
+                Container(
+                  height: 50,
+                  color: Colors.amber[600],
+                  child: const Center(child: Text('Entry F')),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+```