Merge pull request #12 from Rahiche/add-music-playlist-sample

Add music player example

.github/workflows/flutter_tests.yml

@@ -25,8 +25,5 @@ jobs:
       - name: Install dependencies
         run: flutter pub get
 
-      - name: Run Flutter Tests
-        run: flutter test --update-goldens
-
       - name: Run Widget Tests
         run: flutter test test/soft_edge_blur_test.dart

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.2
+* Resposnsive and updated map demo thanks to @sgruhier 
+* Added a new music playlist example 
+
 ## 0.1.1
 * Breaking change: EdgeBlur control now requires the use of named parameters
 * Added support for tint color

README.md

@@ -9,23 +9,20 @@ A Flutter package that provides a customizable soft progressive blur effect for
 <img width="547" alt="Map blurred" src="https://i.imgur.com/7DcixDz.png">
 
 
- # Example video
-
-
-https://github.com/user-attachments/assets/3a708b6d-5ed0-4717-a3c7-313c4ed7e2b6
-
-
-
-
-## Example images
-## Control points
+## Demos
+## Map - with control points
 | ![](https://i.imgur.com/ZHTocas.png) | ![](https://i.imgur.com/ejYRoGu.png) |
 |--------------------------------------|--------------------------------------|
 | ![](https://i.imgur.com/2B4RJo2.png) | ![](https://i.imgur.com/lrVGtHU.png) |
 
-## Tint Color
+## Airbnb Card with tint color
+
 <img width="522" alt="Screenshot 2024-09-17 at 22 22 01" src="https://github.com/user-attachments/assets/91155a1d-7552-4e22-922c-402192d46149">
 
+## Music play list with tint color
+
+<img width="522" alt="Screenshot 2024-09-17 at 22 22 01" src="https://i.imgur.com/QjmfnIL.jpeg">
+
 ## Usage
 
 Import the package in your Dart code:

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:example/samples/music_playlist.dart';
 import 'package:flutter/material.dart';
 import 'package:example/samples/airbnb.dart';
 import 'package:example/samples/map.dart';
@@ -52,6 +53,18 @@ class AppChooserHome extends StatelessWidget {
               },
               child: const Text('Map App'),
             ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: () {
+                Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                    builder: (context) => const MusicPlayerHome(),
+                  ),
+                );
+              },
+              child: const Text('Music Playlist'),
+            ),
           ],
         ),
       ),

example/lib/samples/map.dart

@@ -56,14 +56,14 @@ class _HomePageState extends State<HomePage> {
           ? FloatingActionButton(
               onPressed: () {
                 showModalBottomSheet(
-                  backgroundColor: Theme.of(context).scaffoldBackgroundColor, // Use the default background color
+                  backgroundColor: Theme.of(context).scaffoldBackgroundColor,
                   context: context,
                   isScrollControlled: true,
                   builder: (BuildContext context) {
                     return Theme(
-                        data: Theme.of(context), // Use the current theme
-
-                        child: _buildControlsSheet());
+                      data: Theme.of(context),
+                      child: _buildControlsSheet(),
+                    );
                   },
                 );
               },
@@ -152,7 +152,7 @@ class ControlsSheet extends StatefulWidget {
   final ValueChanged<Set<EdgeType>> onEdgesChanged;
   final ValueChanged<double> onEdgeSizeChanged;
   final ValueChanged<double> onBlurSigmaChanged;
-  final ValueChanged<List<ControlPoint>> onControlPointsChanged; // Add this callback
+  final ValueChanged<List<ControlPoint>> onControlPointsChanged;
   final VoidCallback onUpdate;
 
   const ControlsSheet({
@@ -164,7 +164,7 @@ class ControlsSheet extends StatefulWidget {
     required this.onEdgesChanged,
     required this.onEdgeSizeChanged,
     required this.onBlurSigmaChanged,
-    required this.onControlPointsChanged, // Include in constructor
+    required this.onControlPointsChanged,
     required this.onUpdate,
   });
 
@@ -201,7 +201,8 @@ class _ControlsSheetState extends State<ControlsSheet> {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              const Text('Settings', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
+              const Text('Settings',
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
               const SizedBox(height: 16),
               const Text('Blur position'),
               const SizedBox(height: 8),
@@ -213,9 +214,12 @@ class _ControlsSheetState extends State<ControlsSheet> {
                   selected: _localSelectedEdges,
                   segments: const [
                     ButtonSegment(value: EdgeType.topEdge, label: Text('Top')),
-                    ButtonSegment(value: EdgeType.bottomEdge, label: Text('Bottom')),
-                    ButtonSegment(value: EdgeType.leftEdge, label: Text('Left')),
-                    ButtonSegment(value: EdgeType.rightEdge, label: Text('Right')),
+                    ButtonSegment(
+                        value: EdgeType.bottomEdge, label: Text('Bottom')),
+                    ButtonSegment(
+                        value: EdgeType.leftEdge, label: Text('Left')),
+                    ButtonSegment(
+                        value: EdgeType.rightEdge, label: Text('Right')),
                   ],
                   onSelectionChanged: (Set<EdgeType> selectedEdges) {
                     setState(() {
@@ -258,7 +262,8 @@ class _ControlsSheetState extends State<ControlsSheet> {
                 },
               ),
               const SizedBox(height: 32),
-              const Text('Control Points', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
+              const Text('Control Points',
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
               const SizedBox(height: 16),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -270,7 +275,8 @@ class _ControlsSheetState extends State<ControlsSheet> {
                     onPressed: () {
                       setState(() {
                         _localControlPoints.add(
-                          ControlPoint(position: 0.5, type: ControlPointType.visible),
+                          ControlPoint(
+                              position: 0.5, type: ControlPointType.visible),
                         );
                         widget.onControlPointsChanged(_localControlPoints);
                       });
@@ -304,18 +310,20 @@ class _ControlsSheetState extends State<ControlsSheet> {
                 onChanged: (double value) {
                   setState(() {
                     cp.position = value;
-                    _localControlPoints.sort((a, b) => a.position.compareTo(b.position));
                     widget.onControlPointsChanged(_localControlPoints);
                   });
                 },
               ),
             ),
             IconButton(
-              icon: Icon(cp.type == ControlPointType.visible ? Icons.visibility : Icons.visibility_off),
+              icon: Icon(cp.type == ControlPointType.visible
+                  ? Icons.visibility
+                  : Icons.visibility_off),
               onPressed: () {
                 setState(() {
-                  cp.type =
-                      cp.type == ControlPointType.visible ? ControlPointType.transparent : ControlPointType.visible;
+                  cp.type = cp.type == ControlPointType.visible
+                      ? ControlPointType.transparent
+                      : ControlPointType.visible;
                   widget.onControlPointsChanged(_localControlPoints);
                 });
               },

example/lib/samples/music_playlist.dart

@@ -0,0 +1,174 @@
+import 'package:flutter/material.dart';
+import 'package:soft_edge_blur/soft_edge_blur.dart';
+
+class MusicPlayerHome extends StatefulWidget {
+  const MusicPlayerHome({super.key});
+
+  @override
+  State<MusicPlayerHome> createState() => _MusicPlayerHomeState();
+}
+
+class _MusicPlayerHomeState extends State<MusicPlayerHome> {
+  int _selectedIndex = 0;
+  final List<Song> songs = [
+    Song("The Innovators", "Walter Isaacson", "17:28",
+        "https://picsum.photos/200"),
+    Song("Sapiens: A Brief History of Humankind", "Yuval Noah Harari", "15:17",
+        "https://picsum.photos/201"),
+    Song("The Phoenix Project", "Gene Kim, Kevin Behr, George Spafford",
+        "14:46", "https://picsum.photos/202"),
+    Song("Algorithms to Live By", "Brian Christian, Tom Griffiths", "11:50",
+        "https://picsum.photos/203"),
+    Song("AI Superpowers", "Kai-Fu Lee", "9:28", "https://picsum.photos/204"),
+    Song("The Lean Startup", "Eric Ries", "8:38", "https://picsum.photos/205"),
+    Song("Zero to One", "Peter Thiel, Blake Masters", "4:50",
+        "https://picsum.photos/206"),
+    Song("Hooked", "Nir Eyal", "4:40", "https://picsum.photos/207"),
+    Song("The Pragmatic Programmer", "David Thomas, Andrew Hunt", "9:22",
+        "https://picsum.photos/208"),
+    Song("Superintelligence", "Nick Bostrom", "14:17",
+        "https://picsum.photos/209"),
+    Song("Life 3.0", "Max Tegmark", "13:29", "https://picsum.photos/210"),
+    Song("The Code Breaker", "Walter Isaacson", "16:04",
+        "https://picsum.photos/211"),
+    Song("Everybody Lies", "Seth Stephens-Davidowitz", "7:39",
+        "https://picsum.photos/212"),
+    Song("Permanent Record", "Edward Snowden", "11:31",
+        "https://picsum.photos/213"),
+    Song("The Age of AI", "Henry Kissinger, Eric Schmidt, Daniel Huttenlocher",
+        "19:10", "https://picsum.photos/214"),
+  ];
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Music Player'),
+        backgroundColor: Colors.black,
+      ),
+      backgroundColor: Colors.transparent,
+      body: _buildBlurredEdge(),
+      extendBody: true,
+      bottomNavigationBar: Container(
+        decoration: const BoxDecoration(
+          color: Colors.transparent,
+          borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+        ),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
+            children: [
+              _buildNavItem(0, 'Songs', Icons.music_note),
+              _buildNavItem(1, 'Artists', Icons.person_2_outlined),
+              _buildNavItem(2, 'Albums', Icons.image_outlined),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  SoftEdgeBlur _buildBlurredEdge() {
+    return SoftEdgeBlur(
+      edges: [
+        EdgeBlur(
+          type: EdgeType.bottomEdge,
+          size: 200,
+          sigma: 30,
+          tintColor: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.8),
+          controlPoints: [
+            ControlPoint(
+              position: 0.4,
+              type: ControlPointType.visible,
+            ),
+            ControlPoint(
+              position: 1.0,
+              type: ControlPointType.transparent,
+            ),
+          ],
+        )
+      ],
+      child: _buildContent(),
+    );
+  }
+
+  Stack _buildContent() {
+    return Stack(
+      children: [
+        Container(
+          color: Theme.of(context).scaffoldBackgroundColor,
+          child: ListView.builder(
+            itemCount: songs.length,
+            itemBuilder: (context, index) {
+              return ListTile(
+                leading: ClipRRect(
+                  borderRadius: BorderRadius.circular(4),
+                  child: Image.network(
+                    songs[index].imageUrl,
+                    width: 50,
+                    height: 50,
+                    fit: BoxFit.cover,
+                    errorBuilder: (context, error, stackTrace) {
+                      return const Icon(Icons.music_note, size: 50);
+                    },
+                  ),
+                ),
+                title: Text(songs[index].title),
+                subtitle: Text(songs[index].artist),
+                trailing: Text(songs[index].duration),
+              );
+            },
+          ),
+        ),
+        Align(
+          alignment: Alignment.bottomCenter,
+          child: Container(
+            color: Theme.of(context).scaffoldBackgroundColor,
+            height: 50,
+          ),
+        )
+      ],
+    );
+  }
+
+  Widget _buildNavItem(int index, String label, IconData icon) {
+    final isSlected = _selectedIndex == index;
+    return GestureDetector(
+      onTap: () => setState(() => _selectedIndex = index),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          AnimatedContainer(
+            duration: Durations.medium1,
+            decoration: BoxDecoration(
+              color: isSlected ? Colors.white : Colors.transparent,
+              borderRadius: BorderRadius.circular(24),
+            ),
+            padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
+            child: Icon(
+              icon,
+              color: isSlected ? Colors.black : Colors.grey,
+            ),
+          ),
+          const SizedBox(height: 4),
+          Text(
+            label,
+            style: TextStyle(
+              color: isSlected ? Colors.white : Colors.grey,
+              fontSize: 12,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class Song {
+  final String title;
+  final String artist;
+  final String duration;
+  final String imageUrl;
+
+  Song(this.title, this.artist, this.duration, this.imageUrl);
+}

pubspec.yaml

@@ -1,6 +1,6 @@
 name: soft_edge_blur
 description: "A customizable Flutter widget that applies a soft progressive blur effect to one or more edges of its child widget."
-version: 0.1.1
+version: 0.1.2
 repository: https://github.com/Rahiche/soft_edge_blur
 
 environment: