removed column

This commit is contained in:
Joons van Stuijvenberg 2022-12-02 10:40:16 +01:00
parent 3dca4489ba
commit 5b2757e19b
8 changed files with 243 additions and 258 deletions

View file

@ -25,3 +25,7 @@
## 1.0.1
* Added a default wrap instead of column
## 1.0.2
* Added form key and more customizability for web

View file

@ -35,8 +35,8 @@ class ProfileExample extends StatefulWidget {
class _ProfileExampleState extends State<ProfileExample> {
late User _user;
ProfileData profileData =
ExampleProfileData().fromMap({'email': 'example@email.com'});
ProfileData profileData = ExampleProfileData().fromMap(
{'email': 'example@email.com', 'about': 'about', 'remarks': 'remarks'});
@override
void initState() {
@ -53,23 +53,26 @@ class _ProfileExampleState extends State<ProfileExample> {
@override
Widget build(BuildContext context) {
//get width and height
var width = MediaQuery.of(context).size.width;
return Scaffold(
body: Center(
child: Column(
children: [
SizedBox(
height: 400,
width: 800,
child: ProfilePage(
wrapViewOptions:
WrapViewOptions(direction: Axis.vertical, spacing: 16),
showItems: false,
prioritizedItems: const ['remarks', 'about'],
wrapViewOptions: WrapViewOptions(
direction: Axis.horizontal,
spacing: 16,
),
bottomActionText: 'Log out',
itemBuilderOptions: ItemBuilderOptions(
inputDecorationField: {
'first_name': const InputDecoration(
constraints: BoxConstraints(maxHeight: 70, maxWidth: 200),
label: Text('First name'),
),
'last_name': const InputDecoration(
constraints: BoxConstraints(maxHeight: 70, maxWidth: 150),
label: Text('First name'),
),
},
//no label for email
validators: {
'first_name': (String? value) {
if (value == null || value.isEmpty) {
@ -98,12 +101,16 @@ class _ProfileExampleState extends State<ProfileExample> {
pagePadding: EdgeInsets.only(
top: 50,
bottom: 50,
left: MediaQuery.of(context).size.width * 0.1,
right: MediaQuery.of(context).size.width * 0.1,
left: width * 0.1,
right: width * 0.1,
),
),
),
),
const Text('test')
],
),
),
);
}
}
@ -127,7 +134,7 @@ class CustomItemBuilderExample extends ItemBuilder {
options.inputDecorationField?[key] ?? options.inputDecoration;
var formFieldKey = GlobalKey<FormFieldState>();
return SizedBox(
width: 300,
width: 400,
child: TextFormField(
keyboardType: options.keyboardType?[key],
key: formFieldKey,

View file

@ -8,9 +8,13 @@ import 'package:flutter_profile/flutter_profile.dart';
class ExampleProfileData extends ProfileData {
ExampleProfileData({
this.email,
this.about,
this.remarks,
});
String? email;
String? about;
String? remarks;
@override
Map<String, dynamic> mapWidget(
@ -19,6 +23,8 @@ class ExampleProfileData extends ProfileData {
) {
return {
'email': null,
'about': null,
'remarks': null,
};
}
@ -26,14 +32,14 @@ class ExampleProfileData extends ProfileData {
ProfileData fromMap(Map<String, dynamic> data) {
return ExampleProfileData(
email: data['email'],
about: data['about'],
remarks: data['remarks'],
);
}
@override
Map<String, dynamic> toMap() {
return {
'email': email,
};
return {'email': email, 'about': about, 'remarks': remarks};
}
@override

View file

@ -124,7 +124,7 @@ packages:
path: ".."
relative: true
source: path
version: "1.0.1"
version: "1.0.2"
flutter_test:
dependency: "direct dev"
description: flutter

View file

@ -6,81 +6,57 @@ import 'package:flutter/material.dart';
import 'package:flutter_profile/src/widgets/item_builder/item_builder.dart';
import 'package:flutter_profile/src/widgets/item_builder/item_builder_options.dart';
class ItemList extends StatefulWidget {
const ItemList(
class ItemList {
ItemList(
this.items,
this.typeMap,
this.spacing,
this.updateProfile,
this.saveProfile, {
required this.formKey,
this.itemBuilder,
this.itemBuilderOptions,
super.key,
}) {
for (var item in items.entries) {
widgets.addAll({
item.key: itemBuilder == null
? builder.build(
item.key,
item.value,
typeMap[item.key],
(value) {
saveProfile();
},
(value) {
updateProfile(item.key, value);
},
)
: itemBuilder!.build(
item.key,
item.value,
typeMap[item.key],
(value) {
saveProfile();
},
(value) {
updateProfile(item.key, value);
},
)
});
}
}
Map<String, Widget> getItemList() => widgets;
final Map<String, dynamic> items;
final Map<String, dynamic> typeMap;
final double spacing;
final Function(String, String?) updateProfile;
final Function() saveProfile;
final ItemBuilder? itemBuilder;
final ItemBuilderOptions? itemBuilderOptions;
final GlobalKey<FormState> formKey;
@override
State<ItemList> createState() => _ItemListState();
}
class _ItemListState extends State<ItemList> {
var widgets = <Widget>[];
Map<String, Widget> widgets = {};
late ItemBuilder builder = ItemBuilder(
options: widget.itemBuilderOptions ?? ItemBuilderOptions(),
options: itemBuilderOptions ?? ItemBuilderOptions(),
);
@override
void initState() {
super.initState();
for (var item in widget.items.entries) {
widget.itemBuilder == null
? widgets.add(
builder.build(
item.key,
item.value,
widget.typeMap[item.key],
(value) {
widget.saveProfile();
},
(value) {
widget.updateProfile(item.key, value);
},
),
)
: widgets.add(
widget.itemBuilder!.build(
item.key,
item.value,
widget.typeMap[item.key],
(value) {
widget.saveProfile();
},
(value) {
widget.updateProfile(item.key, value);
},
),
);
widgets.add(SizedBox(
height: widget.spacing,
));
}
}
@override
Widget build(BuildContext context) {
return Column(
children: widgets,
);
}
}

View file

@ -35,6 +35,7 @@ class ProfilePage extends StatefulWidget {
this.style = const ProfileStyle(),
this.customAvatar,
this.showAvatar = true,
this.showItems = true,
this.itemBuilder,
this.itemBuilderOptions,
this.bottomActionText,
@ -42,6 +43,8 @@ class ProfilePage extends StatefulWidget {
this.showDefaultItems = true,
this.wrapItemsBuilder,
this.wrapViewOptions,
this.extraWidgets,
this.formKey,
}) : super(key: key);
/// User containing all the user data.
@ -59,6 +62,9 @@ class ProfilePage extends StatefulWidget {
/// Whether to show the users avatar.
final bool showAvatar;
/// Whether you want to show the input fields, sometimes you just want to edit the avatar.
final bool showItems;
/// Sets the text for the [InkWell] at the bottom of the profile page. The [InkWell] is disabled when null.
final String? bottomActionText;
@ -80,6 +86,12 @@ class ProfilePage extends StatefulWidget {
/// Edit the direction and spacing between every item
final WrapViewOptions? wrapViewOptions;
/// The map of extra widgets that might want to be added like empty SizedBoxes for styling.
final Map<String, Widget>? extraWidgets;
/// Use the form key to save on any custom callback
final GlobalKey<FormState>? formKey;
@override
State<ProfilePage> createState() => _ProfilePageState();
}
@ -96,6 +108,7 @@ class _ProfilePageState extends State<ProfilePage> {
style: widget.style,
customAvatar: widget.customAvatar,
showAvatar: widget.showAvatar,
showItems: widget.showItems,
bottomActionText: widget.bottomActionText,
itemBuilder: widget.itemBuilder,
itemBuilderOptions: widget.itemBuilderOptions,
@ -103,15 +116,22 @@ class _ProfilePageState extends State<ProfilePage> {
showDefaultItems: widget.showDefaultItems,
wrapItemsBuilder: widget.wrapItemsBuilder,
wrapViewOptions: widget.wrapViewOptions,
extraWidgets: widget.extraWidgets,
formKey: widget.formKey,
);
}
}
class WrapViewOptions {
WrapViewOptions(
{this.direction, this.spacing, this.runSpacing, this.clipBehavior});
{this.direction,
this.spacing,
this.wrapAlignment,
this.runSpacing,
this.clipBehavior});
Axis? direction;
double? spacing;
double? runSpacing;
Clip? clipBehavior;
WrapAlignment? wrapAlignment;
}

View file

@ -26,7 +26,10 @@ class ProfileWrapper extends StatefulWidget {
this.bottomActionText,
this.prioritizedItems = const [],
this.showDefaultItems = true,
this.showItems = true,
this.wrapItemsBuilder,
this.formKey,
this.extraWidgets,
super.key,
});
@ -41,7 +44,10 @@ class ProfileWrapper extends StatefulWidget {
final Function rebuild;
final ItemBuilderOptions? itemBuilderOptions;
final bool showDefaultItems;
final bool showItems;
final Widget Function(BuildContext context, Widget child)? wrapItemsBuilder;
final Map<String, Widget>? extraWidgets;
final GlobalKey<FormState>? formKey;
/// Map keys of items that should be shown first before the default items and the rest of the items.
final List<String> prioritizedItems;
@ -51,21 +57,25 @@ class ProfileWrapper extends StatefulWidget {
}
class _ProfileWrapperState extends State<ProfileWrapper> {
List<Widget> defaultItems = [];
GlobalKey<FormState> formKey = GlobalKey<FormState>();
late Map<String, Widget> widgets = {};
Map<String, Widget> defaultItems = {};
late GlobalKey<FormState> _formKey;
Map<String, dynamic> formValues = {};
bool _isUploadingImage = false;
late final Widget child;
@override
void initState() {
_formKey = widget.formKey ?? GlobalKey<FormState>();
super.initState();
if (widget.showDefaultItems) {
if (widget.itemBuilder == null) {
ItemBuilder builder = ItemBuilder(
options: widget.itemBuilderOptions ?? ItemBuilderOptions(),
);
defaultItems.add(
builder.build(
defaultItems.addAll({
'first_name': builder.build(
'first_name',
widget.user.firstName,
null,
@ -79,14 +89,7 @@ class _ProfileWrapperState extends State<ProfileWrapper> {
}
},
),
);
defaultItems.add(
SizedBox(
height: widget.style.betweenDefaultItemPadding,
),
);
defaultItems.add(
builder.build(
'last_name': builder.build(
'last_name',
widget.user.lastName,
null,
@ -100,15 +103,10 @@ class _ProfileWrapperState extends State<ProfileWrapper> {
}
},
),
);
defaultItems.add(
SizedBox(
height: widget.style.betweenDefaultItemPadding,
),
);
});
} else {
defaultItems.add(
widget.itemBuilder!.build(
defaultItems.addAll({
'first_name': widget.itemBuilder!.build(
'first_name',
widget.user.firstName,
null,
@ -122,14 +120,7 @@ class _ProfileWrapperState extends State<ProfileWrapper> {
}
},
),
);
defaultItems.add(
SizedBox(
height: widget.style.betweenDefaultItemPadding,
),
);
defaultItems.add(
widget.itemBuilder!.build(
'last_name': widget.itemBuilder!.build(
'last_name',
widget.user.lastName,
null,
@ -143,69 +134,51 @@ class _ProfileWrapperState extends State<ProfileWrapper> {
}
},
),
);
defaultItems.add(
SizedBox(
height: widget.style.betweenDefaultItemPadding,
),
);
});
}
}
widgets.addAll(widget.extraWidgets ?? {});
widgets.addAll(defaultItems);
widgets.addAll(ItemList(
Map.fromEntries(widget.user.profileData!.toMap().entries),
widget.user.profileData!.mapWidget(
() {
widget.rebuild();
},
context,
),
(key, value) {
if (widget.user.toMap()['profile_data'][key] == null) {
widget.service.editProfile(widget.user, key, value);
} else if (widget.user.toMap()['profile_data'][key] != value) {
widget.service.editProfile(widget.user, key, value);
}
},
() {
submitAllChangedFields();
},
itemBuilder: widget.itemBuilder,
itemBuilderOptions: widget.itemBuilderOptions,
formKey: _formKey,
).getItemList());
var items = Wrap(
alignment: widget.wrapViewOptions?.wrapAlignment ?? WrapAlignment.start,
direction: widget.wrapViewOptions?.direction ?? Axis.vertical,
spacing: widget.wrapViewOptions?.spacing ?? 0,
runSpacing: widget.wrapViewOptions?.runSpacing ?? 0,
clipBehavior: widget.wrapViewOptions?.clipBehavior ?? Clip.none,
children: [
ItemList(
Map.fromEntries(widget.user.profileData!.toMap().entries.where(
(element) => widget.prioritizedItems.contains(element.key))),
widget.user.profileData!.mapWidget(
() {
widget.rebuild();
},
context,
),
widget.style.betweenDefaultItemPadding,
(key, value) {
if (widget.user.toMap()['profile_data'][key] == null) {
widget.service.editProfile(widget.user, key, value);
} else if (widget.user.toMap()['profile_data'][key] != value) {
widget.service.editProfile(widget.user, key, value);
}
},
() {
submitAllChangedFields();
},
itemBuilder: widget.itemBuilder,
itemBuilderOptions: widget.itemBuilderOptions,
formKey: formKey,
),
if (widget.showDefaultItems) ...defaultItems,
// remove all the items that have priority from the widget.user.profileData!.toMap()
ItemList(
Map.fromEntries(widget.user.profileData!.toMap().entries.where(
(element) => !widget.prioritizedItems.contains(element.key))),
widget.user.profileData!.mapWidget(
() {
widget.rebuild();
},
context,
),
widget.style.betweenDefaultItemPadding,
(key, value) {
if (widget.user.toMap()['profile_data'][key] == null) {
widget.service.editProfile(widget.user, key, value);
} else if (widget.user.toMap()['profile_data'][key] != value) {
widget.service.editProfile(widget.user, key, value);
}
},
() {
submitAllChangedFields();
},
itemBuilder: widget.itemBuilder,
itemBuilderOptions: widget.itemBuilderOptions,
formKey: formKey,
),
//add all items with prio then those without
for (var key in widget.prioritizedItems)
// get values from widgets with this key
...widgets.entries
.where((element) => element.key == key)
.map((e) => e.value),
...widgets.entries
.where((element) => !widget.prioritizedItems.contains(element.key))
.map((e) => e.value),
],
);
@ -250,8 +223,7 @@ class _ProfileWrapperState extends State<ProfileWrapper> {
height: widget.style.betweenDefaultItemPadding,
),
],
// all the items that have priority above the default items
Form(key: formKey, child: child),
if (widget.showItems) Form(key: _formKey, child: child),
if (widget.bottomActionText != null) ...[
SizedBox(
height: widget.style.betweenDefaultItemPadding,
@ -280,8 +252,8 @@ class _ProfileWrapperState extends State<ProfileWrapper> {
/// This calls onSaved on all the fiels which check if they have a new value
void submitAllChangedFields() {
if (formKey.currentState!.validate()) {
formKey.currentState!.save();
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
}
}
}

View file

@ -1,6 +1,6 @@
name: flutter_profile
description: Flutter profile package
version: 1.0.1
version: 1.0.2
repository: https://github.com/Iconica-Development/flutter_profile
environment: