Lære 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]),
              ),
            );
          },
        ),
      ),
    );
  }
}

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 4

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Sveip for å vise menyen

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]),
              ),
            );
          },
        ),
      ),
    );
  }
}

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 4