ElevatedButton and TextButton in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button with a label 'Click Me' using ElevatedButton.

Flutter

ElevatedButton(onPressed: () {}, child: Text([1]))

Drag options to blanks, or click blank then click option'

AText('Click Me')

B"Click Me"

CClick Me

D'Click Me'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing Text widget instead of string inside Text

The child of ElevatedButton expects a widget. Text widget requires a string in quotes. So, "Click Me" is correct.

2fill in blank

medium

Complete the code to create a TextButton with a label 'Press Here'.

Flutter

TextButton(onPressed: () {}, child: Text([1]))

Drag options to blanks, or click blank then click option'

A'Press Here'

B"Press Here"

CPress Here

DText('Press Here')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing string without quotes

Passing Text widget inside Text

The Text widget requires a string literal with quotes. So, 'Press Here' is correct.

3fill in blank

hard

Fix the error in the code to make the ElevatedButton clickable with label 'Submit'.

Flutter

ElevatedButton(onPressed: [1], child: Text('Submit'))

Drag options to blanks, or click blank then click option'

Apressed

Bnull

C() {}

DonPressed()

Attempts:

3 left

💡 Hint

Common Mistakes

Setting onPressed to null disables the button

Calling a function instead of passing it

The onPressed property expects a function. () {} is an empty function, so it works.

4fill in blank

hard

Fill both blanks to create a TextButton with label 'Cancel' and a print statement on press.

Flutter

TextButton(onPressed: () [1] print('Cancelled'); [2], child: Text('Cancel'))

Drag options to blanks, or click blank then click option'

A{

B}

C()

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of braces for function body

Missing braces causes syntax error

The onPressed function body must be enclosed in curly braces { } to include statements.

5fill in blank

hard

Complete the code to create an ElevatedButton with label 'Save', a function printing 'Saved', and a style setting background color to blue.

Flutter

ElevatedButton(onPressed: () { print('Saved'); }, style: ElevatedButton.styleFrom([1]: Colors.blue), child: Text('Save'))

Drag options to blanks, or click blank then click option'

A{

B}

CbackgroundColor

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'color' instead of 'backgroundColor' in styleFrom

Missing braces in onPressed function

The onPressed function needs braces { } around its body. The styleFrom method uses backgroundColor to set button color.

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