diff --git a/assets/icons/password.png b/assets/icons/password.png new file mode 100644 index 00000000..70fda387 Binary files /dev/null and b/assets/icons/password.png differ diff --git a/lib/presentation/screen/app_lock_screens/app_lock.dart b/lib/presentation/screen/app_lock_screens/app_lock.dart new file mode 100644 index 00000000..c1445e3a --- /dev/null +++ b/lib/presentation/screen/app_lock_screens/app_lock.dart @@ -0,0 +1,51 @@ +import 'package:flutter/material.dart'; +import 'package:star_book/presentation/shared/app_bar.dart'; +import 'package:star_book/presentation/shared/elevated_buttons.dart'; +import 'package:star_book/presentation/theme/styling/theme_color_style.dart'; +import 'package:star_book/presentation/utils/extension.dart'; +import 'package:star_book/presentation/utils/padding_style.dart'; + +class AppLockScreen extends StatelessWidget { + const AppLockScreen({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final double deviceHeight = context.deviceHeight; + final TextTheme textTheme = context.textTheme; + final ThemeColorStyle themeColorStyle = context.themeColorStyle; + return Scaffold( + appBar: const PrimaryAppBar( + centerTitle: 'App Lock', + ), + body: Padding( + padding: + const EdgeInsets.symmetric(horizontal: CustomPadding.mediumPadding), + child: Column( + children: [ + SizedBox(height: deviceHeight * 0.3), + const Icon( + Icons.lock_person_outlined, + size: 28, + ), + Text( + 'Oops! Looks Like You Didn’t Setup Pin', + style: textTheme.bodyLarge!.copyWith( + fontWeight: FontWeight.w700, + color: themeColorStyle.secondaryColor, + height: 2.5, + ), + ), + Text( + 'Click “Setup PIN” below to setup your pin', + style: textTheme.labelLarge! + .copyWith(fontWeight: FontWeight.w400, height: 1.5), + ), + const Spacer(), + PrimaryFilledButton(onTap: () {}, label: 'Setup PIN'), + const SizedBox(height: 50), + ], + ), + ), + ); + } +} diff --git a/lib/presentation/screen/app_lock_screens/lock_type_screen.dart b/lib/presentation/screen/app_lock_screens/lock_type_screen.dart new file mode 100644 index 00000000..e23eb30f --- /dev/null +++ b/lib/presentation/screen/app_lock_screens/lock_type_screen.dart @@ -0,0 +1,48 @@ +import 'package:flutter/material.dart'; +import 'package:star_book/presentation/shared/app_bar.dart'; +import 'package:star_book/presentation/shared/tile.dart'; +import 'package:star_book/presentation/theme/styling/theme_color_style.dart'; +import 'package:star_book/presentation/utils/extension.dart'; +import 'package:star_book/presentation/utils/padding_style.dart'; + +class LockTypeScreen extends StatelessWidget { + const LockTypeScreen({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final ThemeColorStyle themeColorStyle = context.themeColorStyle; + final TextTheme textTheme = context.textTheme; + return Scaffold( + appBar: const PrimaryAppBar( + centerTitle: 'App Lock', + ), + body: Padding( + padding: + const EdgeInsets.symmetric(horizontal: CustomPadding.mediumPadding), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox(height: 30), + Text( + 'Lock Type', + style: textTheme.bodyLarge!.copyWith( + fontWeight: FontWeight.w700, + color: themeColorStyle.secondaryColor, + height: 2.5, + ), + ), + Text( + 'Please select type of lock you want to use', + style: textTheme.labelLarge! + .copyWith(fontWeight: FontWeight.w400, height: 1.5), + ), + const SizedBox(height: 30), + const AppLockTile(title: 'PIN Lock'), + const SizedBox(height: 30), + const AppLockTile(title: 'Fingerprint'), + ], + ), + ), + ); + } +} diff --git a/lib/presentation/screen/app_lock_screens/pin_code_screen.dart b/lib/presentation/screen/app_lock_screens/pin_code_screen.dart new file mode 100644 index 00000000..a7ce353a --- /dev/null +++ b/lib/presentation/screen/app_lock_screens/pin_code_screen.dart @@ -0,0 +1,64 @@ +import 'package:flutter/material.dart'; +import 'package:pin_code_fields/pin_code_fields.dart'; +import 'package:star_book/presentation/shared/app_bar.dart'; +import 'package:star_book/presentation/shared/elevated_buttons.dart'; +import 'package:star_book/presentation/theme/styling/theme_color_style.dart'; +import 'package:star_book/presentation/utils/extension.dart'; +import 'package:star_book/presentation/utils/padding_style.dart'; + +class PINCodeScreen extends StatelessWidget { + const PINCodeScreen({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final ThemeColorStyle themeColorStyle = context.themeColorStyle; + final TextTheme textTheme = context.textTheme; + return Scaffold( + appBar: const PrimaryAppBar( + centerTitle: 'Setup PIN Code', + ), + body: Padding( + padding: + const EdgeInsets.symmetric(horizontal: CustomPadding.mediumPadding), + child: Column( + children: [ + const SizedBox(height: 50), + const Image( + image: AssetImage('assets/icons/password.png'), + width: 32, + ), + const SizedBox(height: 20), + Text( + 'Choose Your 4 Digit PIN Code', + style: textTheme.bodyLarge!.copyWith( + fontWeight: FontWeight.w700, + color: themeColorStyle.secondaryColor, + ), + ), + const SizedBox(height: 30), + PinCodeTextField( + appContext: context, + keyboardType: TextInputType.number, + length: 5, + enablePinAutofill: false, + autoDismissKeyboard: true, + pinTheme: PinTheme( + activeColor: themeColorStyle.senaryColor, + selectedColor: themeColorStyle.primaryColor, + inactiveColor: themeColorStyle.octonaryColor, + ), + onChanged: (value) {}, + ), + const Spacer(), + PrimaryFilledButton( + onTap: () {}, + label: 'Save PIN Code', + color: themeColorStyle.senaryColor, + ), + const SizedBox(height: 50), + ], + ), + ), + ); + } +} diff --git a/lib/presentation/shared/elevated_buttons.dart b/lib/presentation/shared/elevated_buttons.dart index 14ef8723..3da8ac17 100644 --- a/lib/presentation/shared/elevated_buttons.dart +++ b/lib/presentation/shared/elevated_buttons.dart @@ -1,15 +1,17 @@ import 'package:flutter/material.dart'; import 'package:star_book/presentation/theme/styling/filled_button_style.dart'; +import 'package:star_book/presentation/theme/styling/theme_color_style.dart'; import 'package:star_book/presentation/utils/extension.dart'; class PrimaryFilledButton extends StatelessWidget { final VoidCallback onTap; final String label; - + final Color? color; const PrimaryFilledButton({ super.key, required this.onTap, required this.label, + this.color, }); @override @@ -17,12 +19,16 @@ class PrimaryFilledButton extends StatelessWidget { final double deviceHeight = context.deviceHeight; final double deviceWidth = context.deviceWidth; final CustomButtonTheme customButtonTheme = context.customButtonTheme; + final ThemeColorStyle themeColorStyle = context.themeColorStyle; return SizedBox( width: deviceWidth, height: deviceHeight * 0.052, child: ElevatedButton( onPressed: onTap, - style: customButtonTheme.primaryFilledButtonTheme, + style: customButtonTheme.primaryFilledButtonTheme.copyWith( + backgroundColor: MaterialStateProperty.all( + (color != null) ? color! : themeColorStyle.primaryColor), + ), child: Text(label), ), ); diff --git a/lib/presentation/shared/tile.dart b/lib/presentation/shared/tile.dart index 71c9b9ca..391fa8bc 100644 --- a/lib/presentation/shared/tile.dart +++ b/lib/presentation/shared/tile.dart @@ -189,3 +189,73 @@ class _UxerShipTileState extends State { ); } } + +class AppLockTile extends StatefulWidget { + final String title; + + const AppLockTile({Key? key, required this.title}) : super(key: key); + + @override + State createState() => _AppLockTileState(); +} + +class _AppLockTileState extends State { + bool isSwitchOn = false; + + @override + Widget build(BuildContext context) { + final ThemeColorStyle themeColorStyle = context.themeColorStyle; + final TextTheme textTheme = context.textTheme; + return Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + border: Border.all(color: themeColorStyle.octonaryColor), + ), + padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8), + child: Row( + children: [ + Text( + widget.title, + style: textTheme.bodyLarge!.copyWith( + fontWeight: FontWeight.w400, + color: themeColorStyle.secondaryColor, + ), + ), + const Spacer(), + Theme( + data: ThemeData(useMaterial3: true).copyWith( + colorScheme: Theme.of(context) + .colorScheme + .copyWith(outline: Colors.transparent), + ), + child: SizedBox( + height: 30, + width: 38, + child: FittedBox( + fit: BoxFit.fill, + + /// Change InActiveTrackColor of Switch + child: Switch( + value: isSwitchOn, + trackColor: MaterialStateProperty.resolveWith((states) { + if (states.contains(MaterialState.selected)) { + return themeColorStyle.senaryColor; + } + return themeColorStyle.octonaryColor.withOpacity(0.7); + }), + thumbColor: MaterialStateProperty.all(Colors.white), + // inactiveTrackColor: Colors.white, + onChanged: (value) { + setState(() { + isSwitchOn = value; + }); + }, + ), + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/presentation/theme/ultramarine_light.dart b/lib/presentation/theme/ultramarine_light.dart index 295d2320..bd807c3d 100644 --- a/lib/presentation/theme/ultramarine_light.dart +++ b/lib/presentation/theme/ultramarine_light.dart @@ -33,7 +33,7 @@ class UltramarineLightTheme extends BaseTheme { tertiaryColor: Color(0xFF8B8B8B), quaternaryColor: Color(0xFF7B7CFF), quinaryColor: Color(0xFFFFFFFF), - senaryColor: Color(0xFFFF3932), + senaryColor: Color(0xff32C74F), septenaryColor: Color(0xFFF1F2F4), octonaryColor: Color(0xFFBCBCBC), nonaryColor: Color(0xFFE31414), diff --git a/pubspec.lock b/pubspec.lock index 3fdd5865..e8853967 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -676,7 +676,15 @@ packages: sha256: cb3798bef7fc021ac45b308f4b51208a152792445cce0448c9a4ba5879dd8750 url: "https://pub.dev" source: hosted - version: "5.4.0" + version: "5.1.0" + pin_code_fields: + dependency: "direct main" + description: + name: pin_code_fields + sha256: c8652519d14688f3fe2a8288d86910a46aa0b9046d728f292d3bf6067c31b4c7 + url: "https://pub.dev" + source: hosted + version: "7.4.0" platform: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 26609865..67a94c51 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -30,6 +30,9 @@ dependencies: intl: ^0.18.0 go_router: ^7.1.1 path_provider: ^2.0.12 + flutter_launcher_icons: ^0.11.0 + flutter_form_builder: ^7.7.0 + pin_code_fields: ^7.4.0 flutter_form_builder: ^9.0.0 form_builder_validators: ^9.0.0 url_launcher: ^6.1.11