second commit

example/lib/main.dart

@@ -16,13 +16,12 @@ class MyApp extends StatefulWidget {
 
 class _MyAppState extends State<MyApp> {
   late User _user;
-  MyProfileData profileData = const MyProfileData();
+  MyProfileData profileData = MyProfileData();
 
   @override
   void initState() {
     super.initState();
     _user = User(
-      'displayName',
       'firstName',
       'lastName',
       Uint8List.fromList(
@@ -39,30 +38,97 @@ class _MyAppState extends State<MyApp> {
         primarySwatch: Colors.blue,
       ),
       home: ProfilePage(
+        service: MyProfileService(),
         user: _user,
       ),
     );
   }
 }
 
+class MyProfileService extends ProfileService {
+  @override
+  deleteProfile() {
+    return super.deleteProfile();
+  }
+
+  @override
+  editProfile<T extends ProfileData>(
+      User<ProfileData> user, String key, String value) {
+    return super.editProfile(user, key, value);
+  }
+
+  @override
+  uploadImage() {
+    return super.uploadImage();
+  }
+}
+
 class MyProfileData extends ProfileData {
-  const MyProfileData({
+  MyProfileData({
     this.justMyNumber = '1',
     this.justMyString = 2,
   });
 
   final String justMyNumber;
-  final int justMyString;
+  int justMyString;
 
   @override
-  Map<String, dynamic> mapWidget() {
+  Map<String, dynamic> mapWidget(Function update) {
     return {
-      'justMyNumber': Container(
+      'justMyString': Container(
         height: 100,
-        width: 100,
+        width: 300,
-        color: Colors.red,
+        child: Row(
+          children: [
+            ElevatedButton(
+              style: ElevatedButton.styleFrom(
+                primary: justMyString == 1 ? Colors.green : Colors.blue,
+              ),
+              onPressed: () {
+                justMyString = 1;
+                update();
+                print(justMyString);
+              },
+              child: const Text('1'),
+            ),
+            const Spacer(),
+            ElevatedButton(
+              style: ElevatedButton.styleFrom(
+                primary: justMyString == 2 ? Colors.green : Colors.blue,
+              ),
+              onPressed: () {
+                justMyString = 2;
+                update();
+                print(justMyString);
+              },
+              child: const Text('2'),
+            ),
+            const Spacer(),
+            ElevatedButton(
+              style: ElevatedButton.styleFrom(
+                primary: justMyString == 3 ? Colors.green : Colors.blue,
+              ),
+              onPressed: () {
+                justMyString = 3;
+                update();
+              },
+              child: const Text('3'),
+            ),
+            const Spacer(),
+            ElevatedButton(
+              style: ElevatedButton.styleFrom(
+                primary: justMyString == 4 ? Colors.green : Colors.blue,
+              ),
+              onPressed: () {
+                justMyString = 4;
+                update();
+              },
+              child: const Text('4'),
+            ),
+          ],
+        ),
       ),
-      'justMyString': null,
+      'justMyNumber': null,
     };
   }
 
@@ -86,6 +152,6 @@ class MyProfileData extends ProfileData {
 
   @override
   ProfileData create() {
-    return const MyProfileData();
+    return MyProfileData();
   }
 }

lib/src/models/user.dart

@@ -6,14 +6,12 @@ import 'package:profile/src/widgets/item_builder/item_builder.dart';
 import 'package:profile/src/widgets/item_builder/item_builder_options.dart';
 
 class User<T extends ProfileData> {
-  String? displayName;
   String? firstName;
   String? lastName;
   Uint8List? image;
   T? profileData;
 
   User(
-    this.displayName,
     this.firstName,
     this.lastName,
     this.image,
@@ -22,7 +20,6 @@ class User<T extends ProfileData> {
 
   factory User.fromMap(Map<String, dynamic> data) {
     return User(
-      data['displayName'],
       data['firstName'],
       data['lastName'],
       data['image'],
@@ -32,7 +29,6 @@ class User<T extends ProfileData> {
 
   Map<String, dynamic> toMap() {
     return {
-      'displayName': displayName,
       'firstName': firstName,
       'lastName': lastName,
       'image': image,
@@ -48,13 +44,14 @@ abstract class ProfileData {
 
   Map<String, dynamic> toMap();
 
-  Map<String, dynamic> mapWidget();
+  Map<String, dynamic> mapWidget(Function update);
 
   ProfileData create();
 
   List<Widget> buildItems(
     Map<String, dynamic> items,
     Map<String, dynamic> typeMap,
+    double spacing,
     Function(String, String) updateProfile, {
     ItemBuilder? itemBuilder,
     ItemBuilderOptions? itemBuilderOptions,
@@ -83,6 +80,9 @@ abstract class ProfileData {
                 },
               ),
             );
+      widgets.add(SizedBox(
+        height: spacing,
+      ));
     }
     return widgets;
   }

lib/src/services/profile_service.dart

@@ -1,9 +1,12 @@
 import 'package:profile/profile.dart';
 
-class ProfileService {
+abstract class ProfileService {
   const ProfileService();
 
-  deleteProfile() {}
+  deleteProfile() {
+    print("Request to delete profile");
+    // TODO(anyone) project specific
+  }
 
   editProfile<T extends ProfileData>(User user, String key, String value) {
     if (user.profileData != null) {
@@ -16,5 +19,8 @@ class ProfileService {
     }
   }
 
-  uploadImage() {}
+  uploadImage() {
+    print('Request to change picture');
+    // TODO(anyone) open image picker and update profile
+  }
 }

lib/src/widgets/avatar/avatar.dart

@@ -9,13 +9,11 @@ class Avatar extends StatelessWidget {
     this.image,
     this.name,
     this.avatar,
-    this.displayName,
     this.style = const AvatarStyle(),
   }) : super(key: key);
 
   final Uint8List? image;
   final String? name;
-  final String? displayName;
   final Widget? avatar;
   final AvatarStyle style;
 
@@ -24,9 +22,9 @@ class Avatar extends StatelessWidget {
     return Column(
       children: [
         _avatar(),
-        if (displayName != null)
+        if (name != null)
           Text(
-            displayName!,
+            name!,
             style: style.displayNameStyle,
           )
       ],

lib/src/widgets/profile/profile_page.dart

@@ -9,12 +9,13 @@ class ProfilePage extends StatefulWidget {
   const ProfilePage({
     Key? key,
     required this.user,
-    this.service = const ProfileService(),
+    required this.service,
     this.style = const ProfileStyle(),
     this.customAvatar,
     this.showAvatar = true,
     this.itemBuilder,
     this.itemBuilderOptions,
+    this.showDeleteProfile = true,
   }) : super(key: key);
 
   final User user;
@@ -22,7 +23,9 @@ class ProfilePage extends StatefulWidget {
   final ProfileStyle style;
   final Widget? customAvatar;
   final bool showAvatar;
+  final bool showDeleteProfile;
   final ItemBuilder? itemBuilder;
+
   final ItemBuilderOptions? itemBuilderOptions;
 
   @override
@@ -30,37 +33,140 @@ class ProfilePage extends StatefulWidget {
 }
 
 class _ProfilePageState extends State<ProfilePage> {
+  @override
+  Widget build(BuildContext context) {
+    return ProfileWrapper(
+      service: widget.service,
+      user: widget.user,
+      rebuild: () {
+        setState(() {});
+      },
+      style: widget.style,
+      customAvatar: widget.customAvatar,
+      showAvatar: widget.showAvatar,
+      showDeleteProfile: widget.showDeleteProfile,
+      itemBuilder: widget.itemBuilder,
+      itemBuilderOptions: widget.itemBuilderOptions,
+      key: UniqueKey(),
+    );
+  }
+}
+
+class ProfileWrapper extends StatefulWidget {
+  const ProfileWrapper({
+    Key? key,
+    required this.user,
+    required this.service,
+    required this.rebuild,
+    this.style = const ProfileStyle(),
+    this.customAvatar,
+    this.showAvatar = true,
+    this.itemBuilder,
+    this.itemBuilderOptions,
+    this.showDeleteProfile = true,
+  }) : super(key: key);
+
+  final User user;
+  final ProfileService service;
+  final ProfileStyle style;
+  final Widget? customAvatar;
+  final bool showAvatar;
+  final bool showDeleteProfile;
+  final ItemBuilder? itemBuilder;
+  final Function rebuild;
+  final ItemBuilderOptions? itemBuilderOptions;
+
+  @override
+  State<ProfileWrapper> createState() => _ProfileWrapperState();
+}
+
+class _ProfileWrapperState extends State<ProfileWrapper> {
   late List<Widget> profileItems;
+  List<Widget> defaultItems = [];
+
   @override
   void initState() {
     super.initState();
     profileItems = widget.user.profileData!.buildItems(
       widget.user.profileData!.toMap(),
-      widget.user.profileData!.mapWidget(),
+      widget.user.profileData!.mapWidget(() {
+        widget.rebuild();
+      }),
+      widget.style.betweenDefaultItemPadding,
       (key, value) {
-        const ProfileService().editProfile(widget.user, key, value);
+        widget.service.editProfile(widget.user, key, value);
       },
       itemBuilder: widget.itemBuilder,
       itemBuilderOptions: widget.itemBuilderOptions,
     );
+    if (widget.itemBuilder == null) {
+      ItemBuilder builder = ItemBuilder(
+        options: widget.itemBuilderOptions ?? const ItemBuilderOptions(),
+      );
+      defaultItems.add(builder.build(widget.user.firstName, null, (v) {
+        widget.user.firstName = v;
+      }));
+      defaultItems.add(
+        SizedBox(
+          height: widget.style.betweenDefaultItemPadding,
+        ),
+      );
+      defaultItems.add(builder.build(widget.user.lastName, null, (v) {
+        widget.user.lastName = v;
+      }));
+    } else {
+      defaultItems
+          .add(widget.itemBuilder!.build(widget.user.firstName, null, (v) {
+        widget.user.firstName = v;
+      }));
+      defaultItems.add(
+        SizedBox(
+          height: widget.style.betweenDefaultItemPadding,
+        ),
+      );
+      defaultItems
+          .add(widget.itemBuilder!.build(widget.user.lastName, null, (v) {
+        widget.user.lastName = v;
+      }));
+    }
   }
 
   @override
   Widget build(BuildContext context) {
     return Material(
       child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 50),
+        padding: widget.style.pagePadding,
         child: Column(
           children: [
             if (widget.showAvatar)
-              Avatar(
+              InkWell(
-                name: '${widget.user.firstName} ${widget.user.lastName}',
+                onTap: () {
-                style: widget.style.avatarStyle,
+                  widget.service.uploadImage();
-                displayName: widget.user.displayName,
+                },
-                avatar: widget.customAvatar,
+                child: Avatar(
-                image: widget.user.image,
+                  name: '${widget.user.firstName} ${widget.user.lastName}',
+                  style: widget.style.avatarStyle,
+                  avatar: widget.customAvatar,
+                  image: widget.user.image,
+                ),
               ),
+            if (widget.showAvatar)
+              SizedBox(
+                height: widget.style.betweenDefaultItemPadding,
+              ),
+            ...defaultItems,
             ...profileItems,
+            if (widget.showDeleteProfile)
+              SizedBox(
+                height: widget.style.betweenDefaultItemPadding,
+              ),
+            if (widget.showDeleteProfile)
+              InkWell(
+                onTap: () {
+                  widget.service.deleteProfile();
+                },
+                child: const Text('Profiel verwijderen'),
+              ),
           ],
         ),
       ),

lib/src/widgets/profile/profile_style.dart

@@ -1,9 +1,14 @@
+import 'package:flutter/material.dart';
 import 'package:profile/src/widgets/avatar/avatar_style.dart';
 
 class ProfileStyle {
   const ProfileStyle({
     this.avatarStyle = const AvatarStyle(),
+    this.betweenDefaultItemPadding = 10,
+    this.pagePadding = EdgeInsets.zero,
   });
 
   final AvatarStyle avatarStyle;
+  final EdgeInsetsGeometry pagePadding;
+  final double betweenDefaultItemPadding;
 }