Creating your own flutter widgets best practice
up vote
3
down vote
favorite
I am trying to understand the best style for creating your own widgets in flutter, and here are 2 very simplified examples
With the code at the bottom, I can use 1)
new SomeWidget("Some title", someFunction);
or 2)
SomeWidget.widget("Some title", someFunction);
or 3) Some other way I'm not aware of
Method 1) feels more correct (if I've not made some mistakes), however method 2) actually has less code (as I don't need to declare the object variables earlier, assuming I don't need access to context), but I'm wary of static methods.
Is 1) preferred, and why ?
class SomeWidget extends StatelesssWidget {
String title;
Function callback;
SomeWidget( this.title, this.callback );
//method 1
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
//method 2
static Widget widget(String title, Function callback) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
}
dart 
flutter edited Nov 10 at 0:02
Rémi Rousselet
23k24079
asked Nov 9 at 19:45
Ian
11.3k23453
add a comment |
up vote
3
down vote
favorite
I am trying to understand the best style for creating your own widgets in flutter, and here are 2 very simplified examples
With the code at the bottom, I can use 1)
new SomeWidget("Some title", someFunction);
or 2)
SomeWidget.widget("Some title", someFunction);
or 3) Some other way I'm not aware of
Method 1) feels more correct (if I've not made some mistakes), however method 2) actually has less code (as I don't need to declare the object variables earlier, assuming I don't need access to context), but I'm wary of static methods.
Is 1) preferred, and why ?
class SomeWidget extends StatelesssWidget {
String title;
Function callback;
SomeWidget( this.title, this.callback );
//method 1
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
//method 2
static Widget widget(String title, Function callback) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
}
edited Nov 10 at 0:02
Rémi Rousselet
23k24079
asked Nov 9 at 19:45
Ian
11.3k23453
1
Your second version doesn't even need or use SomeWidget. It could be a top level function, making SomeWidget redundant.
– Richard Heap
Nov 9 at 22:35
1
Ignore the pointless edit. After some thoughts it should have been asked in another question, which I made here: stackoverflow.com/questions/53234825/…. This question should answer yours too, go take a look ! :)
– Rémi Rousselet
Nov 10 at 0:05
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I am trying to understand the best style for creating your own widgets in flutter, and here are 2 very simplified examples
With the code at the bottom, I can use 1)
new SomeWidget("Some title", someFunction);
or 2)
SomeWidget.widget("Some title", someFunction);
or 3) Some other way I'm not aware of
Method 1) feels more correct (if I've not made some mistakes), however method 2) actually has less code (as I don't need to declare the object variables earlier, assuming I don't need access to context), but I'm wary of static methods.
Is 1) preferred, and why ?
class SomeWidget extends StatelesssWidget {
String title;
Function callback;
SomeWidget( this.title, this.callback );
//method 1
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
//method 2
static Widget widget(String title, Function callback) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
}
edited Nov 10 at 0:02
Rémi Rousselet
23k24079
asked Nov 9 at 19:45
Ian
11.3k23453
I am trying to understand the best style for creating your own widgets in flutter, and here are 2 very simplified examples
With the code at the bottom, I can use 1)
new SomeWidget("Some title", someFunction);
or 2)
SomeWidget.widget("Some title", someFunction);
or 3) Some other way I'm not aware of
Method 1) feels more correct (if I've not made some mistakes), however method 2) actually has less code (as I don't need to declare the object variables earlier, assuming I don't need access to context), but I'm wary of static methods.
Is 1) preferred, and why ?
class SomeWidget extends StatelesssWidget {
String title;
Function callback;
SomeWidget( this.title, this.callback );
//method 1
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
//method 2
static Widget widget(String title, Function callback) {
return GestureDetector(
onTap: callback,
child: ....some widget
)
}
}
edited Nov 10 at 0:02
Rémi Rousselet
23k24079
asked Nov 9 at 19:45
Ian
11.3k23453
edited Nov 10 at 0:02
Rémi Rousselet
23k24079
asked Nov 9 at 19:45
Ian
11.3k23453
edited Nov 10 at 0:02
Rémi Rousselet
23k24079
edited Nov 10 at 0:02
Rémi Rousselet
23k24079
edited Nov 10 at 0:02
Rémi Rousselet
23k24079
23k24079
asked Nov 9 at 19:45
Ian
11.3k23453
asked Nov 9 at 19:45
Ian
11.3k23453
asked Nov 9 at 19:45
Ian
11.3k23453
11.3k23453
1
Your second version doesn't even need or use SomeWidget. It could be a top level function, making SomeWidget redundant.
– Richard Heap
Nov 9 at 22:35
1
Ignore the pointless edit. After some thoughts it should have been asked in another question, which I made here: stackoverflow.com/questions/53234825/…. This question should answer yours too, go take a look ! :)
– Rémi Rousselet
Nov 10 at 0:05
add a comment |
1
Your second version doesn't even need or use SomeWidget. It could be a top level function, making SomeWidget redundant.
– Richard Heap
Nov 9 at 22:35
1
Ignore the pointless edit. After some thoughts it should have been asked in another question, which I made here: stackoverflow.com/questions/53234825/…. This question should answer yours too, go take a look ! :)
– Rémi Rousselet
Nov 10 at 0:05
1
1
Your second version doesn't even need or use SomeWidget. It could be a top level function, making SomeWidget redundant.
– Richard Heap
Nov 9 at 22:35
Your second version doesn't even need or use SomeWidget. It could be a top level function, making SomeWidget redundant.
– Richard Heap
Nov 9 at 22:35
1
1
Ignore the pointless edit. After some thoughts it should have been asked in another question, which I made here: stackoverflow.com/questions/53234825/…. This question should answer yours too, go take a look ! :)
– Rémi Rousselet
Nov 10 at 0:05
Ignore the pointless edit. After some thoughts it should have been asked in another question, which I made here: stackoverflow.com/questions/53234825/…. This question should answer yours too, go take a look ! :)
– Rémi Rousselet
Nov 10 at 0:05
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
I don't know actual guildelines, but I would prefer something like
class SomeWidget extends StatelesssWidget {
SomeWidget({this.title, this.callback});
final String title;
final VoidCallback callback;
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
);
}
}
or you can do like this
SomeWidget({this.title = '', @required this.callback})
for default values or if some value is reqired
P.S. All this is not guideline - it's just an IMHO )
edited Nov 10 at 9:08
Niklas
4047
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
2
Andrey is right with this one. Anyway, If you have aStatelessWidgetall fields of the Widget should be immutable e.g. final. If the State of the Widget should be able to change, use aStatefulWidget.
– Niklas
Nov 10 at 8:14
1
You're right, I just missed this moment. Actually, fields inStatefulWidgethave to be immutable too )
– Andrey Turkovsky
Nov 10 at 9:15
Oh, I meant fields in theStateof theStatefulWidget.
– Niklas
Nov 10 at 9:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232345%2fcreating-your-own-flutter-widgets-best-practice%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
I don't know actual guildelines, but I would prefer something like
class SomeWidget extends StatelesssWidget {
SomeWidget({this.title, this.callback});
final String title;
final VoidCallback callback;
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
);
}
}
or you can do like this
SomeWidget({this.title = '', @required this.callback})
for default values or if some value is reqired
P.S. All this is not guideline - it's just an IMHO )
edited Nov 10 at 9:08
Niklas
4047
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
2
Andrey is right with this one. Anyway, If you have aStatelessWidgetall fields of the Widget should be immutable e.g. final. If the State of the Widget should be able to change, use aStatefulWidget.
– Niklas
Nov 10 at 8:14
1
You're right, I just missed this moment. Actually, fields inStatefulWidgethave to be immutable too )
– Andrey Turkovsky
Nov 10 at 9:15
Oh, I meant fields in theStateof theStatefulWidget.
– Niklas
Nov 10 at 9:17
add a comment |
up vote
2
down vote
accepted
I don't know actual guildelines, but I would prefer something like
class SomeWidget extends StatelesssWidget {
SomeWidget({this.title, this.callback});
final String title;
final VoidCallback callback;
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
);
}
}
or you can do like this
SomeWidget({this.title = '', @required this.callback})
for default values or if some value is reqired
P.S. All this is not guideline - it's just an IMHO )
edited Nov 10 at 9:08
Niklas
4047
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
2
Andrey is right with this one. Anyway, If you have aStatelessWidgetall fields of the Widget should be immutable e.g. final. If the State of the Widget should be able to change, use aStatefulWidget.
– Niklas
Nov 10 at 8:14
1
You're right, I just missed this moment. Actually, fields inStatefulWidgethave to be immutable too )
– Andrey Turkovsky
Nov 10 at 9:15
Oh, I meant fields in theStateof theStatefulWidget.
– Niklas
Nov 10 at 9:17
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
I don't know actual guildelines, but I would prefer something like
class SomeWidget extends StatelesssWidget {
SomeWidget({this.title, this.callback});
final String title;
final VoidCallback callback;
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
);
}
}
or you can do like this
SomeWidget({this.title = '', @required this.callback})
for default values or if some value is reqired
P.S. All this is not guideline - it's just an IMHO )
edited Nov 10 at 9:08
Niklas
4047
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
I don't know actual guildelines, but I would prefer something like
class SomeWidget extends StatelesssWidget {
SomeWidget({this.title, this.callback});
final String title;
final VoidCallback callback;
Widget build(context) {
return GestureDetector(
onTap: callback,
child: ....some widget
);
}
}
or you can do like this
SomeWidget({this.title = '', @required this.callback})
for default values or if some value is reqired
P.S. All this is not guideline - it's just an IMHO )
edited Nov 10 at 9:08
Niklas
4047
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
edited Nov 10 at 9:08
Niklas
4047
edited Nov 10 at 9:08
Niklas
4047
edited Nov 10 at 9:08
Niklas
4047
4047
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
answered Nov 9 at 19:52
Andrey Turkovsky
1,8801619
1,8801619
2
Andrey is right with this one. Anyway, If you have aStatelessWidgetall fields of the Widget should be immutable e.g. final. If the State of the Widget should be able to change, use aStatefulWidget.
– Niklas
Nov 10 at 8:14
1
You're right, I just missed this moment. Actually, fields inStatefulWidgethave to be immutable too )
– Andrey Turkovsky
Nov 10 at 9:15
Oh, I meant fields in theStateof theStatefulWidget.
– Niklas
Nov 10 at 9:17
add a comment |
2
Andrey is right with this one. Anyway, If you have aStatelessWidgetall fields of the Widget should be immutable e.g. final. If the State of the Widget should be able to change, use aStatefulWidget.
– Niklas
Nov 10 at 8:14
1
You're right, I just missed this moment. Actually, fields inStatefulWidgethave to be immutable too )
– Andrey Turkovsky
Nov 10 at 9:15
Oh, I meant fields in theStateof theStatefulWidget.
– Niklas
Nov 10 at 9:17
2
2
Andrey is right with this one. Anyway, If you have a
StatelessWidget all fields of the Widget should be immutable e.g. final. If the State of the Widget should be able to change, use a StatefulWidget.– Niklas
Nov 10 at 8:14
Andrey is right with this one. Anyway, If you have a
StatelessWidget all fields of the Widget should be immutable e.g. final. If the State of the Widget should be able to change, use a StatefulWidget.– Niklas
Nov 10 at 8:14
1
1
You're right, I just missed this moment. Actually, fields in
StatefulWidget have to be immutable too )– Andrey Turkovsky
Nov 10 at 9:15
You're right, I just missed this moment. Actually, fields in
StatefulWidget have to be immutable too )– Andrey Turkovsky
Nov 10 at 9:15
Oh, I meant fields in the
State of the StatefulWidget.– Niklas
Nov 10 at 9:17
Oh, I meant fields in the
State of the StatefulWidget.– Niklas
Nov 10 at 9:17
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232345%2fcreating-your-own-flutter-widgets-best-practice%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Your second version doesn't even need or use SomeWidget. It could be a top level function, making SomeWidget redundant.
– Richard Heap
Nov 9 at 22:35
1
Ignore the pointless edit. After some thoughts it should have been asked in another question, which I made here: stackoverflow.com/questions/53234825/…. This question should answer yours too, go take a look ! :)
– Rémi Rousselet
Nov 10 at 0:05