I have two constructors in new_activity_config.dart.
NewActivityConfig(this.activityType, {Key key, this.activity}) : super(key: key);
NewActivityConfig.fromNewActivityConfig(this.activity, {Key key, this.activityType}) : super(key: key);
One takes in an activityType: this.name, this.image
The other takes in an activity: this.name, this.image, this.status, this.scheduledStart, this.mapped, this.description, this.statistics, this.completionDate, this.duration
When navigating from the Pick Activity screen, it will call the NewActivityConfig() constructor - because it is showing an empty Config page for the user to input values
When selecting an already created activity, it will call the NewActivityConfig.fromNewActivityConfig(), passing in variables that had been previously input to fill the fields.
In my TextField hintText, I would like to display the user's input description if the description variable exists. However, if the first constructor is called (not passing in any user's previous values) and getDescription() cannot be called because it hasn't been passed in - and receive the error: The method getDescription() was called on null.
How can I check if this exists without running into null errors?
final description = TextField(
decoration: InputDecoration(
hintText:(widget.activity.getDescription() != null ? widget.activity.getDescription() : 'Enter an activity description'),
)
);
You should check if activity itself is null or not before you can access its attributes or behaviors.
Try this:
final description = TextField(
decoration: InputDecoration(
hintText:(widget.activity != null ? widget.activity.getDescription() : 'Enter an activity description'),
)
);
Related
I'm learning flutter by making an app following some youtube tutorials. I'm trying to make a listview of search results. I'm able to query and get data from node backend but there's this error while mapping the json to model.
The data I'm getting from api is like this:
{id: <uuid>,
userEmail: <email_string>,
profile: [{profileName: <profile_name_string>,
profileImage: <image_url_string>,
profileBio: <profile_bio_string>}]
}
With the new model class I made following an answer here I'm able to get profile model separately but when i try to get account model with all profiles I'm getting the error:type 'List<dynamic>' is not a subtype of type 'List<ProfileModel>?'. The model class is:
class AccountModel {
String userId;
String userEmail;
String? userPassword;
final List<ProfileModel>? profile;
AccountModel({
required this.userId,
required this.userEmail,
this.userPassword,
this.profile,
});
factory AccountModel.fromJson({required Map<String, dynamic> map}) {
return AccountModel(
userId: map['id'],
userEmail: map['userEmail'],
userPassword: map['userPassword'],
profile: map['profile']
.map((profileJson) => ProfileModel.fromJson(profileJson))
.toList(),
);
}
}
class ProfileModel {
String profileName;
String profileImage;
String? profileBio;
ProfileModel({
required this.profileName,
required this.profileImage,
this.profileBio,
});
factory ProfileModel.fromJson(profileJson, {Map<String, dynamic>? map}) {
if (map != null) {
return ProfileModel(
profileName: map['profileName'],
profileImage: map['profileImage'] ?? "default",
profileBio: map['profileBio'],
);
} else {
return ProfileModel(
profileName: profileJson['profileName'],
profileImage: profileJson['profileImage'] ?? "default",
profileBio: profileJson['profileBio'],
);
}
}
}
How to make the list work?
You can use List.from() in this case.
profile: map['profile'] != null
? List<ProfileModel>.from(
map['profile']?.map((p) => ProfileModel.fromJson(p)))
: null)
We are using fromMap here on ProfileModel, you can simplify just separation while both are same on ProfileModel.
More about List and List.from.
When you declared the list here as
final List<ProfileModel>? profile;
It expects the list to have only ProfileModels as ListItem even though with "?". The way to solve it is either declared a list without generic ProfileModel :
final List? profile;
Or to typecast the item you're pushing as ProfileModel.
2. profile: map['profile'] .map((profileJson) => ProfileModel.fromJson(profileJson) as ProfileModel) .toList(),
I don't know the output structures and such so try to experiment with typecasting if the above code doesn't work. May be typecasting after toList() method as List can work too.
The situation:
I'm very new to Flutter and mobile development, thus I don't know much about Dart; And I've read some solutions from people with similar problems but didn't manage to work these solutions to my own thing.
The problem:
I have a to-do app that has 2 Lists of Objects, and I want to store those Lists for whenever the user re-open the app.
I know its simple stuff but I feel like I'm storming towards this problem due to the lack of experience... And so I decided to come asking for some light.
What I've tried:
I have come across different solutions for this problem and all of them seemed way too complex to this case (compared to what I'm used to do when saving lists to the archive), including: encoding the list to a map and converting to a string before using SharedPreferences, using SQlite database (every tutorial I've come across made me feel like I'd be using a war tank to kill an ant, I'd say the same about firebase).
Structure of the problem:
ToDo screen with a ListView.builder calling 2 arrays: ongoing tasks and done tasks each of which I want to write to the phone whenever the user makes a change. IDK if I should only try to save those arrays from within the class from which they belong by calling some packages methods, or if I should try to store the entire application if such thing is possible.
Conclusion:
Is there a way to solve this in a simple way or I should use something robust like firebase just for that? even though I'm not used to work with firestore, and so I'm in the dark not knowing how to apply such thing to save data.
How my lists are structured:
List<Task> _tasks = [
Task(
name: "do something",
description: "try to do it fast!!!",
),
];
List<Task> _doneTasks = [
Task(
name: "task marked as done",
description: "something",
),
];
2022 Update with null safety
My original code example was more verbose than necessary. Using Darts factory constructor this can be done with way less code. This is also updated for null safety and using Hive instead of GetStorage.
First, add a toMap method which converts the object to a Map, then a fromMap constructor which returns a Task object from a Map that was saved in storage.
class Task {
final String name;
final String description;
Task({required this.name, required this.description});
Map<String, dynamic> toMap() {
return {'name': this.name, 'description': this.description};
}
factory Task.fromMap(Map map) {
return Task(
name: map['name'],
description: map['description'],
);
}
String toString() {
return 'name: $name description: $description';
}
}
Updated Demo Page
class StorageDemo extends StatefulWidget {
#override
_StorageDemoState createState() => _StorageDemoState();
}
class _StorageDemoState extends State<StorageDemo> {
List<Task> _tasks = [];
final box = Hive.box('taskBox');
// separate list for storing maps/ restoreTask function
//populates _tasks from this list on initState
List storageList = [];
void addAndStoreTask(Task task) {
_tasks.add(task);
storageList.add(task.toMap()); // adding temp map to storageList
box.put('tasks', storageList); // adding list of maps to storage
}
void restoreTasks() {
storageList = box.get('tasks') ?? []; // initializing list from storage
// looping through the storage list to parse out Task objects from maps
for (final map in storageList) {
_tasks
.add(Task.fromMap(map)); // adding Tasks back to your normal Task list
}
}
// looping through your list to see whats inside
void printTasks() {
for (final task in _tasks) {
log(task.toString());
}
}
void clearTasks() {
_tasks.clear();
storageList.clear();
box.clear();
}
#override
void initState() {
super.initState();
restoreTasks(); // restore list from storing in initState
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Container(),
),
TextButton(
onPressed: () {
final task =
Task(description: 'test description', name: 'test name');
addAndStoreTask(task);
},
child: Text('Add Task'),
),
TextButton(
onPressed: () {
printTasks();
},
child: Text('Print Storage'),
),
TextButton(
onPressed: () {
clearTasks();
},
child: Text('Clear Tasks'),
),
],
),
);
}
}
Updated Storage Init
void main() async {
await Hive.initFlutter();
await Hive.openBox('taskBox');
runApp(MyApp());
}
Original Answer
So generally speaking, once you want to store anything other than a primitive type ie. String int etc... things get a bit more complex because they have to converted to something that's readable by any storage solution.
So despite Tasks being a basic object with a couple strings, SharedPreferences or anything else doesn't know what a Task is or what to do with it.
I suggest in general reading about json serialization, as you'll need to know about it either way. This is a good place to start and here is another good article about it.
All that being said, it can also be done without json by converting your task to a Map (which is what json serialization does anyway) and storing it to a list of maps. I'll show you an example of doing this manually without json. But again, its in your best interest to buckle down and spend some time learning it.
This example will use Get Storage, which is like SharedPreferences but easier because you don't need separate methods for different data types, just read and write.
I don't know how you're adding tasks in your app, but this is just a basic example of storing a list of Task objects. Any solution that doesn't involve online storage requires storing locally, and retrieving from storage on app start.
So let's say here is your Task object.
class Task {
final String name;
final String description;
Task({this.name, this.description});
}
Put this in your main method before running your app
await GetStorage.init();
You'll need to add async to your main, so if you're not familiar with how that works it looks like this.
void main() async {
await GetStorage.init();
runApp(MyApp());
}
Normally I would NEVER do all this logic inside a stateful widget, but instead implement a state management solution and do it in a class outside of the UI, but that's a whole different discussion. I also recommend checking out GetX, Riverpod, or Provider reading about them and seeing which one strikes you as the easiest to learn. GetX gets my vote for simplicity and functionality.
But since you're just starting out I'll omit that part of it and just put all these functions in the UI page for now.
Also instead of only storing when app closes, which can also be done, its easier to just store anytime there is a change to the list.
Here's a page with some buttons to add, clear, and print storage so you can see exactly whats in your list after app restart.
If you understand whats going on here you should be able to do this in your app, or study up on json and do it that way. Either way, you need to wrap your head around Maps and how local storage works with any of the available solutions.
class StorageDemo extends StatefulWidget {
#override
_StorageDemoState createState() => _StorageDemoState();
}
class _StorageDemoState extends State<StorageDemo> {
List<Task> _tasks = [];
final box = GetStorage(); // list of maps gets stored here
// separate list for storing maps/ restoreTask function
//populates _tasks from this list on initState
List storageList = [];
void addAndStoreTask(Task task) {
_tasks.add(task);
final storageMap = {}; // temporary map that gets added to storage
final index = _tasks.length; // for unique map keys
final nameKey = 'name$index';
final descriptionKey = 'description$index';
// adding task properties to temporary map
storageMap[nameKey] = task.name;
storageMap[descriptionKey] = task.description;
storageList.add(storageMap); // adding temp map to storageList
box.write('tasks', storageList); // adding list of maps to storage
}
void restoreTasks() {
storageList = box.read('tasks'); // initializing list from storage
String nameKey, descriptionKey;
// looping through the storage list to parse out Task objects from maps
for (int i = 0; i < storageList.length; i++) {
final map = storageList[i];
// index for retreival keys accounting for index starting at 0
final index = i + 1;
nameKey = 'name$index';
descriptionKey = 'description$index';
// recreating Task objects from storage
final task = Task(name: map[nameKey], description: map[descriptionKey]);
_tasks.add(task); // adding Tasks back to your normal Task list
}
}
// looping through you list to see whats inside
void printTasks() {
for (int i = 0; i < _tasks.length; i++) {
debugPrint(
'Task ${i + 1} name ${_tasks[i].name} description: ${_tasks[i].description}');
}
}
void clearTasks() {
_tasks.clear();
storageList.clear();
box.erase();
}
#override
void initState() {
super.initState();
restoreTasks(); // restore list from storing in initState
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Container(),
),
TextButton(
onPressed: () {
final task =
Task(description: 'test description', name: 'test name');
addAndStoreTask(task);
},
child: Text('Add Task'),
),
TextButton(
onPressed: () {
printTasks();
},
child: Text('Print Storage'),
),
TextButton(
onPressed: () {
clearTasks();
},
child: Text('Clear Tasks'),
),
],
),
);
}
}
Welcome to Flutter and Dart! Things might seem daunting in the start, but rewarding later on. Think of it logically, how is data to be stored outside the state of the app?
It has to be fetched from some data storage, this can either from the devices storage, or from a remote database.
For the device storage, you have the two options you mentioned, but SQlite would be an overkill for this task, however sharedPreferences isn't daunting as it seems, and very easy to use once you get the hang of it.
It's basically storing data on the device in the form of a string, along with a uniquekey to retrieve that data later on. This key is also a string.
For your app, you only need two keys: 'tasks' & 'completedTasks'.
Where are you facing trouble? encoding the data as a string? Or converting it to a map first then encoding it?
You're other option would be a remote database, that you send data over the internet, Firebase is only one of the possible solutions, besides building your own server, API and database, which is definitely an overkill for this situation as well.
However, since you are still getting the hang of things, this would be a good project to start with shared preferences, then in phase two, look into firebase, so your ToDo list items can be synced across multiple devices. This also comes with the added benefit you will gain from learning firebase, I strongly advise you look into it.
Every new language is daunting in the start, but expecting things to be 1+1=2 form the start will not get you where you want to be, and I'm certain you did not start learning Flutter to only make todo apps, but what you learn from this app will prepare you for what the future holds.
My advise, get comfortable with being uncomfortable, and remember why you started this journey, and whatever help you need, the community will never disappoint, just meet us or meet yourself half way.
I'm new to flutter and have created a simple app to display some custom List Tiles. In each tile, it's possible to increase or decrease the count by the + and - buttons.
But I want to get these data into a map, on the click of the button "Order". For example, my map would be like {'shoes': 1, 'books': 2, 'water': 3} etc.
I've tried Provider, StreamBuilder, BLoC etc. But since I'm a beginner, I couldn't get a real use of any of those.
Could any of you please tell me how to get this data into a map.
Thanks for reading.
You can define a Map like this:
List<String> products = ['shoes', 'books', 'water'];
Map<String,int> map = Map.fromIterables(products , 0);
When user press - or + buttons in each tile, update your equvalent <key, value> in your map.
For example in onTap event of shoes's + button you have
map.update('shoes', (v)=> v+1);
Then you can use updated map in onTap of Order button.
For more info about Map in dart visit this link.
With "bloc", you need to build your events, states in the Bloc would be something like that:
The event will be where the Bloc is triggered.
part of 'something_bloc.dart';
#immutable
abstract class SomethingEvent{}
class ListOfSomething extends SomethingEvent{}
class SomethingElse extends SomethingEvent{
final String input;
SomethingElse({this.input});
List<Object> get props => [input];
}
The state is where the result of what was triggered in the event will be manifested, whether successful or unsuccessful:
part of 'Something_bloc.dart';
#immutable
abstract class SomethingState{}
class SomethingInitial extends SomethingState{}
class SomethingLoading extends SomethingState{}
class SomethingSuccess extends SomethingState{
final String success;
SomethingSuccess({this.success});
}
The "bloc" is where to manage these events and states:
part 'something_event.dart';
part 'something_state.dart';
class SomethingBloc extends Bloc<SomethingEvent,SomethingState>{
final ServiceFacade service;
SomethingBloc({this.service});
#override
SomethingState get initialState => SomethingInitial();
#override
Stream<SomethingState> mapEventToState(SomethingEvent event) async* {
if(event is SomethingEvent){
final failureOrSuccess = await service.call(event.cardId);
yield failureOrSuccess.fold(
(failure) => (failure is GeneralFailure)
? SomethingErrorState(error: failure.message)
: null,
(list) => SomethingState(success: list)
);
}
}
}
The screen will look something like this, you can trigger the event in an OnPressed, or initialize it in the initState():
BlocConsumer<SomethingBloc, SomethingState>(
listener: (context, state) {
if (state is SomethingLoadingState) {
} else if (state is SomethingErrorState) {
} else if (state is SomethingSuccess) {
}
},
builder: (context, state) {
if (state is SomethingSuccess) {
return Padding(
padding: paddingHorizontal,
child: Column(
children: <Widget>[
for (var item in state.list)
Container(
child: Text('${item}')
)
]
),
);
} else {
return Container();
}
},
),
I hope I've helped in general terms.
So I have created a simple notification class as follows:
class NamedNotification{
String title;
DateTime scheduledDate;
int id;
String description;
NamedNotification(this.scheduledDate, this.id, this.title, this.description);
}
I use this class to keep track of my notifications and add them to a list whenever a new notification is created. I do this like this:
List<NamedNotification> notifications;
onPressed: () {
setState(() {
NotificationPlugin newNotification = NotificationPlugin();
newNotification.showAtDayAndTimeNotification(_dateTime, id, title, description);
NamedNotification listNotification = NamedNotification(_dateTime, id, title, description);
print(listNotification);
notifications.add(listNotification);
id++;
});
print(id);
Navigator.pop(context);
},
However, whenever I try to add my namedNotification to the list, I get this error:
The method 'add' was called on null.
Receiver: null
Tried calling: add(Instance of 'NamedNotification')
I was wondering what the best way was to fix this.
You forgot to init notifications
Please init notifications like this
List<NamedNotification> notifications = [];
I have a model that uses reactive forms and keeps giving me the error of regex.test is not a function.
The model is the following:
import { date, email, maxDate, maxLength, minDate, minLength, pattern, prop, required } from "#rxweb/reactive-form-validators";
export class UserInfo {
#required()
public firstName: string;
#required()
public lastName: string;
#pattern({expression: {pattern: /(^\+?[\d\W-/]{4,16}$)/ } })
#minLength({value: 4})
public phoneNumber: string;
}
And the error
ERROR TypeError: regex.test is not a function
at Function.isValid (reactive-form-validators.js:719)
at reactive-form-validators.js:3418
at forms.js:1155
at Array.map (<anonymous>)
at _executeValidators (forms.js:1151)
at RxFormControl.validator (forms.js:1096)
at RxFormControl._runValidator (forms.js:3438)
at RxFormControl.updateValueAndValidity (forms.js:3399)
at new FormControl (forms.js:3843)
at new RxFormControl (reactive-form-validators.js:2017)
happens when on the component I'm doing on the ngOnInit():
this.baseForm = this.formBuilder.formGroup(this.user) as RxFormGroup;
What is even stranger is that it only happens when I actually have data on the phoneNumber. If my phoneNumber is empty it works perfectly.
I even tested the following:
this.user.phoneNumber = "";
this.baseForm = this.formBuilder.formGroup(this.user) as RxFormGroup;
And this works. What is even stranger to me is that I did a small example on stackblitz and there it also works without any problem even with data.
It is working in my machine, please check the below image :
If you have sample not working example of pattern then please share the same
I've find out a solution and it was the following:
this.baseForm = this.formBuilder.formGroup(this.user) as RxFormGroup;
(this.baseForm .controls.phoneNumber as FormControl)
.addValidators(
[TextValidator.regexMatchValidator(new RegExp(/(^\+?[\d\W-/]{4,16}$)/), "error message")]);
basically add a validator after the form initialization