Merge pull request #96 from Maheen-Ilyas/occupation-module

Occupation module added

lib/main.dart

@@ -8,6 +8,7 @@ import 'package:learn/pages/modules/birds.dart';
 import 'package:learn/pages/modules/animals.dart';
 import 'package:learn/pages/explore.dart';
 import 'package:learn/pages/favorite.dart';
+import 'package:learn/pages/modules/occupation.dart';
 import 'package:learn/pages/modules/parts.dart';
 import 'package:learn/pages/modules/seasons.dart';
 import 'package:learn/pages/modules/shapes.dart';
@@ -72,6 +73,7 @@ class MyApp extends StatelessWidget {
                 AllRoutes.favoriteRoute: (context) => const FavoritePage(),
                 AllRoutes.quizRoute: (context) => QuizPage(),
                 AllRoutes.seasonRoute: (context) => SeasonsPage(),
+                AllRoutes.occupationRoute: (context) => OccupationPage(),
               },
             );
           },

lib/pages/modules/occupation.dart

@@ -0,0 +1,157 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_tts/flutter_tts.dart';
+import 'package:just_audio/just_audio.dart';
+import 'package:learn/utils/constants.dart';
+
+class Occupation {
+  final String name;
+  final String description;
+  final String svgAsset;
+  final Color backgroundColor;
+
+  Occupation({
+    required this.name,
+    required this.description,
+    required this.svgAsset,
+    required this.backgroundColor,
+  });
+}
+
+class OccupationPage extends StatelessWidget {
+  final FlutterTts flutterTts = FlutterTts();
+  final AudioPlayer audioPlayer = AudioPlayer();
+  OccupationPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text(
+          'Occupations',
+          style: TextStyle(fontWeight: FontWeight.bold),
+        ),
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () {
+            Navigator.pop(context);
+          },
+        ),
+      ),
+      body: Center(
+        child: OccupationWidget(
+          occupations: AppConstants.occupations,
+          flutterTts: flutterTts,
+          audioPlayer: audioPlayer,
+        ),
+      ),
+    );
+  }
+}
+
+class OccupationWidget extends StatefulWidget {
+  final List<Occupation> occupations;
+  final FlutterTts flutterTts;
+  final AudioPlayer audioPlayer;
+  const OccupationWidget({
+    super.key,
+    required this.occupations,
+    required this.flutterTts,
+    required this.audioPlayer,
+  });
+
+  @override
+  State<OccupationWidget> createState() => _OccupationWidgetState();
+}
+
+class _OccupationWidgetState extends State<OccupationWidget> {
+  int currentIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    Occupation occupation = widget.occupations[currentIndex];
+    return Column(
+      children: [
+        const SizedBox(height: 10.0),
+        Container(
+          width: 350,
+          height: MediaQuery.of(context).size.height / 2,
+          decoration: BoxDecoration(
+            border: Border.all(color: Colors.black),
+            borderRadius: BorderRadius.circular(8.0),
+            color: occupation.backgroundColor,
+          ),
+          child: AnimatedSize(
+            duration: const Duration(milliseconds: 500),
+            child: SvgPicture.asset(
+              occupation.svgAsset,
+              fit: BoxFit.contain,
+            ),
+          ),
+        ),
+        const SizedBox(height: 20.0),
+        Text(
+          occupation.name,
+          style: const TextStyle(
+            fontSize: 24,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        const SizedBox(height: 10.0),
+        Padding(
+          padding: const EdgeInsets.only(
+            right: 8.0,
+            left: 8.0,
+          ),
+          child: Text(
+            occupation.description,
+            textAlign: TextAlign.center,
+            style: const TextStyle(
+              fontSize: 22.0,
+            ),
+          ),
+        ),
+        const SizedBox(height: 30.0),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            IconButton(
+              onPressed: _previousOccupation,
+              icon: const Icon(Icons.arrow_back),
+            ),
+            const SizedBox(width: 20.0),
+            ElevatedButton(
+              onPressed: () {
+                _playOccupationName(occupation.name);
+              },
+              child: const Text("Play Sound"),
+            ),
+            const SizedBox(width: 20.0),
+            IconButton(
+              onPressed: _nextOccupation,
+              icon: const Icon(Icons.arrow_forward),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  _nextOccupation() {
+    setState(() {
+      currentIndex = (currentIndex + 1) % widget.occupations.length;
+    });
+  }
+
+  _previousOccupation() {
+    setState(() {
+      currentIndex = (currentIndex - 1 + widget.occupations.length) %
+          widget.occupations.length;
+    });
+  }
+
+  Future<void> _playOccupationName(String name) async {
+    await widget.flutterTts.setLanguage('en-US');
+    await widget.flutterTts.speak(name);
+  }
+}

lib/utils/constants.dart

@@ -6,6 +6,7 @@ import '../pages/modules/animals.dart';
 import '../pages/modules/atoz.dart';
 import '../pages/modules/birds.dart';
 import '../pages/modules/seasons.dart';
+import '../pages/modules/occupation.dart';
 
 class AppConstants {
   static const List<String> candidates = [
@@ -571,6 +572,113 @@ class AppConstants {
     ),
   ];
 
+  static final List<Occupation> occupations = [
+    Occupation(
+      name: "Doctor",
+      description:
+          "A doctor works in a hospital and helps people get better when they are sick.",
+      svgAsset: "assets/occupations/doctor.svg",
+      backgroundColor: Colors.lightBlue.shade200,
+    ),
+    Occupation(
+      name: "Teacher",
+      description:
+          "A teacher works in a school and teaches children how to read and write.",
+      svgAsset: "assets/occupations/teacher.svg",
+      backgroundColor: Colors.yellow.shade100,
+    ),
+    Occupation(
+      name: "Police Officer",
+      description:
+          "A police officer works in the police station and catches thieves.",
+      svgAsset: "assets/occupations/police.svg",
+      backgroundColor: Colors.green.shade200,
+    ),
+    Occupation(
+      name: "Engineer",
+      description:
+          "An engineer works in many places and build machines, buildings and bridges.",
+      svgAsset: "assets/occupations/engineer.svg",
+      backgroundColor: Colors.red.shade200,
+    ),
+    Occupation(
+      name: "Pilot",
+      description:
+          "A pilot flies airplanes to take people to different places in the world.",
+      svgAsset: "assets/occupations/pilot.svg",
+      backgroundColor: Colors.white,
+    ),
+    Occupation(
+      name: "Artist",
+      description:
+          "An artist works in a studio and makes beautiful pictures and sculptures.",
+      svgAsset: "assets/occupations/artist.svg",
+      backgroundColor: Colors.grey.shade300,
+    ),
+    Occupation(
+      name: "Author",
+      description:
+          "An author works at home or in an office and writes books and stories for people to read.",
+      svgAsset: "assets/occupations/author.svg",
+      backgroundColor: Colors.grey.shade300,
+    ),
+    Occupation(
+      name: "Photographer",
+      description:
+          "A photographer works in different places and takes pictures of people, places, and things.",
+      svgAsset: "assets/occupations/photographer.svg",
+      backgroundColor: Colors.lightBlue.shade100,
+    ),
+    Occupation(
+      name: "Vet",
+      description:
+          "A veterinarian works in an animal hospital and helps pets and other animals when they are sick.",
+      svgAsset: "assets/occupations/vet.svg",
+      backgroundColor: Colors.cyan.shade200,
+    ),
+    Occupation(
+      name: "Farmer",
+      description:
+          "A farmer works on a farm and grows vegetables and fruits that we eat.",
+      svgAsset: "assets/occupations/farmer.svg",
+      backgroundColor: Colors.yellow.shade700,
+    ),
+    Occupation(
+      name: "Carpenter",
+      description:
+          "A carpenter works in workshops and makes furniture for our houses.",
+      svgAsset: "assets/occupations/carpenter.svg",
+      backgroundColor: Colors.orange.shade100,
+    ),
+    Occupation(
+      name: "Electrician",
+      description:
+          "An electrician works in homes and fixes electrical wires and lights.",
+      svgAsset: "assets/occupations/electrician.svg",
+      backgroundColor: Colors.lightBlue.shade200,
+    ),
+    Occupation(
+      name: "Barber",
+      description: "A barber works in a barbershop and cuts hair.",
+      svgAsset: "assets/occupations/barber.svg",
+      backgroundColor: Colors.lightBlue.shade200,
+    ),
+    Occupation(
+      name: "Dentist",
+      description:
+          "A dentist works in a dental hospital and helps keep our teeth clean and healthy.",
+      svgAsset: "assets/occupations/dentist.svg",
+      backgroundColor: Colors.white,
+    ),
+    Occupation(
+      name: "Lawyer",
+      description:
+          "A lawyer works in an office and helps people understand and follow the law.",
+      svgAsset: "assets/occupations/lawyer.svg",
+      backgroundColor: Colors.brown.shade300,
+    ),
+  ];
+
   static const String underConstruction =
       'Page Under Construction.\nIt will not take much time.';
 

lib/utils/routes.dart

@@ -14,4 +14,5 @@ class AllRoutes {
   static String flowerRoute = "/flowers";
   static String quizRoute = "/quiz";
   static String seasonRoute = "/seasons";
+  static String occupationRoute = '/occupations';
 }

lib/widgets/drawer.dart

@@ -91,6 +91,14 @@ class MyDrawer extends StatelessWidget {
               },
               context: context,
             ),
+            _buildListTile(
+              icon: Icons.work,
+              title: "Occupations",
+              onTap: () {
+                Navigator.pushNamed(context, AllRoutes.occupationRoute);
+              },
+              context: context,
+            ),
             _buildListTile(
               icon: Icons.sunny,
               title: "Solar System",