Merge branch '3-content-screen' into 'main'

Resolve "Content Screen"

Closes #3

See merge request easy-learn-aic/app!2

lib/view/screens/content.dart

@@ -0,0 +1,76 @@
+import 'package:easy_learn/view/widgets/list_contents_box.dart';
+import 'package:easy_learn/view/widgets/score_board.dart';
+import 'package:flutter/material.dart';
+
+import 'package:easy_learn/view/widgets/custom_button.dart';
+
+class Content extends StatefulWidget {
+  const Content({Key? key, required this.category}) : super(key: key);
+
+  final String category;
+
+  @override
+  _ContentState createState() => _ContentState();
+}
+
+class _ContentState extends State<Content> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        decoration: const BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage('assets/images/content_bg.png'),
+            fit: BoxFit.cover
+          )
+        ),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Container(
+                  margin: const EdgeInsets.only(left: 10.0, bottom: 60.0),
+                  child: const CustomButton(name: 'close', size: 60.0,)
+                ),
+                const ScoreBoard(),
+                Container(
+                  margin: const EdgeInsets.only(right: 10.0, bottom: 60.0),
+                  child: const CustomButton(name: 'sound', size: 60.0,)
+                ),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                Container(
+                  margin: const EdgeInsets.only(left: 5.0),
+                  child: const CustomButton(name: 'previous', size: 100.0,)
+                ),
+                const SizedBox(
+                  width: 180,
+                  height: 180,
+                  child: ListContentsBox(
+                    imagePath: 'assets/images/list_contents_animals.png',
+                    title: 'Animals'
+                  ),
+                ),
+                Container(
+                  margin: const EdgeInsets.only(right: 5.0),
+                  child: const CustomButton(name: 'next', size: 100.0,)
+                )
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: const [
+                CustomButton(name: 'microphone', size: 190.0)
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/view/widgets/custom_button.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class CustomButton extends StatefulWidget {
+  const CustomButton({Key? key, required this.name, required this.size}) : super(key: key);
+
+  final String name;
+  final double size;
+
+  @override
+  _CustomButtonState createState() => _CustomButtonState();
+}
+
+class _CustomButtonState extends State<CustomButton> {
+  bool isTap = false;
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () {
+        setState(() {
+          isTap = true;
+        });
+      },
+      onTapDown: (x) {
+        setState(() {
+          isTap = false;
+        });
+      },
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 150),
+        width: isTap ? widget.size - 10 : widget.size,
+        height: isTap ? widget.size - 10 : widget.size,
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage('assets/images/buttons/${widget.name}.png'),
+          )
+        ),
+      ),
+    );
+  }
+}

lib/view/widgets/list_contents_box.dart

@@ -1,5 +1,8 @@
+import 'package:page_transition/page_transition.dart';
 import 'package:flutter/material.dart';
 
+import 'package:easy_learn/view/screens/content.dart';
+
 class ListContentsBox extends StatelessWidget {
   const ListContentsBox({Key? key, required this.imagePath, required this.title}) : super(key: key);
 
@@ -9,7 +12,9 @@ class ListContentsBox extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return InkWell(
-      onTap: (){},
+      onTap: (){
+        Navigator.push(context, PageTransition(type: PageTransitionType.size, alignment: Alignment.bottomCenter, child: const Content(category: 'None')));
+      },
       child: Container(
         padding: const EdgeInsets.all(5.0),
         decoration: BoxDecoration(

lib/view/widgets/score_board.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+class ScoreBoard extends StatelessWidget {
+  const ScoreBoard({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 250,
+      height: 200,
+      decoration: const BoxDecoration(
+        image: DecorationImage(
+          image: AssetImage('assets/images/content_score_board.png'),
+        )
+      ),
+    );
+  }
+}

pubspec.lock

@@ -95,6 +95,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.7.0"
+  page_transition:
+    dependency: "direct main"
+    description:
+      name: page_transition
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.2"
   path:
     dependency: transitive
     description:

pubspec.yaml

@@ -3,7 +3,7 @@ description: A new Flutter project.
 
 # The following line prevents the package from being accidentally published to
 # pub.dev using `flutter pub publish`. This is preferred for private packages.
-publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+publish_to: "none" # Remove this line if you wish to publish to pub.dev
 
 # The following defines the version and build number for your application.
 # A version number is three numbers separated by dots, like 1.2.43
@@ -27,31 +27,25 @@ environment:
 # the latest version available on pub.dev. To see which dependencies have newer
 # versions available, run `flutter pub outdated`.
 dependencies:
+  cupertino_icons: ^1.0.2
   flutter:
     sdk: flutter
-
-
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.2
+  page_transition: ^2.0.2
 
 dev_dependencies:
-  flutter_test:
-    sdk: flutter
-
   # The "flutter_lints" package below contains a set of recommended lints to
   # encourage good coding practices. The lint set provided by the package is
   # activated in the `analysis_options.yaml` file located at the root of your
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
   flutter_lints: ^1.0.0
+  flutter_test:
+    sdk: flutter
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
-
 # The following section is specific to Flutter.
 flutter:
-
   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in
   # the material Icons class.
@@ -60,13 +54,11 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/images/
-
+    - assets/images/buttons/
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.
-
   # For details regarding adding assets from package dependencies, see
   # https://flutter.dev/assets-and-images/#from-packages
-
   # To add custom fonts to your application, add a fonts section here,
   # in this "flutter" section. Each entry in this list should have a
   # "family" key with the font family name, and a "fonts" key with a