add game view page & make small refactoring

CHANGELOG.md

@@ -1,6 +1,13 @@
 ## [0.5.0] - 2020-02-07
+### Added
+- Bold style for main font.
+- Game view page.
+- Basic refactoring.
+
 ### Changed
-- Move home page to pages folder.
+- Separate app code from page's code.
+- Move home page to pages' folder.
+- Move tabs to pages' folder.
 
 ## [0.4.0] - 2020-02-05
 ### Added

lib/main.dart

@@ -1,7 +1,56 @@
 import 'package:flutter/material.dart';
-
+import 'package:game_list/pages/game/game_view.dart';
 import 'package:game_list/pages/home.dart';
+import 'package:game_list/themes/dark_theme.dart';
+import 'package:game_list/themes/light_theme.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 void main() {
-  runApp(Home());
+  runApp(App());
+}
+
+class App extends StatefulWidget {
+  @override
+  _AppState createState() => _AppState();
+}
+
+class _AppState extends State<App> {
+  bool _isDarkTheme;
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Game List',
+      theme: _isDarkTheme ? darkTheme : lightTheme,
+      debugShowCheckedModeBanner: false,
+      routes: {
+        Home.routeName: (context) =>
+            Home(isDarkTheme: _isDarkTheme, updateTheme: _updateTheme),
+        GameView.routeName: (context) => GameView(),
+      },
+    );
+  }
+
+  @override
+  void initState() {
+    _isDarkTheme = false;
+    _applyTheme();
+    super.initState();
+  }
+
+  _applyTheme() async {
+    var prefs = await SharedPreferences.getInstance();
+    var isDarkTheme = prefs.getBool('isDarkTheme') ?? _isDarkTheme;
+    setState(() {
+      _isDarkTheme = isDarkTheme;
+    });
+  }
+
+  _updateTheme(bool value) async {
+    setState(() {
+      _isDarkTheme = value;
+    });
+    var prefs = await SharedPreferences.getInstance();
+    prefs.setBool('isDarkTheme', _isDarkTheme);
+  }
 }

lib/pages/game/game_view.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:game_list/db/model/game.dart';
+
+class GameView extends StatelessWidget {
+  static const routeName = '/gameView';
+
+  @override
+  Widget build(BuildContext context) {
+    final Game game = ModalRoute.of(context).settings.arguments;
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(
+          game.name,
+          overflow: TextOverflow.fade,
+        ),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(4),
+              child: Image.network(
+                game.coverUrl,
+                width: 128,
+              ),
+            ),
+            Flexible(
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
+                child: Column(
+                  children: [
+                    Text(
+                      game.name,
+                      style:
+                          TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
+                    ),
+                  ],
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/home.dart

@@ -1,20 +1,21 @@
 import 'package:flutter/material.dart';
+import 'package:game_list/pages/tabs/tabs.dart';
 
-import 'package:shared_preferences/shared_preferences.dart';
-
-import 'package:game_list/themes/dark_theme.dart';
-import 'package:game_list/themes/light_theme.dart';
+class Home extends StatefulWidget {
+  static const routeName = '/';
 
-import 'package:game_list/tabs/tabs.dart';
+  final ValueChanged<bool> updateTheme;
+  final bool isDarkTheme;
 
-class Home extends StatefulWidget {
   @override
+  const Home({Key key, @required this.isDarkTheme, @required this.updateTheme})
+      : super(key: key);
+
   _HomeState createState() => _HomeState();
 }
 
 class _HomeState extends State<Home> {
-  int _currentIndex = 0;
-  bool _isDarkTheme;
+  int _currentIndex;
 
   final tabsTitle = [
     'Game List',
@@ -23,74 +24,51 @@ class _HomeState extends State<Home> {
     'Settings',
   ];
 
-  _applyTheme() async {
-    final SharedPreferences prefs = await SharedPreferences.getInstance();
-    final bool isDarkTheme = (prefs.getBool('isDarkTheme') ?? _isDarkTheme);
-    setState(() {
-      _isDarkTheme = isDarkTheme;
-    });
-  }
-
-  _updateIsDarkTheme(bool value) async {
-    setState(() {
-      _isDarkTheme = value;
-    });
-    final SharedPreferences prefs = await SharedPreferences.getInstance();
-    final bool isDarkTheme = await prefs.setBool('isDarkTheme', _isDarkTheme);
-  }
-
-  @override
-  void initState() {
-    super.initState();
-    _isDarkTheme = false;
-    _applyTheme();
-  }
-
   @override
   Widget build(BuildContext context) {
     final tabs = [
       HomeTab(),
       SearchTab(),
       GamesTab(),
       SettingsTab(
-          isDarkTheme: _isDarkTheme,
-          updateIsDarkTheme: _updateIsDarkTheme) // Settings tab
+          isDarkTheme: widget.isDarkTheme,
+          updateIsDarkTheme: widget.updateTheme) // Settings tab
     ];
-
-    return MaterialApp(
-      title: 'Game List',
-      theme: _isDarkTheme ? darkTheme : lightTheme,
-      debugShowCheckedModeBanner: false,
-      home: Scaffold(
-        appBar: AppBar(
-          leading: Icon(Icons.gamepad),
-          title: Text(tabsTitle[_currentIndex]),
-        ),
-        body: tabs[_currentIndex],
-        bottomNavigationBar: BottomNavigationBar(
-          currentIndex: _currentIndex,
-          type: BottomNavigationBarType.fixed,
-          iconSize: 32,
-          selectedFontSize: 12,
-          unselectedFontSize: 12,
-          items: [
-            BottomNavigationBarItem(
-              icon: Icon(Icons.home_outlined),
-              label: 'Home',
-            ),
-            BottomNavigationBarItem(
-                icon: Icon(Icons.search_outlined), label: 'Search'),
-            BottomNavigationBarItem(icon: Icon(Icons.games), label: 'Games'),
-            BottomNavigationBarItem(
-                icon: Icon(Icons.settings), label: 'Settings'),
-          ],
-          onTap: (index) {
-            setState(() {
-              _currentIndex = index;
-            });
-          },
-        ),
+    return Scaffold(
+      appBar: AppBar(
+        leading: Icon(Icons.gamepad),
+        title: Text(tabsTitle[_currentIndex]),
+      ),
+      body: tabs[_currentIndex],
+      bottomNavigationBar: BottomNavigationBar(
+        currentIndex: _currentIndex,
+        iconSize: 32,
+        items: [
+          BottomNavigationBarItem(
+            icon: Icon(Icons.home_outlined),
+            label: 'Home',
+          ),
+          BottomNavigationBarItem(
+              icon: Icon(Icons.search_outlined), label: 'Search'),
+          BottomNavigationBarItem(icon: Icon(Icons.games), label: 'Games'),
+          BottomNavigationBarItem(
+              icon: Icon(Icons.settings), label: 'Settings'),
+        ],
+        onTap: (index) {
+          setState(() {
+            _currentIndex = index;
+          });
+        },
+        selectedFontSize: 12,
+        type: BottomNavigationBarType.fixed,
+        unselectedFontSize: 12,
       ),
     );
   }
+
+  @override
+  void initState() {
+    _currentIndex = 0;
+    super.initState();
+  }
 }

lib/tabs/games_tab.dart → lib/pages/tabs/games_tab.dart

@@ -1,28 +1,17 @@
 import 'package:flutter/material.dart';
-
 import 'package:game_list/db/database.dart';
 import 'package:game_list/db/model/game.dart';
+import 'package:game_list/pages/game/game_view.dart';
 
 class GamesTab extends StatefulWidget {
   @override
   _GamesTabState createState() => _GamesTabState();
 }
 
 class _GamesTabState extends State<GamesTab> {
-  Future<AppDatabase> _database;
-
-  Future<List<Game>> _getAllGame() async {
-    final database = await _database;
-    return database.gameDao.findAllGame();
-  }
-
-  @override
-  void initState() {
-    _database = $FloorAppDatabase
-        .databaseBuilder('game_list.db')
-        .addMigrations([migration1to2]).build();
-    super.initState();
-  }
+  final Future<AppDatabase> _database = $FloorAppDatabase
+      .databaseBuilder('game_list.db')
+      .addMigrations([migration1to2]).build();
 
   @override
   Widget build(BuildContext context) {
@@ -34,17 +23,23 @@ class _GamesTabState extends State<GamesTab> {
             itemCount: snapshot.data.length + 1,
             itemBuilder: (context, index) {
               if (index == 0) {
-                return SizedBox(height: 8);
+                return SizedBox(height: 4);
               } else {
                 return Card(
+                  margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                   child: ListTile(
                     title: Text(snapshot.data[index - 1].name),
-                    subtitle: Text(
-                        'Release: 2020\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies vel tellus sit amet dictum. Donec vel ipsum fringilla sapien molestie eleifend. Aenean blandit aliquam lorem.'),
-                    leading: Image.network(
-                      snapshot.data[index - 1].coverUrl,
+                    subtitle: Text('Release: 2020\nAvg Rating: 9.99'),
+                    leading: CircleAvatar(
+                      backgroundImage: Image.network(
+                        snapshot.data[index - 1].coverUrl,
+                      ).image,
                     ),
-                    onTap: () {},
+                    onTap: () {
+                      Navigator.pushNamed(context, GameView.routeName,
+                          arguments: snapshot.data[index - 1]);
+                    },
+                    isThreeLine: true,
                   ),
                 );
               }
@@ -56,4 +51,9 @@ class _GamesTabState extends State<GamesTab> {
       },
     );
   }
+
+  Future<List<Game>> _getAllGame() async {
+    final database = await _database;
+    return database.gameDao.findAllGame();
+  }
 }

lib/tabs/settings_tab.dart → lib/pages/tabs/settings_tab.dart

@@ -1,19 +1,19 @@
 import 'package:flutter/material.dart';
 
 class SettingsTab extends StatelessWidget {
+  final bool isDarkTheme;
+  final ValueChanged<bool> updateIsDarkTheme;
+
   const SettingsTab(
       {Key key, @required this.isDarkTheme, @required this.updateIsDarkTheme})
       : super(key: key);
 
-  final bool isDarkTheme;
-  final ValueChanged<bool> updateIsDarkTheme;
-
   @override
   Widget build(BuildContext context) {
     return ListView(
       children: [
         SizedBox(
-          height: 8,
+          height: 4,
         ),
         Card(
           margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),

lib/pages/tabs/tabs.dart

@@ -0,0 +1,4 @@
+export 'package:game_list/pages/tabs/games_tab.dart';
+export 'package:game_list/pages/tabs/home_tab.dart';
+export 'package:game_list/pages/tabs/search_tab.dart';
+export 'package:game_list/pages/tabs/settings_tab.dart';

pubspec.yaml

@@ -15,7 +15,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
-version: 0.4.0
+version: 0.5.0
 
 environment:
   sdk: ">=2.7.0 <3.0.0"
@@ -70,6 +70,8 @@ flutter:
         - asset: fonts/Inter/Inter-Regular.ttf
         - asset: fonts/Inter/Inter-SemiBold.ttf
           weight: 600
+        - asset: fonts/Inter/Inter-Bold.ttf
+          weight: 700
   #       - asset: fonts/Schyler-Italic.ttf
   #         style: italic
   #   - family: Trajan Pro