ElevatedButton and TextButton in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you press this ElevatedButton?

Consider this Flutter code snippet:

ElevatedButton(
  onPressed: () => print('Pressed!'),
  child: Text('Click me'),
)

What will be the visible effect and console output when the button is tapped?

Flutter

ElevatedButton(
  onPressed: () => print('Pressed!'),
  child: Text('Click me'),
)

A The button disappears from the screen after tapping.

B The button shows a ripple effect and prints 'Pressed!' in the console.

C Nothing happens visually or in the console because onPressed is not set.

D The button changes color permanently and prints 'Clicked!' in the console.

💡 Hint

Think about what onPressed does and how ElevatedButton shows feedback.

ElevatedButton shows a ripple effect on tap and runs the onPressed callback, printing 'Pressed!' in the console.

📝 Syntax

intermediate

Which option correctly creates a TextButton with a blue text color?

You want a TextButton with the label 'Submit' and the text color blue. Which code snippet is correct?

A

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(primary: Colors.blue),
  child: Text('Submit'),
)

B

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(textColor: Colors.blue),
  child: Text('Submit'),
)

C

TextButton(
  onPressed: () {},
  child: Text('Submit', style: TextStyle(color: Colors.blue)),
)

D

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(foregroundColor: Colors.blue),
  child: Text('Submit'),
)

💡 Hint

Check the latest Flutter style property for text color in TextButton.styleFrom.

In recent Flutter versions, TextButton.styleFrom uses foregroundColor to set the text color. Using primary or textColor causes errors or is deprecated.

❓ lifecycle

advanced

What happens if you set onPressed to null on an ElevatedButton?

Given this code:

ElevatedButton(
  onPressed: null,
  child: Text('Disabled'),
)

What is the button's behavior and appearance?

Flutter

ElevatedButton(
  onPressed: null,
  child: Text('Disabled'),
)

A The button is disabled: it looks faded and does not respond to taps.

B The button is enabled and prints an error when tapped.

C The button is invisible and takes no space on screen.

D The button is enabled but does nothing when tapped.

💡 Hint

Think about how Flutter treats null callbacks for buttons.

Setting onPressed to null disables the button. It appears faded and does not respond to user taps.

❓ navigation

advanced

Which button triggers navigation to a new screen when tapped?

You want to navigate to a new screen called DetailScreen when a button is tapped. Which code snippet correctly does this?

Flutter

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

A ElevatedButton with onPressed calling Navigator.of(context).pop()

B TextButton with onPressed calling Navigator.pop(context)

C ElevatedButton with onPressed calling Navigator.of(context).push(MaterialPageRoute(builder: (_) => DetailScreen()))

D TextButton with onPressed set to null

💡 Hint

To go to a new screen, you push a route onto the Navigator stack.

Navigator.of(context).push(...) pushes a new screen. pop() removes the current screen. Setting onPressed to null disables the button.

🔧 Debug

expert

Why does this ElevatedButton code cause a runtime error?

Examine this code:

ElevatedButton(
  onPressed: () => print(message),
  child: Text('Press'),
)

Assuming 'message' is not declared anywhere, what error occurs when tapping the button?

Flutter

ElevatedButton(
  onPressed: () => print(message),
  child: Text('Press'),
)

A Runtime error: 'message' is not defined (NameError or NoSuchMethodError).

B Compile-time error: missing semicolon after print statement.

C No error; prints 'null' in the console.

D The button does not render because of a syntax error.

💡 Hint

Check if all variables used inside onPressed are declared.

Using an undeclared variable 'message' causes a runtime error when the button is pressed because the callback tries to access an undefined identifier.