From eb408f4a731e02542ea5dcef7ebadcd54ae261bf Mon Sep 17 00:00:00 2001 From: AbdoAlHady <20912018100332@fci.zu.edu.eg> Date: Thu, 22 Aug 2024 01:02:20 +0300 Subject: [PATCH] - finish home screen --- lib/data/models/country_data_model.dart | 19 ++++ lib/ui/widgets/home/country_flag_button.dart | 96 ++++++++++++++++++++ lib/ui/widgets/home/home_screen_body.dart | 18 ++-- 3 files changed, 127 insertions(+), 6 deletions(-) create mode 100644 lib/data/models/country_data_model.dart create mode 100644 lib/ui/widgets/home/country_flag_button.dart diff --git a/lib/data/models/country_data_model.dart b/lib/data/models/country_data_model.dart new file mode 100644 index 0000000..f52bb31 --- /dev/null +++ b/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 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), +]; diff --git a/lib/ui/widgets/home/country_flag_button.dart b/lib/ui/widgets/home/country_flag_button.dart new file mode 100644 index 0000000..8481f4b --- /dev/null +++ b/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 createState() => _CountriesWithFlagCardState(); +} + +class _CountriesWithFlagCardState extends State { + // 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(), + ), + ); + } +} diff --git a/lib/ui/widgets/home/home_screen_body.dart b/lib/ui/widgets/home/home_screen_body.dart index 88ccec0..0302efe 100644 --- a/lib/ui/widgets/home/home_screen_body.dart +++ b/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(), + ], + ), + ), ], ), ),