Adding Search View

2021-03-22 17:56:42 +02:00
parent e407b4ff45
commit ce237c13a4
6 changed files with 143 additions and 10 deletions
@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:le_kiosque_by_gcs/model/magazine.dart';
+
+class ItemMagazineSearch extends StatelessWidget {
+  const ItemMagazineSearch({
+    Key key,
+    @required this.magazine,
+  }) : super(key: key);
+
+  final Magazine magazine;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(top: 16, left: 16, right: 16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            children: [
+              Container(
+                height: 50,
+                width: 50,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  image: DecorationImage(
+                    image: NetworkImage(magazine.urlCover),
+                    fit: BoxFit.cover,
+                  ),
+                ),
+              ),
+              Padding(
+                padding: EdgeInsets.only(left: 16.0),
+                child: Text(
+                  magazine.title,
+                  style: TextStyle(
+                    fontSize: 16,
+                    color: Color(0xFF3B3B3B),
+                  ),
+                ),
+              ),
+            ],
+          ),
+          InkWell(
+            onTap: () => _removeRecentSearch(context),
+            child: Icon(
+              Icons.close,
+              color: Color(0xFF5D5D5D),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  _removeRecentSearch(BuildContext context) {}
+}
@@ -0,0 +1,66 @@
+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/view/search/item_mag_search.dart';
+
+class SearchView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // TODO: Removing test data
+    return Scaffold(
+      appBar: AppBar(
+        toolbarHeight: 65,
+        backgroundColor: Colors.white,
+        iconTheme: IconThemeData(
+          color: Color(0xFF545454), //change your color here
+        ),
+        title: SizedBox(
+          height: 46,
+          child: TextField(
+            maxLines: 1,
+            decoration: InputDecoration(
+              contentPadding: EdgeInsets.all(8),
+              prefixIcon: Icon(
+                Icons.search,
+                color: Color(0xFF545454),
+              ),
+              hintText: 'Rechercher un article',
+              border: OutlineInputBorder(
+                borderRadius: const BorderRadius.all(
+                  const Radius.circular(32.0),
+                ),
+                borderSide: BorderSide(
+                  width: 0,
+                  style: BorderStyle.none,
+                ),
+              ),
+              filled: true,
+              fillColor: Colors.grey[200],
+            ),
+          ),
+        ),
+      ),
+      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),
+                ),
+              ),
+            );
+          } else {
+            return ItemMagazineSearch(
+              magazine: magazinesTest[index - 1],
+            );
+          }
+        },
+      ),
+    );
+  }
+}