Feature: add base widget

.gitignore

@@ -27,3 +27,5 @@ pubspec.lock
 **/doc/api/
 .dart_tool/
 build/
+
+test_example/

example/lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:icon_gallery/icon_gallery.dart';
+import 'package:icon_gallery/widget/icon_gallery_style.dart';
 
 void main() {
   runApp(const MyApp());
@@ -8,27 +9,11 @@ void main() {
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
 
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // TRY THIS: Try running your application with "flutter run". You'll see
-        // the application has a purple toolbar. Then, without quitting the app,
-        // try changing the seedColor in the colorScheme below to Colors.green
-        // and then invoke "hot reload" (save your changes or press the "hot
-        // reload" button in a Flutter-supported IDE, or press "r" if you used
-        // the command line to start the app).
-        //
-        // Notice that the counter didn't reset back to zero; the application
-        // state is not lost during the reload. To reset the state, use hot
-        // restart instead.
-        //
-        // This works for code too, not just values: Most code changes can be
-        // tested with just a hot reload.
         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
         useMaterial3: true,
       ),
@@ -40,22 +25,15 @@ class MyApp extends StatelessWidget {
 class MyHomePage extends StatefulWidget {
   const MyHomePage({super.key, required this.title});
 
-  // This widget is the home page of your application. It is stateful, meaning
-  // that it has a State object (defined below) that contains fields that affect
-  // how it looks.
-
-  // This class is the configuration for the state. It holds the values (in this
-  // case the title) provided by the parent (in this case the App widget) and
-  // used by the build method of the State. Fields in a Widget subclass are
-  // always marked "final".
-
   final String title;
 
   @override
   State<MyHomePage> createState() => _MyHomePageState();
 }
 
 class _MyHomePageState extends State<MyHomePage> {
+  late TextEditingController searchBarController;
+
   late List<IconDataItem> iconList1;
   late List<IconDataItem> iconList2;
   late List<SvgItem> iconList3;
@@ -64,8 +42,12 @@ class _MyHomePageState extends State<MyHomePage> {
   late SectionItem sectionItem2;
   late SectionItem sectionItem3;
 
+  late IconGalleryStyle style;
+
   @override
   void initState() {
+    searchBarController = TextEditingController();
+
     iconList1 = const [
       IconDataItem(value: Icons.ac_unit, name: 'Ac Unit'),
       IconDataItem(value: Icons.access_alarm, name: 'Access Alarm'),
@@ -110,9 +92,22 @@ class _MyHomePageState extends State<MyHomePage> {
       items: iconList3,
     );
 
+    style = IconGalleryStyle(
+      gridViewMaxCrossAxisExtent: 40,
+      itemColor: Colors.black,
+      itemSize: 30,
+      sectionPadding: const EdgeInsets.symmetric(vertical: 10),
+    );
+
     super.initState();
   }
 
+  @override
+  void dispose() {
+    searchBarController.dispose();
+    super.dispose();
+  }
+
   String selectedIcon = '';
   IconItem? selectedIconValue;
   @override
@@ -123,34 +118,44 @@ class _MyHomePageState extends State<MyHomePage> {
         title: Text(widget.title),
       ),
       body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             Text(
               'selected Item is :$selectedIcon ',
             ),
+            const SizedBox(
+              height: 30,
+            ),
             SizedBox(
               height: 400,
+              width: MediaQuery.sizeOf(context).width * .5,
               child: IconGallery(
-                  selectedIcon: selectedIconValue,
-                  sections: [
-                    sectionItem1,
-                    sectionItem2,
-                    sectionItem3,
-                  ],
-                  onIconSelected: (icon) {
-                    setState(() {
-                      selectedIconValue = icon;
-                      debugPrint('selected icon is $icon');
-                      selectedIcon = selectedIconValue!.name;
-                    });
-                  }),
+                style: style,
+                searchBarController: searchBarController,
+                selectedIcon: selectedIconValue,
+                sections: [
+                  sectionItem1,
+                  sectionItem2,
+                  sectionItem3,
+                ],
+                onIconSelected: (icon) {
+                  setState(() {
+                    selectedIconValue = icon;
+                    debugPrint('selected icon is $icon');
+                    selectedIcon = selectedIconValue!.name;
+                  });
+                },
+              ),
             ),
-            TextButton(onPressed: () {}, child: const Text('Show As Dialog')),
             TextButton(
-                onPressed: () {}, child: const Text('Show As BottomSheet')),
+              onPressed: () {},
+              child: const Text('Show As Dialog'),
+            ),
+            TextButton(
+              onPressed: () {},
+              child: const Text('Show As BottomSheet'),
+            ),
           ],
         ),
       ),

lib/icon_gallery.dart

@@ -1,5 +1,5 @@
-export 'package:icon_gallery/widget/gallery_widget.dart';
-export 'package:icon_gallery/model/type/icon_item.dart';
 export 'package:icon_gallery/model/section_item.dart';
 export 'package:icon_gallery/model/type/icon_data_item.dart';
+export 'package:icon_gallery/model/type/icon_item.dart';
 export 'package:icon_gallery/model/type/svg_item.dart';
+export 'package:icon_gallery/widget/gallery_widget.dart';

lib/model/type/icon_item.dart

@@ -13,7 +13,7 @@ abstract class IconItem<T> with EquatableMixin {
 
   Widget build(
     BuildContext context, {
-    double size = 24,
+    double? size = 24,
     Color? color,
     BoxFit? fit,
   });

lib/model/type/image_assets_item.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:icon_gallery/model/type/icon_item.dart';
+
+class ImageAssetsItem extends IconItem<String> {
+  ImageAssetsItem({
+    required String imagePath,
+    required super.name,
+  }) : super(value: imagePath);
+
+  @override
+  Widget build(
+    BuildContext context, {
+    /// The size of the rendered image. Defaults to 24.
+    double? size = 24,
+    Color? color,
+
+    /// The fit mode for the image. Defaults to BoxFit.none.
+    BoxFit? fit,
+  }) {
+    return Image.asset(
+      value,
+      fit: fit ?? BoxFit.none,
+      width: size,
+      height: size,
+    );
+  }
+}

lib/model/type/image_network_item.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:icon_gallery/model/type/icon_item.dart';
+
+class ImageNetworkItem extends IconItem<String> {
+  ImageNetworkItem({
+    required String url,
+    required super.name,
+  }) : super(
+          value: url,
+        );
+
+  @override
+  Widget build(
+    BuildContext context, {
+    /// The size of the rendered image. Defaults to 24.
+    double? size = 24,
+    Color? color,
+
+    /// The fit mode for the image. Defaults to BoxFit.none.
+    BoxFit? fit,
+  }) {
+    return Image.network(
+      value,
+      fit: fit ?? BoxFit.none,
+      width: size,
+      height: size,
+    );
+  }
+}

lib/src/temp/dialog.dart

@@ -17,7 +17,7 @@ Future<IconValue<T>?> showIconGalleryDialog<T>({
     builder: (context) {
       return AlertDialog(
         title: const Text('Select an Icon'),
-        content: IconGalleryTemp<T>(
+        content: IconGallery<T>(
           items: items,
           selectedItem: selectedItem,
           // TODO(mahmoud): I'm not sure that we have to pop the navigator here or not