- finish home screen

lib/data/models/country_data_model.dart

@@ -0,0 +1,19 @@
+import 'package:translator_app/core/utils/app_images.dart';
+
+class CountryDataModel {
+  final String name;
+  final String flag;
+
+  CountryDataModel({required this.name, required this.flag});
+}
+
+List<CountryDataModel> countries = [
+  CountryDataModel(name: 'USA', flag: AppImages.imagesUsa),
+  CountryDataModel(name: 'Russin', flag: AppImages.imagesRussia),
+  CountryDataModel(name: 'China', flag: AppImages.imagesChina),
+  CountryDataModel(name: 'Italy', flag: AppImages.imagesItaly),
+  CountryDataModel(name: 'Germany', flag: AppImages.imagesGermany),
+  CountryDataModel(name: 'England', flag: AppImages.imagesBritain),
+  CountryDataModel(name: 'Spain', flag: AppImages.imagesSpain),
+  CountryDataModel(name: 'Saudi', flag: AppImages.imagesArabic),
+];

lib/ui/widgets/home/country_flag_button.dart

@@ -0,0 +1,96 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:translator_app/core/helper/spacing.dart';
+import 'package:translator_app/core/theme/app_colors.dart';
+import 'package:translator_app/data/models/country_data_model.dart';
+
+class CountriesWithFlagCard extends StatefulWidget {
+  const CountriesWithFlagCard({super.key});
+
+  @override
+  State<CountriesWithFlagCard> createState() => _CountriesWithFlagCardState();
+}
+
+class _CountriesWithFlagCardState extends State<CountriesWithFlagCard> {
+  // Random oblect to generate random numbers
+  final Random random = Random();
+
+  // variable to store the the selected country and background
+  CountryDataModel? selectedCountry;
+  Color? backgroundColor;
+
+  void _randomCountry() {
+    setState(() {
+      // generate random number between 0 and 1
+      final int randomIndex = random.nextInt(countries.length - 1);
+      // set the selected country to the random country
+      selectedCountry = countries[randomIndex];
+      // set the background color to the random color
+      backgroundColor =
+          Color((random.nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
+    });
+  }
+
+  @override
+  void initState() {
+    _randomCountry();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return RefreshIndicator(
+      onRefresh: () async {
+        _randomCountry();
+      },
+      child: Wrap(
+        spacing: 8.0.w,
+        runSpacing: 8.0.h,
+        children: countries.map((country) {
+          bool isSelected = selectedCountry!.name == country.name;
+          return Card(
+            elevation: 4.0,
+            color: isSelected ? backgroundColor : AppColors.white,
+            shape: RoundedRectangleBorder(
+              side: BorderSide(
+                color: isSelected ? Colors.transparent : AppColors.lightPrimary,
+                width: 0.4,
+              ),
+              borderRadius: BorderRadius.circular(8.0),
+            ),
+            child: Container(
+              width: 145.w,
+              padding: EdgeInsets.symmetric(vertical: 20.h, horizontal: 15.w),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Image.asset(
+                    country.flag,
+                    width: 20.w,
+                    height: 20.h,
+                    fit: BoxFit.cover,
+                  ),
+                  horizontalSpace(8),
+                  Text(
+                    country.name,
+                    textAlign: TextAlign.center,
+                    style: GoogleFonts.poppins(
+                      textStyle: TextStyle(
+                        color: isSelected ? AppColors.white : AppColors.black,
+                        fontSize: 14.sp,
+                        fontWeight: FontWeight.w300,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}

lib/ui/widgets/home/home_screen_body.dart

@@ -1,11 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
-import 'package:translator_app/core/helper/extensions.dart';
 import 'package:translator_app/core/helper/spacing.dart';
-import 'package:translator_app/core/routing/routes.dart';
-import 'package:translator_app/core/theme/app_colors.dart';
 import 'package:translator_app/core/utils/app_images.dart';
 import 'package:translator_app/ui/widgets/home/arrow_button.dart';
+import 'package:translator_app/ui/widgets/home/country_flag_button.dart';
 import 'package:translator_app/ui/widgets/home/home_rich_text.dart';
 
 class HomeScreenBody extends StatelessWidget {
@@ -31,10 +29,18 @@ class HomeScreenBody extends StatelessWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
+              const Expanded(child: Center(child: CountriesWithFlagCard())),
               // Rich Text
-              const HomeRichText(),
-              verticalSpace(35),
-              const ArrowButton(),
+              Expanded(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const HomeRichText(),
+                    verticalSpace(30),
+                    const ArrowButton(),
+                  ],
+                ),
+              ),
             ],
           ),
         ),