Skip to content

Commit

Permalink
feat: impl WelcomeScreen according to Figma design
Browse files Browse the repository at this point in the history
- add some variables to arb files & generated translation files
- rename `WelcomePage` to `WelcomeScreen` & update where it is used
- impl `WelcomeScreen` widgets
- add `primaryLight` color to AppColors
- add some welcomeScreen png to project source
- add/create `CustomFilledButton`
  • Loading branch information
PouriaMoradi021 committed Jan 30, 2025
1 parent e43458b commit 90f7231
Show file tree
Hide file tree
Showing 12 changed files with 194 additions and 51 deletions.
Binary file added assets/images/welcome_pic.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion lib/l10n/app_en.arb
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,8 @@
"subtitle": "Welcome to Localization",
"description": "You have pushed the button this many times:",
"switch_language": "Switch language",
"applications": "Applications"
"applications": "Applications",
"welcome_title": "Welcome to the Future of Blockchain with Pactus!",
"welcome_description": "Where the future of blockchain unfolds with trust and transparency in every transaction. Join us in shaping a decentralized revolution!",
"start_button_text": "Get Started"
}
5 changes: 4 additions & 1 deletion lib/l10n/app_es.arb
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,8 @@
"subtitle": "Bienvenido a Localización",
"description": "Has pulsado el botón tantas veces:",
"switch_language": "Cambiar idioma",
"applications": "Applications"
"applications": "Applications",
"welcome_title": "Bienvenido al futuro de la cadena de bloques con Pactus!",
"welcome_description": "Donde el futuro de la cadena de bloques se desarrolla con confianza y transparencia en cada transacción. Únase a nosotros para dar forma a una revolución descentralizada!",
"start_button_text": "Empezar"
}
5 changes: 4 additions & 1 deletion lib/l10n/app_fr.arb
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,8 @@
"subtitle": "Bienvenue dans Localisation",
"description": "Vous avez appuyé sur le bouton autant de fois :",
"switch_language": "Changer de langue",
"applications": "Applications"
"applications": "Applications",
"welcome_title": "Bienvenue dans le futur de la Blockchain avec Pactus!",
"welcome_description": "Là où lavenir de la blockchain se dévoile avec confiance et transparence dans chaque transaction. Rejoignez-nous pour façonner une révolution décentralisée!",
"start_button_text": "Commencer"
}
1 change: 1 addition & 0 deletions lib/src/core/common/colors/app_colors.dart
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ import 'package:fluent_ui/fluent_ui.dart';
class AppColors {
AppColors._();
static const primaryDark = Color(0xFF242424);
static const primaryLight = Color(0xFFFFFFFF);
static const splashBackground = Color(0xFF00142E);
}
62 changes: 62 additions & 0 deletions lib/src/core/common/widgets/custom_filled_button.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import 'package:fluent_ui/fluent_ui.dart';
import 'package:gui/src/core/common/colors/app_colors.dart';
import 'package:gui/src/features/main/language/core/localization_extension.dart';
import 'package:pactus_gui_widgetbook/app_styles.dart';

class CustomFilledButton extends StatelessWidget {

const CustomFilledButton({
super.key,
required this.text,
required this.onPressed,
this.style,
this.icon,
this.autofocus = false,
this.focusNode,
this.padding,
});
final String text;
final VoidCallback onPressed;
final ButtonStyle? style;
final Widget? icon;
final bool autofocus;
final FocusNode? focusNode;
final EdgeInsetsGeometry? padding;

@override
Widget build(BuildContext context) {
return Button(
onPressed: onPressed,
autofocus: autofocus,
focusNode: focusNode,
style: style ?? ButtonStyle(
padding: WidgetStateProperty.all<EdgeInsetsDirectional?>(
const EdgeInsetsDirectional.symmetric(horizontal: 24, vertical: 4),
),
backgroundColor: WidgetStateProperty.all(const Color(0xFF0066B4)),
shape: WidgetStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
),
child: Padding(
padding: padding ??
const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (icon != null) icon!,
if (icon != null) const SizedBox(width: 8),
Text(
context.tr(text),
style: InterTextStyles.bodyBold.copyWith(
color: AppColors.primaryLight,
),
),
],
),
),
);
}
}
4 changes: 2 additions & 2 deletions lib/src/core/router/registration_routes.dart
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ import 'package:gui/src/features/master_password/presentation/screen/master_pass
import 'package:gui/src/features/password/presentation/screen/password_page.dart';
import 'package:gui/src/features/restoration_seed/presentation/screen/restoration_seed_page.dart';
import 'package:gui/src/features/validator_config/presentation/screen/validator_config_page.dart';
import 'package:gui/src/features/welcome/presentation/screen/welcome_page.dart';
import 'package:gui/src/features/welcome/presentation/screen/welcome_screen.dart';
import 'route_name.dart';

final List<GoRoute> registrationRoutes = [
GoRoute(
path: AppRoute.welcome.fullPath,
name: AppRoute.welcome.name,
builder: (context, state) => const WelcomePage(),
builder: (context, state) => const WelcomeScreen(),
routes: [
GoRoute(
path: AppRoute.initializeMode.path,
Expand Down
34 changes: 30 additions & 4 deletions lib/src/core/utils/assets/assets.gen.dart

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions lib/src/core/utils/gen/localization/codegen_loader.dart
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,35 @@ class CodegenLoader {
'description': 'You have pushed the button this many times:',
'switch_language': 'Switch language',
'applications': 'Applications',
'welcome_title': 'Welcome to the Future of Blockchain with Pactus!',
'welcome_description': 'Where the future of blockchain unfolds with trust'
' and transparency in every transaction. Join us in shaping'
' a decentralized revolution!',
'start_button_text': 'Get Started',
};
static const Map<String, dynamic> frFR = {
'title': 'Bonjour le monde !',
'subtitle': 'Bienvenue dans Localisation',
'description': 'Vous avez appuyé sur le bouton autant de fois :',
'switch_language': 'Changer de langue',
'applications': 'Applications',
'welcome_title': 'Bienvenue dans le futur de la Blockchain avec Pactus!',
'welcome_description': 'Là où lavenir de la blockchain se dévoile avec'
' confiance et transparence dans chaque transaction. Rejoignez-nous'
' pour façonner une révolution décentralisée!',
'start_button_text': 'Commencer',
};
static const Map<String, dynamic> esES = {
'title': '¡Hola, Mundo !',
'subtitle': 'Bienvenido a Localización',
'description': 'Has pulsado el botón tantas veces:',
'switch_language': 'Cambiar idioma',
'applications': 'Applications',
'welcome_title': 'Bienvenido al futuro de la cadena de bloques con Pactus!',
'welcome_description': 'Donde el futuro de la cadena de bloques'
' se desarrolla con confianza y transparencia en cada transacción.'
' Únase a nosotros para dar forma a una revolución descentralizada!',
'start_button_text': 'Empezar',
};

static const Map<String, Map<String, dynamic>> mapLocales = {
Expand Down
3 changes: 3 additions & 0 deletions lib/src/core/utils/gen/localization/locale_keys.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,7 @@ abstract class LocaleKeys {
static const String description = 'description';
static const String switch_language = 'switch_language';
static const String applications = 'applications';
static const String welcome_title = 'welcome_title';
static const String welcome_description = 'welcome_description';
static const String start_button_text = 'start_button_text';
}
42 changes: 0 additions & 42 deletions lib/src/features/welcome/presentation/screen/welcome_page.dart

This file was deleted.

69 changes: 69 additions & 0 deletions lib/src/features/welcome/presentation/screen/welcome_screen.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:go_router/go_router.dart';
import 'package:gui/src/core/common/colors/app_colors.dart';
import 'package:gui/src/core/common/widgets/custom_filled_button.dart';
import 'package:gui/src/core/router/route_name.dart';
import 'package:gui/src/core/utils/assets/assets.gen.dart';
import 'package:gui/src/core/utils/gen/localization/locale_keys.dart';
import 'package:gui/src/features/main/language/core/localization_extension.dart';
import 'package:pactus_gui_widgetbook/app_styles.dart';
///to-do #68: add components for this screen after designing process complete
/// by Pouria
class WelcomeScreen extends StatelessWidget {
const WelcomeScreen({super.key});

@override
Widget build(BuildContext context) {
return NavigationView(
content: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Gap(70),
Image.asset(
Assets.images.welcomePic.path,
width: double.infinity,
height: 459,
),
const Gap(40),
Text(
context.tr(LocaleKeys.welcome_title),
style: InterTextStyles.bodyBold.copyWith(
color: AppColors.primaryDark,
),
),
const Gap(16),
Text(
context.tr(LocaleKeys.welcome_description),
style: InterTextStyles.smallRegular.copyWith(
color: AppColors.primaryDark,
),
softWrap: true,textAlign: TextAlign.center,
),
const Gap(16),
CustomFilledButton(
text: LocaleKeys.start_button_text,
onPressed: () {
context.goNamed(AppRoute.initializeMode.name);
},
style: ButtonStyle(
padding: WidgetStateProperty.all<EdgeInsetsDirectional?>(
EdgeInsetsDirectional.symmetric(horizontal: 24, vertical: 4),
),
backgroundColor: WidgetStateProperty.all(Color(0xFF0066B4)),
shape: WidgetStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
),
),
const Gap(50),
],
),
),
);
}
}

0 comments on commit 90f7231

Please sign in to comment.