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.