feat: Add custom headers support to ShadImage for network images (#…

…162)

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.11.1
+
+- **FEAT**: Add `headers` to `ShadImage` to allow custom headers in the network requests.
+
 ## 0.11.0
 
 - **FEAT**: Add `ShadSelect.multiple`, `ShadSelect.multipleWithSearch`, `ShadSelectMultipleFormField` and `ShadSelectMultipleFormField.withSearch` constructors.

example/lib/pages/image.dart

@@ -16,6 +16,13 @@ class ImagePage extends StatelessWidget {
           'https://avatars.githubusercontent.com/u/124599?v=4',
           size: 50,
         ),
+        ShadImage.square(
+          'https://avatars.githubusercontent.com/u/124599?v=4',
+          size: 50,
+          headers: {
+            'User-Agent': 'Mozilla/5.0',
+          },
+        ),
         ShadImage.square(
           Assets.flutter,
           size: 50,

lib/src/components/image.dart

@@ -36,6 +36,7 @@ class ShadImage<T extends ShadImageSrc> extends StatelessWidget {
     this.semanticLabel,
     this.svgTheme,
     this.package,
+    this.headers,
   }) : assert(
           src is String || src is IconData,
           'src must be a String or IconData',
@@ -55,6 +56,7 @@ class ShadImage<T extends ShadImageSrc> extends StatelessWidget {
     this.semanticLabel,
     this.svgTheme,
     this.package,
+    this.headers,
   })  : width = size,
         height = size,
         assert(
@@ -106,6 +108,10 @@ class ShadImage<T extends ShadImageSrc> extends StatelessWidget {
   /// The package of the image, if any.
   final String? package;
 
+  /// If the image is remote,
+  /// the optional HTTP headers to send as part of the request.
+  final Map<String, String>? headers;
+
   /// Returns `true` if the image is remote.
   bool get isRemote => Uri.tryParse(src as String)?.host.isNotEmpty ?? false;
 
@@ -162,6 +168,7 @@ class ShadImage<T extends ShadImageSrc> extends StatelessWidget {
             colorFilter: colorFilter,
             clipBehavior: Clip.antiAlias,
             alignment: alignment,
+            headers: headers,
             placeholderBuilder:
                 placeholder != null ? (_) => placeholder! : null,
             semanticsLabel: semanticLabel,
@@ -176,6 +183,7 @@ class ShadImage<T extends ShadImageSrc> extends StatelessWidget {
             color: imageColor,
             alignment: alignment,
             isAntiAlias: antialiasing,
+            headers: headers,
             frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
               if (frame == null) {
                 return placeholder ?? const SizedBox.shrink();

playground/lib/pages/image.dart

@@ -4,6 +4,7 @@ import 'package:shadcn_ui/shadcn_ui.dart';
 enum ImageStyle {
   local,
   remote,
+  remoteWithHeaders,
   svg,
 }
 
@@ -30,6 +31,13 @@ class ImagePage extends StatelessWidget {
                 'https://avatars.githubusercontent.com/u/124599?v=4',
                 size: 50,
               ),
+            ImageStyle.remoteWithHeaders => const ShadImage.square(
+                'https://avatars.githubusercontent.com/u/124599?v=4',
+                size: 50,
+                headers: {
+                  'User-Agent': 'Mozilla/5.0',
+                },
+              ),
             ImageStyle.svg => const ShadImage.square(
                 'assets/flutter.svg',
                 size: 50,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: shadcn_ui
 description: shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.
-version: 0.11.0
+version: 0.11.1
 homepage: https://mariuti.com/shadcn-ui
 repository: https://github.com/nank1ro/flutter-shadcn-ui
 documentation: https://mariuti.com/shadcn-ui