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.

Practice

1. Which Flutter button widget shows a background color and shadow by default?

easy

A. FlatButton

B. TextButton

C. IconButton

D. ElevatedButton

Solution

1. Step 1: Understand button types in Flutter

   ElevatedButton has a background and shadow, TextButton is flat with no background.

2. Step 2: Identify the button with background and shadow

   ElevatedButton is designed to have elevation and background color by default.

3. Final Answer:

   ElevatedButton -> Option D

4. Quick Check:

   ElevatedButton = background + shadow [OK]

Hint: ElevatedButton has elevation; TextButton is flat [OK]

Common Mistakes:

• Confusing TextButton as having background
• Thinking IconButton has background by default
• Using deprecated FlatButton

2. Which of the following is the correct syntax to create a TextButton with label 'Click' and a print action on press?

easy

A. TextButton(onClick: () => print('Clicked'), child: Text('Click'))

B. TextButton(child: Text('Click'), onTap: () => print('Clicked'))

C. TextButton(onPressed: () => print('Clicked'), child: Text('Click'))

D. TextButton(onPressed: print('Clicked'), child: 'Click')

Solution

1. Step 1: Check correct property names

   TextButton uses onPressed for tap events and child for its label widget.

2. Step 2: Verify syntax correctness

   TextButton(onPressed: () => print('Clicked'), child: Text('Click')) correctly uses onPressed with a lambda and child with Text widget.

3. Final Answer:

   TextButton(onPressed: () => print('Clicked'), child: Text('Click')) -> Option C

4. Quick Check:

   onPressed + child: Text = correct syntax [OK]

Hint: Use onPressed and child: Text for buttons [OK]

Common Mistakes:

• Using onClick instead of onPressed
• Passing string directly as child instead of Text widget
• Calling print inside onPressed instead of passing a function

3. What will be the visual difference when running this Flutter code?

ElevatedButton(onPressed: () {}, child: Text('Press'))
TextButton(onPressed: () {}, child: Text('Press'))

medium

A. ElevatedButton has background and shadow; TextButton is flat with only text

B. Both buttons look the same with background and shadow

C. TextButton has background; ElevatedButton is flat

D. Both buttons are invisible because onPressed is empty

Solution

1. Step 1: Understand default styles of ElevatedButton and TextButton

   ElevatedButton shows background color and shadow; TextButton is flat with no background.

2. Step 2: Analyze the given code

   Both have onPressed defined, so both are enabled and visible; their styles differ as per their types.

3. Final Answer:

   ElevatedButton has background and shadow; TextButton is flat with only text -> Option A

4. Quick Check:

   ElevatedButton = raised, TextButton = flat [OK]

Hint: ElevatedButton raised, TextButton flat text only [OK]

Common Mistakes:

• Thinking empty onPressed disables button
• Assuming TextButton has background by default
• Confusing visual styles of both buttons

4. Identify the error in this Flutter button code:

ElevatedButton(
  onPressed: print('Clicked'),
  child: Text('Tap me'),
)

medium

A. child should be a string, not Text widget

B. onPressed should be a function, not a function call

C. ElevatedButton does not accept onPressed property

D. Missing semicolon after ElevatedButton

Solution

1. Step 1: Check onPressed assignment

   onPressed expects a function to call when pressed, not the result of a function call.

2. Step 2: Identify the mistake

   print('Clicked') is called immediately; should be wrapped in a lambda like () => print('Clicked').

3. Final Answer:

   onPressed should be a function, not a function call -> Option B

4. Quick Check:

   onPressed = function, not function call [OK]

Hint: Pass function to onPressed, not call it directly [OK]

Common Mistakes:

• Calling print inside onPressed instead of passing a function
• Using string instead of Text widget for child
• Assuming ElevatedButton lacks onPressed

5. You want a button that looks flat but disables itself when pressed. Which Flutter widget and property combination achieves this best?

hard

A. TextButton with onPressed set to null after press

B. ElevatedButton with onPressed set to null after press

C. TextButton with onPressed always non-null

D. ElevatedButton with child set to null

Solution

1. Step 1: Understand button disabling in Flutter

   Setting onPressed to null disables the button visually and functionally.

2. Step 2: Choose button style and disabling method

   TextButton is flat; disabling it by setting onPressed to null after press fits the requirement.

3. Step 3: Eliminate incorrect options

   ElevatedButton is raised, not flat; child cannot disable button; onPressed non-null keeps button enabled.

4. Final Answer:

   TextButton with onPressed set to null after press -> Option A

5. Quick Check:

   Disable button by onPressed = null [OK]

Hint: Disable button by setting onPressed to null [OK]

Common Mistakes:

• Thinking child null disables button
• Using ElevatedButton for flat style
• Not setting onPressed to null to disable