chore(example): responsive design

example/lib/animate_camera.dart

@@ -9,7 +9,7 @@ import 'page.dart';
 
 class AnimateCameraPage extends ExamplePage {
   const AnimateCameraPage({super.key})
-      : super(const Icon(Icons.map), 'Camera control, animated');
+      : super(const Icon(Icons.animation), 'Camera control, animated');
 
   @override
   Widget build(BuildContext context) {

example/lib/annotation_order_maps.dart

@@ -1,13 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart'; // ignore: unnecessary_import
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 import 'page.dart';
 import 'util.dart';
 
 class AnnotationOrderPage extends ExamplePage {
   const AnnotationOrderPage({super.key})
-      : super(const Icon(Icons.layers), 'Annotation order maps');
+      : super(const Icon(Icons.layers_outlined), 'Annotation order maps');
 
   @override
   Widget build(BuildContext context) => const AnnotationOrderBody();

example/lib/attribution.dart

@@ -5,7 +5,7 @@ import 'page.dart';
 
 class AttributionPage extends ExamplePage {
   const AttributionPage({super.key})
-      : super(const Icon(Icons.thumb_up), 'Attribution');
+      : super(const Icon(Icons.thumb_up_alt_outlined), 'Map Attribution');
 
   @override
   Widget build(BuildContext context) {

example/lib/click_annotations.dart

@@ -10,7 +10,7 @@ import 'util.dart';
 
 class ClickAnnotationPage extends ExamplePage {
   const ClickAnnotationPage({super.key})
-      : super(const Icon(Icons.check_circle), 'Annotation tap');
+      : super(const Icon(Icons.touch_app_outlined), 'Annotation tap');
 
   @override
   Widget build(BuildContext context) {

example/lib/custom_marker.dart

@@ -12,7 +12,7 @@ const randomMarkerNum = 100;
 
 class CustomMarkerPage extends ExamplePage {
   const CustomMarkerPage({super.key})
-      : super(const Icon(Icons.place), 'Custom marker');
+      : super(const Icon(Icons.place_outlined), 'Custom marker');
 
   @override
   Widget build(BuildContext context) {

example/lib/full_map.dart

@@ -5,7 +5,7 @@ import 'page.dart';
 
 class FullMapPage extends ExamplePage {
   const FullMapPage({super.key})
-      : super(const Icon(Icons.map), 'Full screen map');
+      : super(const Icon(Icons.fullscreen), 'Full screen map');
 
   @override
   Widget build(BuildContext context) {

example/lib/get_map_informations.dart

@@ -5,7 +5,7 @@ import 'page.dart';
 
 class GetMapInfoPage extends ExamplePage {
   const GetMapInfoPage({super.key})
-      : super(const Icon(Icons.info), 'Get map state');
+      : super(const Icon(Icons.info_outline), 'Get map state');
 
   @override
   Widget build(BuildContext context) {

example/lib/given_bounds.dart

@@ -9,7 +9,7 @@ import 'page.dart';
 
 class GivenBoundsPage extends ExamplePage {
   const GivenBoundsPage({super.key})
-      : super(const Icon(Icons.map_sharp), 'Changing given bounds');
+      : super(const Icon(Icons.control_camera), 'Changing given bounds');
 
   @override
   Widget build(BuildContext context) {

example/lib/local_style.dart

@@ -8,7 +8,7 @@ import 'page.dart';
 
 class LocalStylePage extends ExamplePage {
   const LocalStylePage({super.key})
-      : super(const Icon(Icons.map), 'Local style');
+      : super(const Icon(Icons.language), 'Local style');
 
   @override
   Widget build(BuildContext context) {

example/lib/localized_map.dart

@@ -7,7 +7,7 @@ import 'page.dart';
 
 class LocalizedMapPage extends ExamplePage {
   const LocalizedMapPage({super.key})
-      : super(const Icon(Icons.map), 'Localized screen map');
+      : super(const Icon(Icons.language), 'Localized screen map');
 
   @override
   Widget build(BuildContext context) {

example/lib/main.dart

@@ -14,6 +14,7 @@ import 'package:maplibre_gl_example/get_map_informations.dart';
 import 'package:maplibre_gl_example/given_bounds.dart';
 import 'package:maplibre_gl_example/localized_map.dart';
 import 'package:maplibre_gl_example/no_location_permission_page.dart';
+import 'package:url_launcher/url_launcher_string.dart';
 
 import 'animate_camera.dart';
 import 'annotation_order_maps.dart';
@@ -35,40 +36,43 @@ import 'place_symbol.dart';
 import 'scrolling_map.dart';
 import 'sources.dart';
 
-final List<ExamplePage> _allPages = <ExamplePage>[
+final List<ExamplePage> _generalPages = <ExamplePage>[
   const MapUiPage(),
   const FullMapPage(),
   const LocalizedMapPage(),
   const AnimateCameraPage(),
   const MoveCameraPage(),
+  const LocalStylePage(),
+  const ScrollingMapPage(),
+  const OfflineRegionsPage(),
+  const GivenBoundsPage(),
+  const GetMapInfoPage(),
+  const NoLocationPermissionPage(),
+];
+
+final List<ExamplePage> _featurePages = <ExamplePage>[
   const PlaceSymbolPage(),
   const PlaceSourcePage(),
   const LinePage(),
-  const LocalStylePage(),
   const LayerPage(),
   const PlaceCirclePage(),
   const PlaceFillPage(),
-  const ScrollingMapPage(),
-  const OfflineRegionsPage(),
+  const BatchAddPage(),
   const AnnotationOrderPage(),
   const CustomMarkerPage(),
-  const BatchAddPage(),
   const ClickAnnotationPage(),
   const Sources(),
-  const GivenBoundsPage(),
-  const GetMapInfoPage(),
-  const NoLocationPermissionPage(),
   const AttributionPage(),
 ];
 
-class MapsDemo extends StatefulWidget {
-  const MapsDemo({super.key});
+class MapLibreDemo extends StatefulWidget {
+  const MapLibreDemo({super.key});
 
   @override
-  State<MapsDemo> createState() => _MapsDemoState();
+  State<MapLibreDemo> createState() => _MapLibreDemoState();
 }
 
-class _MapsDemoState extends State<MapsDemo> {
+class _MapLibreDemoState extends State<MapLibreDemo> {
   /// Determine the android version of the phone and turn off HybridComposition
   /// on older sdk versions to improve performance for these
   ///
@@ -105,24 +109,88 @@ class _MapsDemoState extends State<MapsDemo> {
 
   @override
   Widget build(BuildContext context) {
+    const gridDelegate = SliverGridDelegateWithMaxCrossAxisExtent(
+      maxCrossAxisExtent: 300,
+      childAspectRatio: 3,
+    );
     return Scaffold(
-      appBar: AppBar(title: const Text('Maplibre examples')),
-      body: ListView.builder(
-        itemCount: _allPages.length + 1,
-        itemBuilder: (_, int index) => index == _allPages.length
-            ? const AboutListTile(
-                applicationName: "flutter-maplibre-gl example",
-              )
-            : ListTile(
-                leading: _allPages[index].leading,
-                title: Text(_allPages[index].title),
-                onTap: () => _pushPage(context, _allPages[index]),
+      appBar: AppBar(title: const Text('MapLibre Example App')),
+      body: CustomScrollView(
+        slivers: [
+          const SliverToBoxAdapter(child: ListSectionTitle('General')),
+          SliverGrid.builder(
+            gridDelegate: gridDelegate,
+            itemCount: _generalPages.length,
+            itemBuilder: (_, int index) => ListTile(
+              leading: _generalPages[index].leading,
+              title: Text(_generalPages[index].title),
+              onTap: () => _pushPage(context, _generalPages[index]),
+            ),
+          ),
+          const SliverToBoxAdapter(child: ListSectionTitle('Map Features')),
+          SliverGrid.builder(
+            gridDelegate: gridDelegate,
+            itemCount: _featurePages.length,
+            itemBuilder: (_, int index) => ListTile(
+              leading: _featurePages[index].leading,
+              title: Text(_featurePages[index].title),
+              onTap: () => _pushPage(context, _featurePages[index]),
+            ),
+          ),
+          const SliverToBoxAdapter(child: ListSectionTitle('About this App')),
+          SliverGrid(
+            gridDelegate: gridDelegate,
+            delegate: SliverChildListDelegate([
+              ListTile(
+                title: const Text("Show licenses"),
+                leading: const Icon(Icons.info_outline),
+                onTap: () => showLicensePage(
+                  context: context,
+                  applicationName: 'MapLibre Example App',
+                ),
+              ),
+              ListTile(
+                title: const Text("View on pub.dev"),
+                leading: const Icon(Icons.flutter_dash),
+                onTap: () =>
+                    launchUrlString("https://pub.dev/packages/maplibre_gl"),
+              ),
+              ListTile(
+                title: const Text("View source code"),
+                leading: const Icon(Icons.code),
+                onTap: () => launchUrlString(
+                    "https://github.com/maplibre/flutter-maplibre-gl"),
               ),
+            ]),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class ListSectionTitle extends StatelessWidget {
+  final String title;
+
+  const ListSectionTitle(this.title, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      title: Text(
+        title,
+        style: TextStyle(fontSize: 18, color: Theme.of(context).primaryColor),
       ),
     );
   }
 }
 
 void main() {
-  runApp(const MaterialApp(home: MapsDemo()));
+  const mapLibreBlue = Color(0x00295daa);
+  final materialTheme = ThemeData(
+    useMaterial3: true,
+    colorSchemeSeed: mapLibreBlue,
+  );
+
+  runApp(MaterialApp(home: const MapLibreDemo(), theme: materialTheme));
 }

example/lib/map_ui.dart

@@ -4,8 +4,8 @@
 
 import 'dart:math';
 
-import 'package:flutter/material.dart';
 import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 import 'page.dart';
@@ -16,7 +16,11 @@ final LatLngBounds sydneyBounds = LatLngBounds(
 );
 
 class MapUiPage extends ExamplePage {
-  const MapUiPage({super.key}) : super(const Icon(Icons.map), 'User interface');
+  const MapUiPage({super.key})
+      : super(
+          const Icon(Icons.accessibility_new_outlined),
+          'User interface',
+        );
 
   @override
   Widget build(BuildContext context) {

example/lib/move_camera.dart

@@ -9,7 +9,7 @@ import 'page.dart';
 
 class MoveCameraPage extends ExamplePage {
   const MoveCameraPage({super.key})
-      : super(const Icon(Icons.map), 'Camera control');
+      : super(const Icon(Icons.control_camera), 'Camera control');
 
   @override
   Widget build(BuildContext context) {

example/lib/no_location_permission_page.dart

@@ -7,7 +7,7 @@ class NoLocationPermissionPage extends ExamplePage {
   const NoLocationPermissionPage({super.key})
       : super(
           const Icon(Icons.gps_off),
-          'Using a map without user location/permission',
+          'No user location permission',
           needsLocationPermission: false,
         );
 

example/lib/offline_regions.dart

@@ -99,7 +99,8 @@ final List<OfflineRegionListItem> allRegions = [
 
 class OfflineRegionsPage extends ExamplePage {
   const OfflineRegionsPage({super.key})
-      : super(const Icon(Icons.map), 'Offline Regions');
+      : super(
+            const Icon(Icons.download_for_offline_outlined), 'Offline Regions');
 
   @override
   Widget build(BuildContext context) {

example/lib/place_batch.dart

@@ -46,7 +46,7 @@ const fillOptions = [
 
 class BatchAddPage extends ExamplePage {
   const BatchAddPage({super.key})
-      : super(const Icon(Icons.check_circle), 'Batch add/remove');
+      : super(const Icon(Icons.list_alt), 'Batch add/remove');
 
   @override
   Widget build(BuildContext context) {

example/lib/place_circle.dart

@@ -12,7 +12,7 @@ import 'page.dart';
 
 class PlaceCirclePage extends ExamplePage {
   const PlaceCirclePage({super.key})
-      : super(const Icon(Icons.check_circle), 'Place circle');
+      : super(const Icon(Icons.circle_outlined), 'Place circle');
 
   @override
   Widget build(BuildContext context) {

example/lib/place_fill.dart

@@ -12,7 +12,7 @@ import 'page.dart';
 
 class PlaceFillPage extends ExamplePage {
   const PlaceFillPage({super.key})
-      : super(const Icon(Icons.check_circle), 'Place fill');
+      : super(const Icon(Icons.format_shapes_outlined), 'Place fill');
 
   @override
   Widget build(BuildContext context) {

example/lib/place_source.dart

@@ -12,7 +12,7 @@ import 'page.dart';
 
 class PlaceSourcePage extends ExamplePage {
   const PlaceSourcePage({super.key})
-      : super(const Icon(Icons.place), 'Place source');
+      : super(const Icon(Icons.place_outlined), 'Place source');
 
   @override
   Widget build(BuildContext context) {

example/lib/place_symbol.dart

@@ -15,7 +15,7 @@ import 'page.dart';
 
 class PlaceSymbolPage extends ExamplePage {
   const PlaceSymbolPage({super.key})
-      : super(const Icon(Icons.place), 'Place symbol');
+      : super(const Icon(Icons.place_outlined), 'Place symbol');
 
   @override
   Widget build(BuildContext context) {

example/lib/scrolling_map.dart

@@ -13,7 +13,7 @@ import 'page.dart';
 
 class ScrollingMapPage extends ExamplePage {
   const ScrollingMapPage({super.key})
-      : super(const Icon(Icons.map), 'Scrolling map');
+      : super(const Icon(Icons.map_outlined), 'Scrolling map');
 
   @override
   Widget build(BuildContext context) {

example/lib/sources.dart

@@ -18,7 +18,8 @@ class StyleInfo {
 }
 
 class Sources extends ExamplePage {
-  const Sources({super.key}) : super(const Icon(Icons.map), 'Various Sources');
+  const Sources({super.key})
+      : super(const Icon(Icons.layers_outlined), 'Various Sources');
 
   @override
   Widget build(BuildContext context) {