Manage State: Child or Parent

Manage State: Child or Parent

Ausführung 1

Widget manages its own state:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Scaffold(body: ExampleWidget())));
}

class ExampleWidget extends StatelessWidget {
  const ExampleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const ExampleButton();
  }
}

class ExampleButton extends StatefulWidget {
  const ExampleButton({super.key});

  @override
  State<StatefulWidget> createState() {
    return _ExampleButtonState();
  }
}

class _ExampleButtonState extends State<ExampleButton> {
  bool _active = false;

  void _handleButtonChange(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () => {_handleButtonChange(!_active)},
        child: Text(_active ? 'active' : 'inactive'));
  }
}

Ausführung 2

Parent manages state of Widget:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Scaffold(body: ExampleWidget())));
}

class ExampleWidget extends StatefulWidget {
  const ExampleWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return _ExampleWidgetState();
  }
}

class _ExampleWidgetState extends State<ExampleWidget> {
  bool _buttonActive = false;

  void _handleButtonChanged(bool newValue) {
    setState(() {
      _buttonActive = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ExampleButton(
      active: _buttonActive, onChanged: _handleButtonChanged);
  }
}

class ExampleButton extends StatelessWidget {
  const ExampleButton(
      {super.key, this.active = false, required this.onChanged});

  final bool active;
  final ValueChanged<bool> onChanged; // #1

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () => {onChanged(!active)},
        child: Text(active ? 'active' : 'inactive'));
  }
}

Anmerkungen

1. ValueChanged<bool> ist das gleiche wie void Function(bool).

Ausführung 3

Parent kontrolliert State eines Teils seines Childs. Einen anderen Teil seines States kontrolliert das Child selbst. Hier wird der Buttontext vergrößert, sobald der Mauszeiger über dem Button schwebt.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Scaffold(body: ExampleWidget())));
}

class ExampleWidget extends StatefulWidget {
  const ExampleWidget({super.key});

  @override
  State<StatefulWidget> createState() {
    return _ExampleWidgetState();
  }
}

class _ExampleWidgetState extends State<ExampleWidget> {
  bool _buttonActive = false;

  void _handleButtonChanged(bool newValue) {
    setState(() {
      _buttonActive = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ExampleButton(
        active: _buttonActive, onChanged: _handleButtonChanged);
  }
}

class ExampleButton extends StatefulWidget {
  const ExampleButton(
      {super.key, this.active = false, required this.onChanged});

  final bool active;
  final ValueChanged<bool> onChanged;

  @override
  State<StatefulWidget> createState() {
    return _ExampleButtonState();
  }
}

class _ExampleButtonState extends State<ExampleButton> {
  bool _hovered = false;

  void _handleHoverChanged(bool newValue) {
    setState(() {
      _hovered = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () => {widget.onChanged(!widget.active)},
        onHover: _handleHoverChanged,
        child: Text(
          widget.active ? 'active' : 'inactive',
          textScaleFactor: _hovered ? 1.5 : 1.0,
        ));
  }
}