Remove hardcoded search (#87)

ubuntu · Feb 15, 2022 · ea5c127 · ea5c127
1 parent 5ccb3eb
commit ea5c127
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 180 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -8,20 +8,54 @@ void main() {
   runApp(Home());
 }
 
-class Home extends StatelessWidget {
+class Home extends StatefulWidget {
   const Home({Key? key}) : super(key: key);
 
+  @override
+  State<Home> createState() => _HomeState();
+}
+
+class _HomeState extends State<Home> {
+  final _filteredItems = <YaruPageItem>[];
+  final _searchController = TextEditingController();
+
+  void _onEscape() => setState(() {
+        _filteredItems.clear();
+        _searchController.clear();
+      });
+
+  void _onSearchChanged(String value) {
+    setState(() {
+      _filteredItems.clear();
+      _filteredItems.addAll(examplePageItems.where((element) =>
+          element.title.toLowerCase().contains(value.toLowerCase())));
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
+      debugShowCheckedModeBanner: false,
       theme: yaruLight,
       darkTheme: yaruDark,
       home: YaruMasterDetailPage(
         leftPaneWidth: 280,
         previousIconData: YaruIcons.go_previous,
         searchHint: 'Search...',
         searchIconData: YaruIcons.search,
-        pageItems: examplePageItems,
+        clearSearchIconData: YaruIcons.window_close,
+        pageItems:
+            _filteredItems.isNotEmpty ? _filteredItems : examplePageItems,
+        appBar: YaruSearchAppBar(
+          searchHint: 'Search...',
+          clearSearchIconData: YaruIcons.window_close,
+          searchController: _searchController,
+          onChanged: _onSearchChanged,
+          onEscape: _onEscape,
+          appBarHeight: 48,
+          searchIconData: YaruIcons.search,
+          automaticallyImplyLeading: false,
+        ),
       ),
     );
   }

diff --git a/lib/src/yaru_landscape_layout.dart b/lib/src/yaru_landscape_layout.dart
@@ -1,61 +1,50 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_widgets/src/yaru_page_item_list_view.dart';
-import 'package:yaru_widgets/src/yaru_search_app_bar.dart';
+
 import 'yaru_page_item.dart';
 
 class YaruLandscapeLayout extends StatefulWidget {
-  // Creates a landscape layout
+  /// Creates a landscape layout
   const YaruLandscapeLayout({
     Key? key,
     required this.selectedIndex,
-    required this.pages,
+    required this.pageItems,
     required this.onSelected,
     required this.leftPaneWidth,
-    this.searchIconData,
-    this.searchHint,
+    this.appBar,
   }) : super(key: key);
 
-  // Current index of the selected page.
+  /// Current index of the selected page.
   final int selectedIndex;
 
-  // Creates horizontal array of pages.
-  // All the `children` will be of type [YaruPageItem]
-  final List<YaruPageItem> pages;
+  /// Creates horizontal array of pages.
+  /// All the `children` will be of type [YaruPageItem]
+  final List<YaruPageItem> pageItems;
 
-  // Callback that returns an index when the page changes.
+  /// Callback that returns an index when the page changes.
   final ValueChanged<int> onSelected;
 
-  // Specifies the width of left pane.
+  /// Specifies the width of left pane.
   final double leftPaneWidth;
 
-  // The icon that is given to the search widget.
-  final IconData? searchIconData;
-
-  // The hint text given to the search widget.
-  final String? searchHint;
+  /// An optional [PreferredSizeWidget] used as the left [AppBar]
+  /// If provided, a second [AppBar] will be created right to it.
+  final PreferredSizeWidget? appBar;
 
   @override
   State<YaruLandscapeLayout> createState() => _YaruLandscapeLayoutState();
 }
 
 class _YaruLandscapeLayoutState extends State<YaruLandscapeLayout> {
   late int _selectedIndex;
-  late TextEditingController _searchController;
-  final _filteredItems = <YaruPageItem>[];
 
   @override
   void initState() {
     _selectedIndex = widget.selectedIndex;
-    _searchController = TextEditingController();
     super.initState();
   }
 
-  void onTap(int index) {
-    if (_filteredItems.isNotEmpty) {
-      index = widget.pages.indexOf(widget.pages.firstWhere(
-          (pageItem) => pageItem.title == _filteredItems[index].title));
-    }
-
+  void _onTap(int index) {
     widget.onSelected(index);
     setState(() => _selectedIndex = index);
   }
@@ -66,19 +55,23 @@ class _YaruLandscapeLayoutState extends State<YaruLandscapeLayout> {
       body: Column(
         children: [
           SizedBox(
-            height:
-                Theme.of(context).appBarTheme.toolbarHeight ?? kToolbarHeight,
+            height: widget.appBar != null
+                ? Theme.of(context).appBarTheme.toolbarHeight ?? kToolbarHeight
+                : 0,
             child: Row(
               children: [
                 SizedBox(
                   width: widget.leftPaneWidth,
-                  child: addSearchBar(),
+                  child: widget.appBar,
                 ),
-                Expanded(
-                  child: AppBar(
-                    title: Text(widget.pages[_selectedIndex].title),
-                  ),
-                )
+                if (widget.appBar != null)
+                  Expanded(
+                    child: AppBar(
+                      title: widget.pageItems.length > _selectedIndex
+                          ? Text(widget.pageItems[_selectedIndex].title)
+                          : Text(widget.pageItems[0].title),
+                    ),
+                  )
               ],
             ),
           ),
@@ -99,47 +92,20 @@ class _YaruLandscapeLayoutState extends State<YaruLandscapeLayout> {
                       ),
                     ),
                     child: YaruPageItemListView(
-                      selectedIndex: _selectedIndex,
-                      onTap: onTap,
-                      pages: _filteredItems.isEmpty
-                          ? widget.pages
-                          : _filteredItems,
-                    ),
+                        selectedIndex: _selectedIndex,
+                        onTap: _onTap,
+                        pages: widget.pageItems),
                   ),
                 ),
-                Expanded(child: widget.pages[_selectedIndex].builder(context)),
+                Expanded(
+                    child: widget.pageItems.length > _selectedIndex
+                        ? widget.pageItems[_selectedIndex].builder(context)
+                        : widget.pageItems[0].builder(context)),
               ],
             ),
           ),
         ],
       ),
     );
   }
-
-  YaruSearchAppBar addSearchBar() {
-    return YaruSearchAppBar(
-      automaticallyImplyLeading: false,
-      searchHint: widget.searchHint,
-      searchController: _searchController,
-      onChanged: (value) {
-        setState(() {
-          _filteredItems.clear();
-          for (YaruPageItem pageItem in widget.pages) {
-            if (pageItem.title
-                .toLowerCase()
-                .contains(_searchController.value.text.toLowerCase())) {
-              _filteredItems.add(pageItem);
-            }
-          }
-        });
-      },
-      onEscape: () => setState(() {
-        _searchController.clear();
-        _filteredItems.clear();
-      }),
-      appBarHeight:
-          Theme.of(context).appBarTheme.toolbarHeight ?? kToolbarHeight,
-      searchIconData: widget.searchIconData,
-    );
-  }
 }
diff --git a/lib/src/yaru_master_detail_page.dart b/lib/src/yaru_master_detail_page.dart
@@ -16,8 +16,6 @@ class YaruMasterDetailPage extends StatefulWidget {
   ///       appBarHeight: 48,
   ///       leftPaneWidth: 280,
   ///       previousIconData: YaruIcons.go_previous,
-  ///       searchHint: 'Search...',
-  ///       searchIconData: YaruIcons.search,
   ///      pageItems: pageItems,
   ///     );
   /// ```
@@ -28,6 +26,8 @@ class YaruMasterDetailPage extends StatefulWidget {
     this.searchIconData,
     required this.leftPaneWidth,
     this.searchHint,
+    this.clearSearchIconData,
+    this.appBar,
   }) : super(key: key);
 
   /// Creates horizontal array of pages.
@@ -45,9 +45,15 @@ class YaruMasterDetailPage extends StatefulWidget {
   /// The icon that is given to the search widget.
   final IconData? searchIconData;
 
+  /// Search icon for search bar.
+  final IconData? clearSearchIconData;
+
   /// The hint text given to the search widget.
   final String? searchHint;
 
+  /// An optional custom AppBar for the left pane.
+  final PreferredSizeWidget? appBar;
+
   @override
   _YaruMasterDetailPageState createState() => _YaruMasterDetailPageState();
 }
@@ -68,20 +74,18 @@ class _YaruMasterDetailPageState extends State<YaruMasterDetailPage> {
         if (constraints.maxWidth < 620) {
           return YaruPortraitLayout(
             selectedIndex: _index,
-            pages: widget.pageItems,
+            pageItems: widget.pageItems,
             onSelected: _setIndex,
             previousIconData: widget.previousIconData,
-            searchIconData: widget.searchIconData,
-            searchHint: widget.searchHint,
+            appBar: widget.appBar,
           );
         } else {
           return YaruLandscapeLayout(
             selectedIndex: _index == -1 ? _previousIndex : _index,
-            pages: widget.pageItems,
+            pageItems: widget.pageItems,
             onSelected: _setIndex,
             leftPaneWidth: widget.leftPaneWidth,
-            searchIconData: widget.searchIconData,
-            searchHint: widget.searchHint,
+            appBar: widget.appBar,
           );
         }
       },