Add cse_thumbnail in web search result card. Change to use flutter website as web search cse.

Author: guojiex

README.md

@@ -22,4 +22,4 @@ samples, guidance on mobile development, and a full API reference.
 
 ### watch demo on youtube.
 
-[![demo_on_youtube](https://img.youtube.com/vi/XGHUHn-C780/hqdefault.jpg)](https://youtu.be/XGHUHn-C780)
+[![demo_on_youtube](https://img.youtube.com/vi/F0SX3IMYbv8/hqdefault.jpg)](https://youtu.be/F0SX3IMYbv8)

lib/custom_search_search_delegate.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter_app_cse/search_data_source.dart';
 
 import 'ui/no_result_card.dart';
@@ -206,30 +207,6 @@ class CustomSearchSearchDelegate extends SearchDelegate<SearchResult> {
   }
 }
 
-class KeepAliveFutureBuilder extends StatefulWidget {
-  final Future future;
-  final AsyncWidgetBuilder builder;
-
-  KeepAliveFutureBuilder({this.future, this.builder});
-
-  @override
-  _KeepAliveFutureBuilderState createState() => _KeepAliveFutureBuilderState();
-}
-
-class _KeepAliveFutureBuilderState extends State<KeepAliveFutureBuilder>
-    with AutomaticKeepAliveClientMixin {
-  @override
-  Widget build(BuildContext context) {
-    return FutureBuilder(
-      future: widget.future,
-      builder: widget.builder,
-    );
-  }
-
-  @override
-  bool get wantKeepAlive => true;
-}
-
 /// A SearchDelegate that will render the result page as infinite scroll view.
 class CustomSearchInfiniteSearchDelegate extends CustomSearchSearchDelegate {
   CustomSearchInfiniteSearchDelegate({dataSource,
@@ -275,10 +252,14 @@ class CustomSearchInfiniteSearchDelegate extends CustomSearchSearchDelegate {
   }
 
   _loadNextPage() {
+
     dataSource.search(currentSearchResults.nextPage).then((value) {
       this.currentSearchResults = value;
       this.currentResultLength +=
           this.currentSearchResults.searchResults.length;
+      debugPrint(
+          'current result length ${this.currentSearchResults.searchResults
+              .length}');
     });
   }
 

lib/search_data_source.dart

@@ -62,6 +62,7 @@ class SearchResults {
   List<SearchResult> searchResults = List<SearchResult>();
   List<Promotion> promotions = List<Promotion>();
   SearchQuery nextPage;
+  SearchQuery previousPage;
 
   SearchResults.empty();
 
@@ -72,6 +73,12 @@ class SearchResults {
     // Deduplicate search result.
     this.searchResults = Set<SearchResult>.from(results).toList();
   }
+
+  @override
+  String toString() {
+    return 'SearchResults{searchResults: $searchResults, nextPage: $nextPage}';
+  }
+
 }
 
 /// A wrapper class for search request, to make caching search request possible.
@@ -184,6 +191,10 @@ class SearchQuery {
       result.nextPage =
           this.copyWith(start: search.queries['nextPage'][0].startIndex);
     }
+    if (search.queries['previousPage'] != null) {
+      result.previousPage =
+          this.copyWith(start: search.queries['previousPage'][0].startIndex);
+    }
     return result;
   }
 
@@ -349,7 +360,7 @@ class _StaticSearchResponse {
       {this.assetPath, this.searchType, this.searchResponseJsonString});
 }
 
-/// A fake search data source, that reads data from flutter assests.
+/// A fake search data source, that reads data from flutter assets.
 ///
 /// Choose to do the caching in this class, rather than in the
 /// [SearchDelegate.showResults]. Because this is controllable by developer,
@@ -409,7 +420,7 @@ class FakeSearchDataSource implements SearchDataSource {
   }
 }
 
-/// The search data source that uses Custom Search API.
+/// Cached search data source that uses Custom Search API.
 ///
 /// Choose to do the caching in this class, rather than in the
 /// [SearchDelegate.showResults]. Because this is controllable by developer,
@@ -445,6 +456,7 @@ class CustomSearchDataSource implements SearchDataSource {
     }
 
     final result = await searchQuery.runSearch(this.api);
+    print('call search backend');
     _cache.set(searchQuery, result);
     return result;
   }

lib/ui/custom_search_demo_page.dart

@@ -66,6 +66,7 @@ class _CustomSearchDemoPageState extends State<CustomSearchDemoPage> {
   }
 
   _CustomSearchDemoPageState.customImageSearch() {
+    // Pokemon db.
     this.delegate = new CustomSearchInfiniteSearchDelegate.imageSearch(
         dataSource: CustomSearchDataSource(
             cx: '013098254965507895640:wyytcpldjbw',
@@ -77,9 +78,10 @@ class _CustomSearchDemoPageState extends State<CustomSearchDemoPage> {
   }
 
   _CustomSearchDemoPageState.customWebSearch() {
+    // Flutter
     this.delegate = new CustomSearchInfiniteSearchDelegate(
         dataSource: CustomSearchDataSource(
-            cx: '013098254965507895640:0l32iqt_8jq',
+            cx: '013098254965507895640:ebp1trsjo0a',
             apiKey: ''));
     this.hintText = 'Google Custom Web Search';
     otherRoutes = [

lib/ui/web_search_result_card.dart

@@ -32,7 +32,9 @@ class WebSearchResultCard extends StatelessWidget {
 
   Widget _generateBodyTile(BuildContext context) {
     final ThemeData theme = Theme.of(context);
-    bool haveThumbnail = this.searchResult.result.pagemap['thumbnail'] != null;
+    bool haveThumbnail =
+        this.searchResult.result.pagemap['thumbnail'] != null ||
+            this.searchResult.result.pagemap['cse_thumbnail'] != null;
     if (!haveThumbnail) {
       return Container(
         padding: const EdgeInsets.only(
@@ -57,8 +59,10 @@ class WebSearchResultCard extends StatelessWidget {
           Expanded(
               flex: 1,
               child: Image.network(
-                  this.searchResult.result.pagemap['thumbnail'][0]['src'])
-          ),
+                  this.searchResult.result.pagemap['thumbnail'] != null
+                      ? this.searchResult.result.pagemap['thumbnail'][0]['src']
+                      : this.searchResult.result.pagemap['cse_thumbnail'][0]
+                  ['src'])),
           Expanded(
               flex: 4,
               child: Container(