alexvasl/drifter_app
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes to the profile screen

Browse Source
This commit is contained in:
Alex Vasilev 2023-06-14 23:23:06 +03:00
parent c7d0a114e0
commit 83dbae8295
7 changed files with 822 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/avatar_full.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

5
lib/main.dart
View File

@ -4,6 +4,7 @@ import 'package:drifter/pages/create_account_screen/create_account_screen.dart';
import 'package:drifter/pages/home_screen/home_screen_widget.dart'; import 'package:drifter/pages/home_screen/home_screen_widget.dart';
import 'package:drifter/pages/login_screen/login_screen.dart'; import 'package:drifter/pages/login_screen/login_screen.dart';
import 'package:drifter/pages/main_screen/main_screen_widget.dart'; import 'package:drifter/pages/main_screen/main_screen_widget.dart';
import 'package:drifter/pages/profile_screen/edit_profile_screen.dart';
import 'package:drifter/pages/qr_code_screen/qr_code_screen.dart'; import 'package:drifter/pages/qr_code_screen/qr_code_screen.dart';
import 'package:drifter/pages/settings_screen/settings_screen.dart'; import 'package:drifter/pages/settings_screen/settings_screen.dart';
import 'package:drifter/pages/splash_screen/splash_screen.dart'; import 'package:drifter/pages/splash_screen/splash_screen.dart';
@ -13,6 +14,8 @@ import 'package:drifter/theme/app_colors.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'pages/profile_screen/view_profile_photo_screen/view_profile_photo_screen.dart';
void main() { void main() {
runApp(const MyApp()); runApp(const MyApp());
} }
@ -44,6 +47,8 @@ class MyApp extends StatelessWidget {
'/MainScreen': (context) => const MainScreenWidget(), '/MainScreen': (context) => const MainScreenWidget(),
'/Settings': (context) => const SettingsScreen(), '/Settings': (context) => const SettingsScreen(),
'/QrCodeScreen': (context) => const QrCodeScreen(), '/QrCodeScreen': (context) => const QrCodeScreen(),
'/EditProfileScreen': (context) => const EditProfileScreen(),
'/ViewProfilePhotoScreen': (context) => const ViewProfilePhotoScreen(),
}, },
); );
} }

333
lib/pages/profile_screen/edit_profile_screen.dart Normal file
View File

@ -0,0 +1,333 @@
import 'package:dart_nostr/dart_nostr.dart';
import 'package:drifter/models/models.dart';
import 'package:drifter/pages/profile_screen/widgets/delete_keys_dialog.dart';
import 'package:drifter/main.dart';
import 'package:drifter/pages/profile_screen/widgets/key_exist_dialog.dart';
import 'package:drifter/pages/profile_screen/widgets/keys_option_modal_bottom_sheet.dart';
import 'package:drifter/pages/profile_screen/widgets/message_snack_bar.dart';
import 'package:drifter/pages/profile_screen/widgets/user_info_widget.dart';
import 'package:drifter/theme/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
class EditProfileScreen extends StatefulWidget {
const EditProfileScreen({super.key});
@override
State<EditProfileScreen> createState() => EditProfileScreenState();
}
class EditProfileScreenState extends State<EditProfileScreen> {
final secureStorage = const FlutterSecureStorage();
bool _toHex = false;
TextEditingController privateKeyInput = TextEditingController();
TextEditingController publicKeyInput = TextEditingController();
// final keyGenerator = KeyApi();
// final nip19 = Nip19();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.mainBackground,
appBar: AppBar(
actions: [
Container(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
height: 40,
width: 82,
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100))),
backgroundColor:
MaterialStateProperty.all(AppColors.buttonPrimaryDefaultBg),
),
onPressed: () {},
child: Text('Save'),
),
)
],
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: AppColors.topNavIconPtimary,
),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(
('Edit profile'),
style: TextStyle(
color: AppColors.topNavText,
),
// textAlign: TextAlign.center,
),
backgroundColor: AppColors.mainBackground,
elevation: 0,
),
body: ListView(
children: [
Stack(
children: [
Container(
width: double.infinity,
height: 70,
child: FittedBox(
child: Image.asset('assets/images/banner.png'),
fit: BoxFit.fill,
),
),
Row(
children: [
Padding(
padding:
const EdgeInsets.only(top: 30, left: 16, right: 58),
child: ClipRRect(
borderRadius: BorderRadius.circular(200),
child: InkWell(
onTap: () {
Navigator.pushNamed(
context, '/ViewProfilePhotoScreen');
},
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
border: Border.all(
width: 2, color: Color(0xFFF2EFFF))),
child: Image.asset('assets/images/avatar.png')),
),
),
),
],
)
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'User info',
style: TextStyle(
color: AppColors.label, fontWeight: FontWeight.w500),
),
SizedBox(
height: 8,
),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: AppColors.textFieldDefaultBg,
labelText: 'Username',
labelStyle:
TextStyle(color: AppColors.textFieldDefaultText),
prefixIcon: const Icon(Icons.alternate_email),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
iconColor: AppColors.textFieldDefaultIconTrail),
controller: userNameController,
),
const SizedBox(height: 8),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: AppColors.textFieldDefaultBg,
labelText: 'Name',
labelStyle:
TextStyle(color: AppColors.textFieldDefaultText),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
iconColor: AppColors.textFieldDefaultIconTrail),
controller: nameController,
),
const SizedBox(height: 8),
SizedBox(
height: 112,
child: TextField(
minLines: 3,
maxLines: 5,
decoration: InputDecoration(
filled: true,
fillColor: AppColors.textFieldDefaultBg,
labelText: 'Description',
alignLabelWithHint: true,
labelStyle:
TextStyle(color: AppColors.textFieldDefaultText),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
iconColor: AppColors.textFieldDefaultIconTrail),
controller: descriptionController,
),
),
const SizedBox(height: 8),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: AppColors.textFieldDefaultBg,
labelText: 'Website URL',
labelStyle:
TextStyle(color: AppColors.textFieldDefaultText),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
iconColor: AppColors.textFieldDefaultIconTrail),
controller: nameController,
),
],
),
)
],
),
);
// return ListView(
// children: [
// const SizedBox(
// height: 60,
// ),
// const UserInfo(),
// const SizedBox(
// height: 40,
// ),
// FormKeys(),
// const SizedBox(height: 20),
// Padding(
// padding: const EdgeInsets.all(16.0),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
// children: [
// Keys.keysExist
// ? IconButton(
// onPressed: () {
// setState(() {
// _toHex = !_toHex;
// });
// },
// icon: const Icon(Icons.refresh))
// // ElevatedButton(
// // style: ButtonStyle(
// // backgroundColor:
// // MaterialStateProperty.all(AppColors.background)),
// // onPressed: () {
// // keysExistDialog(
// // Nostr.instance.keysService
// // .encodePublicKeyToNpub(Keys.publicKey),
// // Nostr.instance.keysService
// // .encodePrivateKeyToNsec(Keys.privateKey),
// // );
// // },
// // child: const Text(
// // 'Keys',
// // ),
// // )
// : Row(
// children: [
// ElevatedButton(
// style: ButtonStyle(
// backgroundColor: MaterialStateProperty.all(
// AppColors.background)),
// onPressed: () {
// modalBottomSheet();
// },
// child: const Text(
// 'Generate Keys',
// ),
// ),
// SizedBox(width: 100),
// ElevatedButton(
// style: ButtonStyle(
// backgroundColor: MaterialStateProperty.all(
// AppColors.background)),
// onPressed: () {
// Navigator.pushNamed(context, '/login').then((_) {
// initState();
// });
// },
// child: const Text(
// 'Login',
// ),
// ),
// ],
// ),
// Keys.keysExist
// ? Row(
// children: [
// IconButton(
// onPressed: () {
// deleteKeysDialog();
// },
// icon: const Icon(Icons.delete)),
// ],
// )
// : Container(),
// ],
// ),
// )
// ],
// );
}
Form FormKeys() {
return Form(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextFormField(
controller: privateKeyInput,
// _toHex ? widget.hexPriv : widget.nsecEncoded,
decoration: const InputDecoration(
labelText: 'Private Key',
border: OutlineInputBorder(),
),
maxLength: 64,
),
const SizedBox(
height: 20,
),
TextFormField(
controller: publicKeyInput,
// _toHex ? widget.hexPub : widget.npubEncoded,
decoration: const InputDecoration(
labelText: 'Public Key',
border: OutlineInputBorder(),
),
),
const SizedBox(
height: 40,
),
TextFormField(
decoration: const InputDecoration(
labelText: 'Relay',
border: OutlineInputBorder(),
),
),
],
),
),
);
}
}

151
lib/pages/profile_screen/profile_screen.dart
View File

@ -9,6 +9,7 @@ import 'package:drifter/pages/profile_screen/widgets/user_info_widget.dart';
import 'package:drifter/theme/app_colors.dart'; import 'package:drifter/theme/app_colors.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart'; import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:toggle_switch/toggle_switch.dart';
class ProfileScreen extends StatefulWidget { class ProfileScreen extends StatefulWidget {
const ProfileScreen({super.key}); const ProfileScreen({super.key});
@ -134,7 +135,9 @@ class ProfileScreenState extends State<ProfileScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
publicKeyInput.text = Keys.npubKey; publicKeyInput.text = Keys.npubKey;
return Container( return ListView(
children: [
Container(
color: AppColors.profileWrapperBg, color: AppColors.profileWrapperBg,
child: Column( child: Column(
children: [ children: [
@ -176,7 +179,10 @@ class ProfileScreenState extends State<ProfileScreen> {
child: FloatingActionButton( child: FloatingActionButton(
backgroundColor: backgroundColor:
AppColors.buttonSecondaryDefaultBg, AppColors.buttonSecondaryDefaultBg,
onPressed: () {}, onPressed: () {
Navigator.pushNamed(
context, '/EditProfileScreen');
},
elevation: 0, elevation: 0,
child: Icon( child: Icon(
Icons.edit, Icons.edit,
@ -195,7 +201,8 @@ class ProfileScreenState extends State<ProfileScreen> {
backgroundColor: backgroundColor:
AppColors.buttonSecondaryDefaultBg, AppColors.buttonSecondaryDefaultBg,
onPressed: () { onPressed: () {
Navigator.pushNamed(context, '/QrCodeScreen'); Navigator.pushNamed(
context, '/QrCodeScreen');
}, },
elevation: 0, elevation: 0,
child: Icon( child: Icon(
@ -234,8 +241,8 @@ class ProfileScreenState extends State<ProfileScreen> {
child: Text( child: Text(
'Follow', 'Follow',
style: TextStyle( style: TextStyle(
color: color: AppColors
AppColors.buttonPrimaryDefaultText), .buttonPrimaryDefaultText),
), ),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: backgroundColor:
@ -306,19 +313,27 @@ class ProfileScreenState extends State<ProfileScreen> {
fillColor: AppColors.profileKeyField, fillColor: AppColors.profileKeyField,
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
borderSide: borderSide: BorderSide(
BorderSide(width: 0, style: BorderStyle.none), width: 0, style: BorderStyle.none),
)), )),
minLines: 2, minLines: 2,
maxLines: 2, maxLines: 2,
controller: publicKeyInput, controller: publicKeyInput,
), ),
), ),
Container( Padding(
padding: const EdgeInsets.symmetric(vertical: 13),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
TextButton.icon( SizedBox(
height: 16,
child: TextButton.icon(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
// <-- TextButton // <-- TextButton
onPressed: () {}, onPressed: () {},
icon: Icon( icon: Icon(
@ -333,10 +348,18 @@ class ProfileScreenState extends State<ProfileScreen> {
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
), ),
),
SizedBox( SizedBox(
height: 6, height: 6,
), ),
TextButton.icon( SizedBox(
height: 16,
child: TextButton.icon(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
// <-- TextButton // <-- TextButton
onPressed: () {}, onPressed: () {},
icon: Icon( icon: Icon(
@ -351,10 +374,18 @@ class ProfileScreenState extends State<ProfileScreen> {
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
), ),
),
SizedBox( SizedBox(
height: 6, height: 6,
), ),
TextButton.icon( SizedBox(
height: 16,
child: TextButton.icon(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
// <-- TextButton // <-- TextButton
onPressed: () {}, onPressed: () {},
icon: Icon( icon: Icon(
@ -369,10 +400,18 @@ class ProfileScreenState extends State<ProfileScreen> {
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
), ),
),
SizedBox( SizedBox(
height: 6, height: 6,
), ),
TextButton.icon( SizedBox(
height: 16,
child: TextButton.icon(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
// <-- TextButton // <-- TextButton
onPressed: () {}, onPressed: () {},
icon: Icon( icon: Icon(
@ -387,10 +426,18 @@ class ProfileScreenState extends State<ProfileScreen> {
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
), ),
),
SizedBox( SizedBox(
height: 6, height: 6,
), ),
TextButton.icon( SizedBox(
height: 16,
child: TextButton.icon(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
// <-- TextButton // <-- TextButton
onPressed: () {}, onPressed: () {},
icon: Icon( icon: Icon(
@ -405,10 +452,18 @@ class ProfileScreenState extends State<ProfileScreen> {
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
), ),
),
SizedBox( SizedBox(
height: 6, height: 6,
), ),
TextButton.icon( SizedBox(
height: 16,
child: TextButton.icon(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
// <-- TextButton // <-- TextButton
onPressed: () {}, onPressed: () {},
icon: Icon( icon: Icon(
@ -423,13 +478,47 @@ class ProfileScreenState extends State<ProfileScreen> {
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
), ),
),
]), ]),
) ),
Container(
child: ProfileStats(),
),
]), ]),
), ),
), ),
], ],
), ),
),
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 4, right: 4, left: 4),
child: ToggleSwitch(
customWidths: [133, 133, 133],
// minWidth: double.infinity,
minHeight: 48,
totalSwitches: 3,
labels: ['Posts', 'Posts & Replies', 'Bookmarks'],
activeBgColor: [AppColors.toggleSwitchActiveBg],
activeFgColor: AppColors.toggleSwitchTextActive,
inactiveBgColor: AppColors.toggleSwitchBg,
inactiveFgColor: AppColors.toggleSwitchTextInactive,
activeBorders: [
Border.all(
color: AppColors.toggleSwitchBg,
width: 4,
),
],
radiusStyle: true,
cornerRadius: 8,
customTextStyles: [
TextStyle(fontSize: 12, fontWeight: FontWeight.w600)
],
onToggle: (indexToggle) {
print(indexToggle);
},
),
),
],
); );
// return ListView( // return ListView(
// children: [ // children: [
@ -622,3 +711,35 @@ class ProfileScreenState extends State<ProfileScreen> {
); );
} }
} }
class ProfileStats extends StatelessWidget {
const ProfileStats({
super.key,
});
final following = '3,789';
final followers = '2,554';
final zaps = '1,878';
final relays = '6';
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
child: Text('${following} Following'),
),
SizedBox(
child: Text('${followers} Followers'),
),
SizedBox(
child: Text('${zaps} Zaps'),
),
SizedBox(
child: Text('${relays} Relays'),
),
],
);
}
}

74
lib/pages/profile_screen/view_profile_photo_screen/view_profile_photo_screen.dart Normal file
View File

@ -0,0 +1,74 @@
import 'package:drifter/theme/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
class ViewProfilePhotoScreen extends StatefulWidget {
const ViewProfilePhotoScreen({super.key});
@override
State<ViewProfilePhotoScreen> createState() => _ViewProfilePhotoScreenState();
}
class _ViewProfilePhotoScreenState extends State<ViewProfilePhotoScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.mainBackground,
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: AppColors.topNavIconPtimary,
),
onPressed: () => Navigator.of(context).pop(),
),
title: Text(
('View profile photo'),
style: TextStyle(
color: AppColors.topNavText,
),
// textAlign: TextAlign.center,
),
centerTitle: true,
backgroundColor: AppColors.mainBackground,
elevation: 0,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(child: SizedBox()),
Container(
width: double.infinity,
child: FittedBox(
child: Image.asset('assets/images/avatar_full.png'),
fit: BoxFit.fill,
),
),
Expanded(child: SizedBox()),
Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
width: double.infinity,
height: 56,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100)),
backgroundColor: AppColors.buttonSecondaryDefaultBg),
onPressed: () {},
child: Text(
'Edit profile photo',
style: TextStyle(
color: AppColors.buttonSecondaryText,
fontWeight: FontWeight.w600),
),
),
),
),
],
),
);
}
}

2
lib/pages/qr_code_screen/qr_code_screen.dart
View File

@ -71,7 +71,7 @@ class _QrCodeScreenState extends State<QrCodeScreen> {
), ),
), ),
Text( Text(
'Cameron Williams on', 'Cameron Williamson',
style: TextStyle( style: TextStyle(
color: Color(0xFF302F38), color: Color(0xFF302F38),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,

2
lib/theme/app_colors.dart
View File

@ -5,6 +5,8 @@ abstract class AppColors {
static const mainAccent = Color(0xFFFFCC11); static const mainAccent = Color(0xFFFFCC11);
static const mainBackground = Color(0xFFF2EFFF); static const mainBackground = Color(0xFFF2EFFF);
static const label = Color(0xFF7F71C8);
// Button // Button
static const buttonPrimaryDefaultBg = Color(0xFF4F46F1); static const buttonPrimaryDefaultBg = Color(0xFF4F46F1);
static const buttonPrimaryDefaultText = Color(0xFFFFFFFF); static const buttonPrimaryDefaultText = Color(0xFFFFFFFF);