Learn Buttons, Inputs, Lists, Cards

Definition

Interactive widgets are widgets that respond to user input.

In Flutter, you use interactive widgets to create elements that respond to taps, gestures, and other forms of user interaction. One of the most common interactive widgets is the ElevatedButton. This button uses the onPressed callback to define what happens when a user taps the button.

main.dart


              1234567891011121314151617181920212223
            
// main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ElevatedButton Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: Text('Press Me'),
          ),
        ),
      ),
    );
  }
}

To collect user input, you can use the TextField widget. This widget allows users to enter text, and you can use a controller to access or modify the text programmatically.

main.dart


              12345678910111213141516171819202122232425262728293031323334
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Enter text'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print('Input: [1m${_controller.text}[0m');
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

To display collections of data, Flutter provides the ListView widget, which efficiently renders a scrollable list of items. For visually grouping related information, use the Card widget inside a ListView to give each list item a distinct appearance.

main.dart


              123456789101112131415161718192021222324252627
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<String> items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView with Cards')),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Card(
              margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: ListTile(
                title: Text(items[index]),
              ),
            );
          },
        ),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me an example of how to use ElevatedButton in Flutter?

How do I use a TextEditingController with a TextField?

Can you explain how to combine ListView and Card widgets in a Flutter app?

Swipe to show menu

Definition

Interactive widgets are widgets that respond to user input.

main.dart


              1234567891011121314151617181920212223
            
// main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ElevatedButton Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: Text('Press Me'),
          ),
        ),
      ),
    );
  }
}

To collect user input, you can use the TextField widget. This widget allows users to enter text, and you can use a controller to access or modify the text programmatically.

main.dart


              12345678910111213141516171819202122232425262728293031323334
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Enter text'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print('Input: [1m${_controller.text}[0m');
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

main.dart


              123456789101112131415161718192021222324252627
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<String> items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView with Cards')),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Card(
              margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: ListTile(
                title: Text(items[index]),
              ),
            );
          },
        ),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 4