mhakantekbas · mhakantekbas · Jan 8, 2023 · Jan 8, 2023 · Jan 9, 2023 · Jan 9, 2023
diff --git a/lib/constants/constants.dart b/lib/constants/constants.dart
@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class Constants {
+  Constants._();
+  static const Color secondaryPrimaryColor = Color.fromARGB(255, 53, 83, 88);
+
+  static const Color secondaryColor = Color.fromARGB(255, 255, 205, 55);
+
+  static const Color primaryColor = Color.fromRGBO(53, 83, 88, 1);
+
+// Fonts
+  static TextStyle kTextStyleHeading = TextStyle(
+      fontFamily: GoogleFonts.ubuntu().toString(),
+      fontSize: 16.0,
+      overflow: TextOverflow.ellipsis,
+      color: Colors.grey);
+
+  static TextStyle kTextStyleSubheading = TextStyle(
+    fontFamily: GoogleFonts.ubuntu().toString(),
+    fontSize: 14.0,
+    overflow: TextOverflow.ellipsis,
+  );
+
+  static TextStyle kTextStyleBookTitle = GoogleFonts.ubuntu(fontSize: 25);
+
+  static TextStyle kTextStyleBookCategory = GoogleFonts.ubuntu(fontSize: 20);
+
+  static TextStyle kTextStyleMenuHeader =
+      GoogleFonts.ubuntu(fontSize: 15, fontWeight: FontWeight.bold);
+
+  static const TextStyle kTextStyleBody = TextStyle(
+    fontSize: 16.0,
+  );
+}
diff --git a/lib/main.dart b/lib/main.dart
@@ -2,6 +2,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:term_project/constants/constants.dart';
 import 'package:term_project/pages/BaseWidget.dart';
 import 'package:term_project/pages/BookDetailPage.dart';
 import 'package:term_project/pages/BookListPage.dart';
@@ -38,10 +39,10 @@ class MyApp extends StatelessWidget {
         title: 'Book List',
         theme: ThemeData(
             colorScheme: ColorScheme.fromSwatch()
-                .copyWith(primary: const Color.fromRGBO(53, 83, 88, 1))),
+                .copyWith(primary: Constants.secondaryPrimaryColor)),
         routes: {
           '/': (context) => const HasData(),
-          BookListScreen.routeName: (context) => BookPage(),
+          BookPage.routeName: (context) => BookPage(),
           SettingsPage.routeName: (context) => SettingsPage(),
           SignInPage.routeName: (context) => SignInPage(),
           OnBoarding.routeName: (context) => const OnBoarding(),

diff --git a/lib/pages/BaseWidget.dart b/lib/pages/BaseWidget.dart
@@ -1,5 +1,6 @@
 import 'package:curved_navigation_bar/curved_navigation_bar.dart';
 import 'package:flutter/material.dart';
+import 'package:term_project/constants/constants.dart';
 import 'package:term_project/pages/search_page.dart';
 
 import 'BookListPage.dart';
@@ -36,7 +37,7 @@ class _BottomBarState extends State<BottomBar> {
           });
         },
         animationDuration: const Duration(milliseconds: 350),
-        color: const Color.fromRGBO(53, 83, 88, 1),
+        color: Constants.primaryColor,
         backgroundColor: Colors.white,
         items: const [
           Icon(

diff --git a/lib/pages/BookDetailPage.dart b/lib/pages/BookDetailPage.dart
@@ -37,12 +37,12 @@ class _BookDetailPageState extends State<BookDetailPage> {
       body: SingleChildScrollView(
           child:
               Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-        GestureDetector(
-          onTap: () => Navigator.pop(context),
-          child: Container(
-              padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
-              child: Icon(Icons.arrow_back_ios_new_outlined)),
-        ),
+        Container(
+            padding: EdgeInsets.fromLTRB(20, 40, 0, 0),
+            child: IconButton(
+              icon: Icon(Icons.arrow_back_ios),
+              onPressed: () => Navigator.pop(context),
+            )),
         Container(
           decoration: BoxDecoration(),
           height: MediaQuery.of(context).size.width / 1.3,

diff --git a/lib/pages/BookListPage.dart b/lib/pages/BookListPage.dart
@@ -14,20 +14,8 @@ import '../Provider/TodoProvider.dart';
 import '../widgets/BookGridViewWidget.dart';
 import '../widgets/search.dart';
 
-class BookListScreen extends StatelessWidget {
-  static const routeName = '/bookList-page';
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: "BOOKS",
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData(primarySwatch: Colors.grey),
-      home: BookPage(),
-    );
-  }
-}
-
 class BookPage extends StatefulWidget {
+  static const routeName = '/bookList-page';
   BookPage({super.key});
 
   @override
@@ -37,14 +25,30 @@ class BookPage extends StatefulWidget {
 class _BookPageState extends State<BookPage> {
   FirebaseServices _firebaseServices = FirebaseServices();
   late Future<List<BookModel>> bookListFuture;
+  late ScrollController scrollController;
+  late ScrollController scrollController2;
 
   @override
   void initState() {
     // TODO: implement initState
     super.initState();
+    scrollController = ScrollController();
+    scrollController2 = ScrollController();
     bookListFuture = BookApi.getBookData();
   }
 
+  int current = 0;
+  List<String> items = [
+    'Fantasy',
+    'Philosophy',
+    'Psychology',
+    'Horror',
+    'Dystopian',
+    'Biography',
+    'Science Fiction',
+    'Mystery',
+    'Thriller',
+  ];
   @override
   Widget build(BuildContext context) {
     final provider = Provider.of<TodoProvider>(context);
@@ -115,49 +119,79 @@ class _BookPageState extends State<BookPage> {
                 height: 10,
               ),
               SizedBox(
-                height: 200,
+                height: MediaQuery.of(context).size.height / 3,
                 child: BookGridViewWidget(
+                  controller: scrollController,
                   bookListFuture: bookListFuture,
                   provider: provider,
                 ),
               ),
-              Row(
-                children: [
-                  Container(
-                    decoration: const BoxDecoration(
-                        border: Border(bottom: BorderSide(color: Colors.blue))),
-                    child: Text(
-                      "Genres",
-                      style: GoogleFonts.ubuntu(
-                          fontSize: 15, fontWeight: FontWeight.bold),
-                    ),
-                    padding: const EdgeInsets.all(8),
-                  ),
-                  Container(
-                    child: Text(
-                      "Bestsellers",
-                      style: GoogleFonts.ubuntu(
-                          fontSize: 15, fontWeight: FontWeight.bold),
-                    ),
-                    padding: const EdgeInsets.all(8),
-                  ),
-                  Container(
-                    child: Text(
-                      "Newest",
-                      style: GoogleFonts.ubuntu(
-                          fontSize: 15, fontWeight: FontWeight.bold),
-                    ),
-                    padding: const EdgeInsets.all(8),
-                  ),
-                ],
+              SizedBox(
+                width: double.infinity,
+                height: 60,
+                child: ListView.builder(
+                    physics: const BouncingScrollPhysics(),
+                    itemCount: items.length,
+                    scrollDirection: Axis.horizontal,
+                    itemBuilder: (ctx, index) {
+                      return Column(
+                        children: [
+                          GestureDetector(
+                            onTap: () {
+                              setState(() {
+                                current = index;
+                              });
+                            },
+                            child: AnimatedContainer(
+                              duration: const Duration(milliseconds: 300),
+                              margin: const EdgeInsets.all(5),
+                              width: 80,
+                              height: 45,
+                              decoration: BoxDecoration(
+                                color: current == index
+                                    ? Colors.white70
+                                    : Colors.white54,
+                                borderRadius: current == index
+                                    ? BorderRadius.circular(15)
+                                    : BorderRadius.circular(10),
+                                border: current == index
+                                    ? Border.all(
+                                        color: Color.fromARGB(255, 53, 83, 88),
+                                        width: 2)
+                                    : null,
+                              ),
+                              child: Center(
+                                child: Text(
+                                  items[index],
+                                  style: GoogleFonts.laila(
+                                      fontWeight: FontWeight.w500,
+                                      color: current == index
+                                          ? Colors.black
+                                          : Colors.grey),
+                                ),
+                              ),
+                            ),
+                          ),
+                          Visibility(
+                              visible: current == index,
+                              child: Container(
+                                width: 5,
+                                height: 5,
+                                decoration: const BoxDecoration(
+                                    color: Color.fromARGB(255, 53, 83, 88),
+                                    shape: BoxShape.circle),
+                              ))
+                        ],
+                      );
+                    }),
               ),
               const SizedBox(
                 height: 10,
               ),
-              Container(
-                child: BookGridViewWidget(
-                    provider: provider, bookListFuture: bookListFuture),
-              ),
+              BookGridViewWidget(
+                  controller: scrollController2,
+                  provider: provider,
+                  bookListFuture: BookApi.getDataBygenre(q: items[current])),
             ]),
             color: Colors.white,
           ),

diff --git a/lib/services/book_api.dart b/lib/services/book_api.dart
@@ -40,4 +40,22 @@ class BookApi {
     }
     return books;
   }
+
+  static Future<List<BookModel>> getDataBygenre({String q = "computer"}) async {
+    List<BookModel> books = [];
+    var url = 'https://www.googleapis.com/books/v1/volumes?q=subject:$q';
+    final uri = Uri.parse(url);
+    final response = await http.get(uri);
+    final body = response.body;
+    final json = jsonDecode(body);
+    final results = json['items'] as List<dynamic>;
+    print('api started');
+
+    if (books is List) {
+      books = results.map((e) => BookModel.fromMap(e)).toList();
+    } else {
+      return [];
+    }
+    return books;
+  }
 }
diff --git a/lib/widgets/BookGridViewWidget.dart b/lib/widgets/BookGridViewWidget.dart
@@ -2,18 +2,20 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:term_project/constants/constants.dart';
 
 import '../Provider/TodoProvider.dart';
 import '../model/book_model.dart';
 import '../pages/BookDetailPage.dart';
 
 class BookGridViewWidget extends StatelessWidget {
-  const BookGridViewWidget({
-    Key? key,
-    required this.provider,
-    required this.bookListFuture,
-  }) : super(key: key);
-
+  const BookGridViewWidget(
+      {Key? key,
+      required this.provider,
+      required this.bookListFuture,
+      this.controller})
+      : super(key: key);
+  final ScrollController? controller;
   final TodoProvider? provider;
   final Future<List<BookModel>> bookListFuture;
 
@@ -24,12 +26,11 @@ class BookGridViewWidget extends StatelessWidget {
         if (snapshot.hasData) {
           List<BookModel> books = snapshot.data!;
           return GridView.builder(
-              physics: const NeverScrollableScrollPhysics(),
+              controller: controller,
               shrinkWrap: true,
               gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                   maxCrossAxisExtent: 200,
-                  childAspectRatio: 1,
-                  crossAxisSpacing: 1,
+                  childAspectRatio: 1 / 1.2,
                   mainAxisSpacing: 15),
               itemCount: books.length,
               itemBuilder: (BuildContext ctx, index) {
@@ -87,15 +88,10 @@ class BookGridViewWidget extends StatelessWidget {
                     const SizedBox(
                       height: 5,
                     ),
-                    Text(
-                      books[index].title!,
-                      style: GoogleFonts.ubuntu(),
-                      overflow: TextOverflow.ellipsis,
-                    ),
-                    Text(
-                      books[index].author!,
-                      style: GoogleFonts.ubuntu(color: Colors.grey),
-                    )
+                    Text(books[index].title!,
+                        style: Constants.kTextStyleHeading),
+                    Text(books[index].author!,
+                        style: Constants.kTextStyleSubheading)
                   ],
                 );
               });

diff --git a/lib/widgets/search.dart b/lib/widgets/search.dart
@@ -6,9 +6,8 @@ import 'package:term_project/Provider/TodoProvider.dart';
 import 'package:term_project/services/book_api.dart';
 import 'package:term_project/widgets/BookGridViewWidget.dart';
 
-import '../model/book_model.dart';
-
 class SearchBook extends SearchDelegate {
+  ScrollController controller = ScrollController();
   @override
   List<Widget>? buildActions(BuildContext context) {
     return [
@@ -44,6 +43,7 @@ class SearchBook extends SearchDelegate {
         child: BookGridViewWidget(
           provider: todoProvider,
           bookListFuture: BookApi.getDataByQuery(q: query),
+          controller: controller,
         ));
   }
 

diff --git a/pubspec.lock b/pubspec.lock
@@ -244,6 +244,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "5.0.0"
+  flutter_screenutil:
+    dependency: "direct main"
+    description:
+      name: flutter_screenutil
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.6.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -50,6 +50,7 @@ dependencies:
   email_validator: ^2.1.17
   cached_network_image: ^3.2.3
   provider: ^6.0.5
+  flutter_screenutil: ^5.6.0
 
 dev_dependencies:
   flutter_test: