Adding TopNews

lib/ui/view/search/search.dart

@@ -1,9 +1,19 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:le_kiosque_by_gcs/model/magazine.dart';
+import 'package:le_kiosque_by_gcs/ui/custom/item_mag_large.dart';
 import 'package:le_kiosque_by_gcs/ui/view/search/item_mag_search.dart';
 
-class SearchView extends StatelessWidget {
+import 'item_mag_large_search.dart';
+
+class SearchView extends StatefulWidget {
+  @override
+  _SearchViewState createState() => _SearchViewState();
+}
+
+class _SearchViewState extends State<SearchView> {
+  bool _isGrid = false;
+
   @override
   Widget build(BuildContext context) {
     // TODO: Removing test data
@@ -40,27 +50,94 @@ class SearchView extends StatelessWidget {
           ),
         ),
       ),
-      body: ListView.builder(
-        itemCount: magazinesTest.length + 1,
-        itemBuilder: (context, index) {
-          if (index == 0) {
-            return Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: Text(
-                "Recherches récentes",
-                style: TextStyle(
-                  fontSize: 22,
-                  color: Color(0xFF3B3B3B),
+      body: _isGrid ? _buildGrid() : _buildList(),
+    );
+  }
+
+  Widget _buildList() {
+    return ListView.builder(
+      itemCount: magazinesTest.length + 1,
+      itemBuilder: (context, index) {
+        if (index == 0) {
+          return Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  "Recherches récentes",
+                  style: TextStyle(
+                    fontSize: 22,
+                    color: Color(0xFF3B3B3B),
+                  ),
                 ),
-              ),
-            );
-          } else {
-            return ItemMagazineSearch(
-              magazine: magazinesTest[index - 1],
-            );
-          }
-        },
-      ),
+                InkWell(
+                  onTap: () => _updateListAppearance(),
+                  child: Icon(
+                    _isGrid ? Icons.list : Icons.grid_view,
+                  ),
+                )
+              ],
+            ),
+          );
+        } else {
+          return ItemMagazineSearch(
+            magazine: magazinesTest[index - 1],
+          );
+        }
+      },
+    );
+  }
+
+  _updateListAppearance() {
+    setState(() {
+      _isGrid = !_isGrid;
+    });
+  }
+
+  Widget _buildGrid() {
+    return CustomScrollView(
+      slivers: [
+        SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  "Recherches récentes",
+                  style: TextStyle(
+                    fontSize: 22,
+                    color: Color(0xFF3B3B3B),
+                  ),
+                ),
+                InkWell(
+                  onTap: () => _updateListAppearance(),
+                  child: Icon(
+                    _isGrid ? Icons.list : Icons.grid_view,
+                  ),
+                )
+              ],
+            ),
+          ),
+        ),
+        SliverPadding(
+          padding: EdgeInsets.all(16),
+          sliver: SliverGrid(
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 2,
+              mainAxisSpacing: 16.0,
+              crossAxisSpacing: 16.0,
+              mainAxisExtent: 250,
+            ),
+            delegate: SliverChildBuilderDelegate(
+              (context, int index) =>
+                  ItemMagLargeSearch(magazine: magazinesTest[index]),
+              childCount: magazinesTest.length,
+            ),
+          ),
+        ),
+      ],
     );
   }
 }