Why is Flutter’s Stateless widget strangely rebuilt?

The strange part comes from the canUpdate check that widgets have, without a key, every element in an array of the same type is equal and that translates to everything can be updated, A(key: null) is equal to A(key: null), then because stateless components always rebuild every parent setState will require a new build from every non instantiated child.

Doesn’t that mean that it can’t hold a "state"?, well, there are other checks (like this one) to verify that there is a need to rebuild something; in the drag example you can see that SquareCard.build is being called and nothing changes.

With that in this pad the fix is quite simple, the actual effect is that tells flutter that the widgets are not same and swaps them.

-  const Tile({required String this.text, super.key});
+  Tile({required String this.text}) : super(key: ValueKey(text));

A great example for this would be draggable objects, here there are two "kinds" of the same SquareCard, the instantiated wont get changed except when 2 of them swap places bought get rebuilt with the same color and the tree component (the one with ‘Add / Remove’) will always get rebuilt on every state (using a key wont change anything for this one).

(With ‘Add / Remove’, to add, drag it to an element on the wrap; to remove, drag the element to it)

class DragPage extends StatefulWidget {
  DragPage({super.key});

  @override
  State<DragPage> createState() => _DragPage();
}

// Maps the dragged to the target
typedef SrcDst = MapEntry<SquareCard, SquareCard>;

class _DragPage extends State<DragPage> {
  late final cards = List<Widget>.generate(
    5, (i) => SquareCard(text: 'Card $i', stream: _drag_stream)
  );

  final _drag_stream = StreamController<SrcDst>();

  @override
  void initState() {
    _drag_stream.stream.listen(
      (SrcDst ev) {
        print('${ev.key} > ${ev.value}');

        var widget_ph;
        var src_index = cards.indexOf(ev.key);
        var dst_index = cards.indexOf(ev.value);

        if (src_index == -1) {
          widget_ph = SquareCard(
            text: 'Card ${cards.length}',
            stream: _drag_stream,
          );
        } else {
          widget_ph = cards.removeAt(
            cards.indexOf(ev.key),
          );
        }
        if (dst_index != -1) {
          cards.insert(dst_index, widget_ph);
        }
        setState(() => null);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          SizedBox(
              width: 350,
              child: Wrap(
                children: cards,
              )),
          Center(
            child: SquareCard(
              text: 'Add / Remove',
              stream: _drag_stream,
            ),
          )
        ],
      ),
    );
  }
}

A small thing to point here is that toStringShort() prints out the key used if there was one, so if you add one, on the build it will show witch one was.

class SquareCard extends StatelessWidget {
  final String text;
  final StreamController<SrcDst> stream;
  final Color color = Color(0xFF000000 | Random().nextInt(0xFFFFFF));

  SquareCard({super.key, required this.text, required this.stream});

  Widget build_card(BuildContext ctx, bool is_drag) {
    return Container(
      color: is_drag ? color.withAlpha(180) : color,
      child: Center(child: Text(text)),
      height: 100,
      width: 100,
    );
  }

  @override
  Widget build(BuildContext ctx) {
    print('Building ${this.toStringShort()}');
    return DragTarget<SquareCard>(
      builder: (ctx, a, r) {
        return Draggable<SquareCard>(
          feedback: Material(child: build_card(ctx, true)),
          childWhenDragging: build_card(ctx, true),
          child: build_card(ctx, false),
          data: this,
        );
      },
      onAccept: (SquareCard other) => stream.add(
        SrcDst(other, this),
      ),
    );
  }
}

And the rest of the code.

import 'dart:math';
import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(const App());

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

  @override
  Widget build(BuildContext ctx) {
    return MaterialApp(
      home: Scaffold(
        body: DragPage(),
      ),
    );
  }
}