Day 5: Interactive Widgets in Flutter

Sun, May 2025 19:17:14

Hello friends! On Day 5, we’re going to discuss a very important topic in Flutter app development: interactive widgets. These are components that allow our apps to interact directly with users. We’ll focus on several key widgets like:

• ElevatedButton
• TextButton
• TextField
• GestureDetector

We’ll also discuss how to handle user input. Let’s jump right in!

1. What Are Interactive Widgets?

Interactive widgets are widgets that can respond to user actions, such as taps, text input, or swipes. They’re commonly used for navigation, forms, and other interactions that make an app feel “alive” and responsive.

2. ElevatedButton

What is ElevatedButton?

ElevatedButton is a button with elevation, meaning it appears to float. It's usually used for primary actions on a page.

Usage Example:

ElevatedButton(
  onPressed: () {
    print('Button clicked!');
  },
  child: Text('Click Me'),
)

Explanation:

• onPressed: Function executed when the button is pressed.
• child: The content of the button, typically Text.

Additional Styling:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
    textStyle: TextStyle(fontSize: 18),
  ),
  onPressed: () {},
  child: Text('Submit'),
)

3. TextButton

What is TextButton?

TextButton is a text-based button with no elevation. It's suitable for secondary actions like “Forgot Password?”, “Cancel”, or simple navigation.

Usage Example:

TextButton(
  onPressed: () {
    print('Text button clicked');
  },
  child: Text('Cancel'),
)

Additional Styling:

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

4. TextField

What is TextField?

TextField is used for accepting text input from users, such as names, emails, passwords, etc.

Usage Example:

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('Input: $value');
  },
)

Storing Input Values:

Use TextEditingController:

TextEditingController nameController = TextEditingController();

TextField(
  controller: nameController,
  decoration: InputDecoration(labelText: 'Name'),
)

ElevatedButton(
  onPressed: () {
    print(nameController.text);
  },
  child: Text('Submit'),
)

5. GestureDetector

What is GestureDetector?

GestureDetector allows us to detect various gestures like taps, double taps, long presses, etc. It's typically used when we want non-button elements like images or containers to respond to user actions.

Usage Example:

GestureDetector(
  onTap: () {
    print('Container tapped');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.amber,
    child: Text('Tap Me'),
  ),
)

Other Gestures:

GestureDetector(
  onDoubleTap: () => print('Double Tap!'),
  onLongPress: () => print('Long Press!'),
  child: Icon(Icons.favorite, size: 50),
)

6. Handling User Input

Use State

To store and display user input, we need to use a StatefulWidget.

Example:

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  TextEditingController nameController = TextEditingController();

  String result = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: nameController,
          decoration: InputDecoration(labelText: 'Enter Name'),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              result = nameController.text;
            });
          },
          child: Text('Show'),
        ),
        Text('Hello, $result'),
      ],
    );
  }
}

Explanation:

• We use TextEditingController to capture input.
• setState updates the UI when the data changes.

7. Practice

Try creating a simple form with:

• Name input
• Email input
• Submit button
• Displaying the input result after the button is pressed

Add basic validation such as not allowing empty fields.

8. Conclusion

Interactive widgets in Flutter are very powerful. With ElevatedButton, TextButton, TextField, and GestureDetector, we can build apps that truly respond to users. Understanding the concept of state is also crucial so that apps can react and dynamically display data.

Keep exploring and don’t be afraid to experiment!