2

I have met a problem which is "Exception has occurred. FlutterError (setState() or markNeedsBuild() called during build.".

I solve the problem with the following code:

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      //onTap: press(),  error
      onTap: () => press()

But I don't know why.

So, I want to know What is the difference between function() and ()=> function() in flutter?

4
  • 4
    With onTap: press() you are calling the press function and passing the return value to onTap. With onTap: () => press() you are creating an anonymous function, and passing the function to onTap. What you should most likely be doing is neither. Instead do onTap: press without the parenthesis (). This will pass the press function rather than the result of calling the press function. Commented Feb 16, 2022 at 16:54
  • @mmcdon20 that is a beautiful answer. Why did you add it as a comment instead of an answer? Commented Feb 16, 2022 at 17:05
  • @mmcdon20 Thanks for your comment. But There is a new problem (The argument type 'Function' can't be assigned to the parameter type 'void Function()?'.dartargument_type_not_assignable) when I change press() to press. Commented Feb 17, 2022 at 11:42
  • 1
    @TAN change the type of press from Function to void Function(). See also dart.dev/guides/language/effective-dart/… Commented Feb 17, 2022 at 15:39

3 Answers 3

3

So let's have a look at how these actually work!

Dart has a formal specification documented and you can have a look at it by clicking here. A function in Dart has to have a few qualities which are:

  1. return type (optional but recommended)
  2. name (required)
  3. parenthesis right after the name (required)
  4. a list of parameters (optional)
  5. function body inside curly brackets or a single statement of function body in front of =>.

Your question is about point #5. The difference between {} and => function body is that the curly brackets allow you to write multiple statements separated with a semi-colon ; while the second approach shall just be one statement, ended with a single semi-colon ;.

Let's have a look at a few examples. Here is a simple log() function that allows you to log any Object instance to the debug console:

import 'dart:developer' as devtools show log;

extension Log on Object {
  void log() => devtools.log(toString());
}

Note how the function has a return type of void (point 1), a name called log (point 2), no parameters denoted by () (point 3 & 4) and a function body which is a single statement with => (point 5).

You could write the same function with curly brackets (point 5) instead of => like so:

extension Log on Object {
  void log() {
    devtools.log(toString());
  }
}

The result of which will be exactly the same as the previous implementation.

Now let's look at another example where your function has a return value and some parameters.

String fullName(String firstName, String lastName) {
  return "$firstName $lastName";
}

Since this function has simply one statement, the return statement and just one semi-colon, it could be re-written as an arrow function like so;

String fullName(
  String firstName,
  String lastName,
) =>
    "$firstName $lastName";

So I would say the unwritten rules are:

  1. Use arrow-functions if the body of your function is simple to understand. You could even have multiple lines of code inside an arrow-function's body as long as it's understandable, it's OK to use.

  2. Use function bodies with curly-brackets if your function's body is rather complicated, consisting of multiple perhaps un-related pieces of code.

Sign up to request clarification or add additional context in comments.

Comments

2

there is no difference between ()=> function and function.

but there is a difference between how you need to call your function.

the first way is this way:

onTap: Press,

and the other way:

onTap: () => Press();

well you can get the {} from the function if you call they so: function();

and you can get () {} from the function if you only call the name: function

Comments

0
  onTap: () => press() 
   onTap: (){press();} 

are the same but (lambda)=> is used for one line code just short syntex

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.