mirror of
https://github.com/Such-Software/hash-wallet.git
synced 2026-10-21 06:18:42 +02:00
CWA-205 | applied new design to seed_language_page
This commit is contained in:
Oleksandr Sobol
@@ -0,0 +1,66 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class SelectButton extends StatelessWidget {
|
||||
SelectButton({
|
||||
@required this.image,
|
||||
@required this.text,
|
||||
@required this.color,
|
||||
@required this.textColor,
|
||||
@required this.onTap,
|
||||
});
|
||||
|
||||
final Image image;
|
||||
final String text;
|
||||
final Color color;
|
||||
final Color textColor;
|
||||
final VoidCallback onTap;
|
||||
|
||||
final selectArrowImage = Image.asset('assets/images/select_arrow.png');
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
height: 60,
|
||||
padding: EdgeInsets.only(left: 30, right: 30),
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.all(Radius.circular(30)),
|
||||
color: color
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
image != null
|
||||
? image
|
||||
: Offstage(),
|
||||
Padding(
|
||||
padding: image != null
|
||||
? EdgeInsets.only(left: 15)
|
||||
: EdgeInsets.only(left: 0),
|
||||
child: Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: textColor
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
selectArrowImage
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -56,40 +56,5 @@ class RestoreWalletOptionsPage extends BasePage {
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
/*BaseRestoreWidget(
|
||||
firstRestoreButton: RestoreButton(
|
||||
onPressed: () {
|
||||
seedLanguageStore.setCurrentRoute(Routes.restoreWalletFromSeed);
|
||||
Navigator.pushNamed(context, Routes.seedLanguage);
|
||||
},
|
||||
imageWidget: ImageWidget(
|
||||
image: _imageSeed,
|
||||
aspectRatioImage: _aspectRatioImage,
|
||||
isLargeScreen: isLargeScreen),
|
||||
titleColor: Palette.lightViolet,
|
||||
color: Palette.lightViolet,
|
||||
title: S.of(context).restore_title_from_seed,
|
||||
description: S.of(context).restore_description_from_seed,
|
||||
textButton: S.of(context).restore_next,
|
||||
),
|
||||
secondRestoreButton: RestoreButton(
|
||||
onPressed: () {
|
||||
seedLanguageStore.setCurrentRoute(Routes.restoreWalletFromKeys);
|
||||
Navigator.pushNamed(context, Routes.seedLanguage);
|
||||
},
|
||||
imageWidget: ImageWidget(
|
||||
image: _imageKeys,
|
||||
aspectRatioImage: _aspectRatioImage,
|
||||
isLargeScreen: isLargeScreen),
|
||||
titleColor: Palette.cakeGreen,
|
||||
color: Palette.cakeGreen,
|
||||
title: S.of(context).restore_title_from_keys,
|
||||
description: S.of(context).restore_description_from_keys,
|
||||
textButton: S.of(context).restore_next,
|
||||
),
|
||||
isLargeScreen: isLargeScreen,
|
||||
);*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,52 +1,99 @@
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/src/widgets/primary_button.dart';
|
||||
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||
import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:cake_wallet/src/widgets/primary_button.dart';
|
||||
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart';
|
||||
import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
|
||||
import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart';
|
||||
|
||||
class SeedLanguage extends BasePage {
|
||||
final imageSeed = Image.asset('assets/images/seedIco.png');
|
||||
@override
|
||||
Color get backgroundColor => PaletteDark.historyPanel;
|
||||
|
||||
@override
|
||||
Widget body(BuildContext context) {
|
||||
Widget body(BuildContext context) => SeedLanguageForm();
|
||||
}
|
||||
|
||||
class SeedLanguageForm extends StatefulWidget {
|
||||
@override
|
||||
SeedLanguageFormState createState() => SeedLanguageFormState();
|
||||
}
|
||||
|
||||
class SeedLanguageFormState extends State<SeedLanguageForm> {
|
||||
static const aspectRatioImage = 1.22;
|
||||
final walletNameImage = Image.asset('assets/images/wallet_name.png');
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
|
||||
|
||||
final List<String> seedLocales = [
|
||||
S.current.seed_language_english,
|
||||
S.current.seed_language_chinese,
|
||||
S.current.seed_language_dutch,
|
||||
S.current.seed_language_german,
|
||||
S.current.seed_language_japanese,
|
||||
S.current.seed_language_portuguese,
|
||||
S.current.seed_language_russian,
|
||||
S.current.seed_language_spanish
|
||||
];
|
||||
|
||||
return Container(
|
||||
padding: EdgeInsets.all(20.0),
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
imageSeed,
|
||||
Text(
|
||||
color: PaletteDark.historyPanel,
|
||||
padding: EdgeInsets.only(top: 24),
|
||||
child: ScrollableWithBottomSection(
|
||||
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
|
||||
content: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: 12, right: 12),
|
||||
child: AspectRatio(
|
||||
aspectRatio: aspectRatioImage,
|
||||
child: FittedBox(child: walletNameImage, fit: BoxFit.fill)),
|
||||
),
|
||||
Padding(padding: EdgeInsets.only(top: 40),
|
||||
child: Text(
|
||||
S.of(context).seed_language_choose,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(fontSize: 16.0),
|
||||
style: TextStyle(
|
||||
fontSize: 16.0,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 20.0,
|
||||
),
|
||||
Padding(padding: EdgeInsets.only(top: 24),
|
||||
child: Observer(
|
||||
builder: (_) => SelectButton(
|
||||
image: null,
|
||||
text: seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)],
|
||||
color: PaletteDark.menuList,
|
||||
textColor: Colors.white,
|
||||
onTap: () async => await showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) => SeedLanguagePicker()
|
||||
)
|
||||
)
|
||||
),
|
||||
SeedLanguagePicker(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
PrimaryButton(
|
||||
onPressed: () =>
|
||||
Navigator.of(context).popAndPushNamed(seedLanguageStore.currentRoute),
|
||||
text: S.of(context).seed_language_next,
|
||||
color:
|
||||
Theme.of(context).primaryTextTheme.button.backgroundColor,
|
||||
textColor:
|
||||
Theme.of(context).primaryTextTheme.button.color),
|
||||
],
|
||||
),
|
||||
)
|
||||
]),
|
||||
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
|
||||
bottomSection: Observer(
|
||||
builder: (context) {
|
||||
return PrimaryButton(
|
||||
onPressed: () =>
|
||||
Navigator.of(context).popAndPushNamed(seedLanguageStore.currentRoute),
|
||||
text: S.of(context).seed_language_next,
|
||||
color: Colors.green,
|
||||
textColor: Colors.white);
|
||||
},
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,55 +1,234 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart';
|
||||
import 'package:cake_wallet/src/widgets/present_picker.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
|
||||
class SeedLanguagePicker extends StatelessWidget {
|
||||
List<String> seedLocales = [
|
||||
S.current.seed_language_english,
|
||||
S.current.seed_language_chinese,
|
||||
S.current.seed_language_dutch,
|
||||
S.current.seed_language_german,
|
||||
S.current.seed_language_japanese,
|
||||
S.current.seed_language_portuguese,
|
||||
S.current.seed_language_russian,
|
||||
S.current.seed_language_spanish
|
||||
];
|
||||
List<Image> flagImages = [
|
||||
Image.asset('assets/images/usa.png'),
|
||||
Image.asset('assets/images/china.png'),
|
||||
Image.asset('assets/images/holland.png'),
|
||||
Image.asset('assets/images/germany.png'),
|
||||
Image.asset('assets/images/japan.png'),
|
||||
Image.asset('assets/images/portugal.png'),
|
||||
Image.asset('assets/images/russia.png'),
|
||||
Image.asset('assets/images/spain.png'),
|
||||
];
|
||||
|
||||
List<String> languageCodes = [
|
||||
'Eng',
|
||||
'Chi',
|
||||
'Ned',
|
||||
'Ger',
|
||||
'Jap',
|
||||
'Por',
|
||||
'Rus',
|
||||
'Esp',
|
||||
];
|
||||
|
||||
enum Places {topLeft, topRight, bottomLeft, bottomRight, inside}
|
||||
|
||||
class SeedLanguagePicker extends StatefulWidget {
|
||||
@override
|
||||
SeedLanguagePickerState createState() => SeedLanguagePickerState();
|
||||
}
|
||||
|
||||
class SeedLanguagePickerState extends State<SeedLanguagePicker> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
|
||||
|
||||
return Observer(
|
||||
builder: (_) => InkWell(
|
||||
onTap: () => _setSeedLanguage(context),
|
||||
return GestureDetector(
|
||||
onTap: () => Navigator.of(context).pop(),
|
||||
child: Container(
|
||||
color: Colors.transparent,
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
//width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Theme.of(context).dividerTheme.color
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8.0)
|
||||
),
|
||||
child: Text(seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)],
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(fontSize: 16.0, color: Palette.lightBlue),
|
||||
decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)),
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
padding: EdgeInsets.only(left: 24, right: 24),
|
||||
child: Text(
|
||||
S.of(context).seed_choose,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
decoration: TextDecoration.none,
|
||||
color: Colors.white
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(top: 24),
|
||||
child: GestureDetector(
|
||||
onTap: () => null,
|
||||
child: Container(
|
||||
height: 300,
|
||||
width: 300,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.all(Radius.circular(14)),
|
||||
color: PaletteDark.walletCardSubAddressField
|
||||
),
|
||||
child: GridView.count(
|
||||
shrinkWrap: true,
|
||||
crossAxisCount: 3,
|
||||
childAspectRatio: 1,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
crossAxisSpacing: 1,
|
||||
mainAxisSpacing: 1,
|
||||
children: List.generate(9, (index) {
|
||||
|
||||
if (index == 8) {
|
||||
|
||||
return gridTile(
|
||||
isCurrent: false,
|
||||
place: Places.bottomRight,
|
||||
image: null,
|
||||
text: '',
|
||||
onTap: null);
|
||||
|
||||
} else {
|
||||
|
||||
final code = languageCodes[index];
|
||||
final flag = flagImages[index];
|
||||
final isCurrent = index == seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage);
|
||||
|
||||
if (index == 0) {
|
||||
return gridTile(
|
||||
isCurrent: isCurrent,
|
||||
place: Places.topLeft,
|
||||
image: flag,
|
||||
text: code,
|
||||
onTap: () {
|
||||
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
|
||||
Navigator.of(context).pop();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (index == 2) {
|
||||
return gridTile(
|
||||
isCurrent: isCurrent,
|
||||
place: Places.topRight,
|
||||
image: flag,
|
||||
text: code,
|
||||
onTap: () {
|
||||
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
|
||||
Navigator.of(context).pop();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (index == 6) {
|
||||
return gridTile(
|
||||
isCurrent: isCurrent,
|
||||
place: Places.bottomLeft,
|
||||
image: flag,
|
||||
text: code,
|
||||
onTap: () {
|
||||
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
|
||||
Navigator.of(context).pop();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return gridTile(
|
||||
isCurrent: isCurrent,
|
||||
place: Places.inside,
|
||||
image: flag,
|
||||
text: code,
|
||||
onTap: () {
|
||||
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
|
||||
Navigator.of(context).pop();
|
||||
}
|
||||
);
|
||||
}
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
));
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _setSeedLanguage(BuildContext context) async {
|
||||
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
|
||||
String selectedSeedLanguage =
|
||||
await presentPicker(context, seedLocales);
|
||||
Widget gridTile({
|
||||
@required bool isCurrent,
|
||||
@required Places place,
|
||||
@required Image image,
|
||||
@required String text,
|
||||
@required VoidCallback onTap}) {
|
||||
|
||||
if (selectedSeedLanguage != null) {
|
||||
selectedSeedLanguage = seedLanguages[seedLocales.indexOf(selectedSeedLanguage)];
|
||||
seedLanguageStore.setSelectedSeedLanguage(selectedSeedLanguage);
|
||||
BorderRadius borderRadius;
|
||||
final color = isCurrent ? PaletteDark.historyPanel : PaletteDark.menuList;
|
||||
final textColor = isCurrent ? Colors.blue : Colors.white;
|
||||
|
||||
switch (place) {
|
||||
case Places.topLeft:
|
||||
borderRadius = BorderRadius.only(topLeft: Radius.circular(14));
|
||||
break;
|
||||
case Places.topRight:
|
||||
borderRadius = BorderRadius.only(topRight: Radius.circular(14));
|
||||
break;
|
||||
case Places.bottomLeft:
|
||||
borderRadius = BorderRadius.only(bottomLeft: Radius.circular(14));
|
||||
break;
|
||||
case Places.bottomRight:
|
||||
borderRadius = BorderRadius.only(bottomRight: Radius.circular(14));
|
||||
break;
|
||||
case Places.inside:
|
||||
borderRadius = BorderRadius.all(Radius.circular(0));
|
||||
break;
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: borderRadius,
|
||||
color: color
|
||||
),
|
||||
child: Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
image != null
|
||||
? image
|
||||
: Offstage(),
|
||||
Padding(
|
||||
padding: image != null
|
||||
? EdgeInsets.only(left: 10)
|
||||
: EdgeInsets.only(left: 0),
|
||||
child: Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
decoration: TextDecoration.none,
|
||||
color: textColor
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user