Functions and arrow syntax in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the output of a simple arrow function

What is the output of this Flutter Dart code when the button is pressed?

Flutter

void main() {
  final greet = () => 'Hello Flutter!';
  print(greet());
}

A Hello

B null

C Hello Flutter!

D Error: Missing return statement

💡 Hint

Arrow functions return the expression after the arrow automatically.

The arrow syntax (=>) returns the expression directly. So greet() returns 'Hello Flutter!'.

❓ ui_behavior

intermediate

Arrow function in Flutter onPressed callback

Which option correctly uses an arrow function to update the text when a button is pressed in Flutter?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String text = 'Before';

  void updateText() => setState(() => text = 'After');

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: updateText,
      child: Text(text),
    );
  }
}

A void updateText() { text = 'After'; }

B void updateText() { setState(() { text = 'After'; }); }

C void updateText() => text = 'After';

D void updateText() => setState(() => text = 'After');

💡 Hint

setState must be called to update UI; arrow syntax can be nested.

Option D uses arrow syntax for updateText and inside setState to update text and refresh UI correctly.

❓ lifecycle

advanced

Arrow function in Flutter widget lifecycle method

What happens if you replace this initState method with arrow syntax in a StatefulWidget?

Flutter

class _MyState extends State<MyWidget> {
  @override
  void initState() {
    super.initState();
    print('Init');
  }
}

A Prints nothing because arrow functions do not run in lifecycle

B Syntax error because initState cannot be an arrow function with multiple statements

C Prints 'Init' correctly when widget initializes

D Does not call super.initState(), causing runtime error

💡 Hint

Arrow functions can only have one expression, but initState has two statements.

initState has two statements: super.initState() and print(). Arrow syntax only supports one expression, so this causes a syntax error.

❓ navigation

advanced

Arrow function in Navigator callback

Which option correctly uses arrow syntax to navigate to a new screen on button press?

Flutter

ElevatedButton(
  onPressed: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()));
  },
  child: Text('Go'),
)

A onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen())),

B onPressed: () => { Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen())); },

C onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen())); },

D onPressed: Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen())),

💡 Hint

Arrow functions can omit braces if only one expression is executed.

Option A uses arrow syntax correctly for a single expression. Option A uses braces with arrow syntax which is invalid. Option A calls Navigator.push immediately, not on button press.

🔧 Debug

expert

Debugging arrow function with async in Flutter

What error occurs with this arrow function in Flutter and why?

Flutter

Future<void> fetchData() async {
  await Future.delayed(Duration(seconds: 1));
  print('Data loaded');
};

A Syntax error: Arrow function body cannot be a block with multiple statements

B No error; prints 'Data loaded' after 1 second

C Runtime error: await used outside async function

D Prints immediately without delay

💡 Hint

Arrow functions can only have one expression, not multiple statements in braces.

The arrow function body cannot be a block with multiple statements inside braces. This causes a syntax error.