country_selection_screen.dart

Go to the documentation of this file.

import '/core/router/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
 
import '../../../core/constants/assets.dart';
import '../../../core/ui/widgets/custom_scaffold.dart';
import '../models/country_model.dart';
 
import 'widgets/country_list_tile.dart';
 
class CountrySelectionScreen extends StatefulWidget {
  const CountrySelectionScreen({super.key});
 
  @override
  State<CountrySelectionScreen> createState() => _CountrySelectionScreenState();
}
 
class _CountrySelectionScreenState extends State<CountrySelectionScreen> {
  final List<CountryModel> countries = [
    CountryModel(
      id: 1,
      name: 'India',
      language: 'English',
      currency: '₹',
      flag: '🇮🇳',
    ),
    CountryModel(
      id: 2,
      name: 'Morocco',
      language: 'French',
      currency: 'MAD',
      flag: '🇲🇦',
    ),
    CountryModel(
      id: 3,
      name: 'Saudi Arabia',
      language: 'English',
      currency: 'SAR',
      flag: '🇸🇦',
    ),
    CountryModel(
      id: 4,
      name: 'Tanzania',
      language: 'English',
      currency: 'TZS',
      flag: '🇹🇿',
    ),
    CountryModel(
      id: 5,
      name: 'United Arab Emirates',
      language: 'English',
      currency: 'AED',
      flag: '🇦🇪',
    ),
  ];
 
  int? selectedCountryId = 1;
 
  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      body: Stack(
        children: [
          Positioned(
            top: 40,
            left: 0,
            right: 0,
            bottom: 0,
            child: SvgPicture.asset(
              Assets.worldMapBackground,
              fit: BoxFit.contain,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: 25.sp,
              right: 25.sp,
              top: 40.sp,
              bottom: 40.sp,
            ),
            child: SafeArea(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  SvgPicture.asset(
                    Assets.headerLogo,
                    color: Theme.of(context).textTheme.displayLarge?.color,
                  ),
                  SizedBox(height: 30.sp),
                  Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 10.sp),
                        child: Text(
                          'Select your country and language to personalize your Aidra Connect experience with region specific options and services.',
                          style:
                              Theme.of(context).textTheme.bodySmall?.copyWith(
                                    color: Theme.of(context).hintColor,
                                    height: 1.5.sp,
                                  ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 37.sp),
                  Expanded(
                    child: ListView.separated(
                      itemCount: countries.length,
                      separatorBuilder: (context, index) => const Padding(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        child: Divider(),
                      ),
                      itemBuilder: (context, index) {
                        final country = countries[index];
                        return CountryListTile(
                          country: country,
                          isSelected: country.id == selectedCountryId,
                          onTap: () {
                            setState(() {
                              selectedCountryId = country.id;
                            });
                          },
                        );
                      },
                    ),
                  ),
                  SizedBox(
                    width: MediaQuery.of(context).size.width,
                    child: ElevatedButton(
                      onPressed: () {
                        context.go(Routes.mainMenu.route);
                      },
                      child: const Text('Continue'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}