Lära Callbacks and Events | Lifting State and Widget Communication

In Flutter, callbacks are a fundamental technique for sending events or data from a child widget up to its parent. While data typically flows down the widget tree through constructor parameters, sometimes you need a way for a child to notify its parent about something that happened—like a button tap or a value change. This is where callbacks come in. A callback is simply a function that you pass down from the parent to the child, which the child can call at the appropriate moment to "send a message" back up.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ParentWidget(),
    );
  }
}

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String _message = "No event yet";

  void _handleChildButtonPressed() {
    setState(() {
      _message = "Button pressed in ChildWidget!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Callbacks Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ChildWidget(onButtonPressed: _handleChildButtonPressed),
            SizedBox(height: 20),
            Text(_message),
          ],
        ),
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final VoidCallback onButtonPressed;

  ChildWidget({required this.onButtonPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onButtonPressed,
      child: Text("Press me"),
    );
  }
}

The ParentWidget passes a function called _handleChildButtonPressed to ChildWidget using the onButtonPressed parameter. The child widget receives this function and calls it when its button is pressed. When the button is tapped, the parent's callback is triggered, updating the _message string and causing the parent to rebuild with the new message. This pattern is essential for event handling in Flutter, allowing you to keep state management in the parent while letting the child notify the parent about user actions. Callbacks keep your code organized, decouple widgets, and make it clear where state changes occur.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 2

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ParentWidget(),
    );
  }
}

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  String _message = "No event yet";

  void _handleChildButtonPressed() {
    setState(() {
      _message = "Button pressed in ChildWidget!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Callbacks Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ChildWidget(onButtonPressed: _handleChildButtonPressed),
            SizedBox(height: 20),
            Text(_message),
          ],
        ),
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final VoidCallback onButtonPressed;

  ChildWidget({required this.onButtonPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onButtonPressed,
      child: Text("Press me"),
    );
  }
}

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 2