RepaintBoundary with a StreamBuilder

user_3681880 0
Viewed 569

I thought I understood RepaintBoundary but now I don't.

Background

I wrote this answer describing how you can add a RepaintBoundary around a widget that has to draw a lot to prevent other parts of the widget tree from redrawing. That worked as expected.

enter image description here

Problem now

I'm trying to make a real life example now where the widget is being rebuilt inside a StreamBuilder based on an audio player stream. I tried wrapping the whole StreamBuilder in a RepaintBoundary like this:

@override
Widget build(BuildContext context) {
  print("building app");
  return Scaffold(
    body: Column(
      children: [
        Spacer(),
        RepaintBoundary(
          child: ProgressBarWidget(
              durationState: _durationState, player: _player),
        ),
        RepaintBoundary(
          child: PlayPauseButton(player: _player),
        ),
      ],
    ),
  );
}

But the rest of the UI is still repainting (except the play/pause button which I also wrapped in a RepaintBoundary).

enter image description here

The build method of that ProgressBarWidget looks like this:

@override
Widget build(BuildContext context) {
  print('building progress bar');
  return StreamBuilder<DurationState>(
    stream: _durationState,
    builder: (context, snapshot) {
      final durationState = snapshot.data;
      final progress = durationState?.progress ?? Duration.zero;
      final buffered = durationState?.buffered ?? Duration.zero;
      final total = durationState?.total ?? Duration.zero;
      return ProgressBar(
        progress: progress,
        buffered: buffered,
        total: total,
        onSeek: (duration) {
          _player.seek(duration);
        },
      );
    },
  );
}

But if I remove the StreamBuilder like this:

@override
Widget build(BuildContext context) {
  print('building progress bar');
  return ProgressBar(
    progress: Duration.zero,
    total: Duration(minutes: 5),
    onSeek: (duration) {
      _player.seek(duration);
    },
  );
}

Then the repaint boundary works again when I manually move the thumb.

enter image description here

What is it about the StreamBuilder that makes the RepaintBoundary not work?

Full code

The full code for the widget layout is here:

import 'package:flutter/material.dart';
import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/rendering.dart';
import 'package:just_audio/just_audio.dart';
import 'package:rxdart/rxdart.dart';

void main() {
  debugRepaintTextRainbowEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatefulWidget {
  @override
  _HomeWidgetState createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  AudioPlayer _player;
  final url = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3';
  Stream<DurationState> _durationState;

  @override
  void initState() {
    super.initState();
    _player = AudioPlayer();
    _durationState = Rx.combineLatest2<Duration, PlaybackEvent, DurationState>(
        _player.positionStream,
        _player.playbackEventStream,
        (position, playbackEvent) => DurationState(
              progress: position,
              buffered: playbackEvent.bufferedPosition,
              total: playbackEvent.duration,
            ));
    _init();
  }

  Future<void> _init() async {
    try {
      await _player.setUrl(url);
    } catch (e) {
      print("An error occured $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    print("building app");
    return Scaffold(
      body: Column(
        children: [
          Spacer(),
          RepaintBoundary(
            child: ProgressBarWidget(
                durationState: _durationState, player: _player),
          ),
          RepaintBoundary(
            child: PlayPauseButton(player: _player),
          ),
        ],
      ),
    );
  }
}

class ProgressBarWidget extends StatelessWidget {
  const ProgressBarWidget({
    Key key,
    @required Stream<DurationState> durationState,
    @required AudioPlayer player,
  })  : _durationState = durationState,
        _player = player,
        super(key: key);

  final Stream<DurationState> _durationState;
  final AudioPlayer _player;

  @override
  Widget build(BuildContext context) {
    print('building progress bar');
    return StreamBuilder<DurationState>(
      stream: _durationState,
      builder: (context, snapshot) {
        final durationState = snapshot.data;
        final progress = durationState?.progress ?? Duration.zero;
        final buffered = durationState?.buffered ?? Duration.zero;
        final total = durationState?.total ?? Duration.zero;
        return ProgressBar(
          progress: progress,
          buffered: buffered,
          total: total,
          onSeek: (duration) {
            _player.seek(duration);
          },
        );
      },
    );

    // ProgressBar(
    //   progress: Duration.zero,
    //   total: Duration(minutes: 5),
    //   onSeek: (duration) {
    //     _player.seek(duration);
    //   },
    // );
  }
}

class PlayPauseButton extends StatelessWidget {
  const PlayPauseButton({
    Key key,
    @required AudioPlayer player,
  })  : _player = player,
        super(key: key);

  final AudioPlayer _player;

  @override
  Widget build(BuildContext context) {
    print('building play/pause button');
    return StreamBuilder<PlayerState>(
      stream: _player.playerStateStream,
      builder: (context, snapshot) {
        final playerState = snapshot.data;
        final processingState = playerState?.processingState;
        final playing = playerState?.playing;
        if (processingState == ProcessingState.loading ||
            processingState == ProcessingState.buffering) {
          return Container(
            margin: EdgeInsets.all(8.0),
            width: 64.0,
            height: 64.0,
            child: CircularProgressIndicator(),
          );
        } else if (playing != true) {
          return IconButton(
            icon: Icon(Icons.play_arrow),
            iconSize: 64.0,
            onPressed: _player.play,
          );
        } else if (processingState != ProcessingState.completed) {
          return IconButton(
            icon: Icon(Icons.pause),
            iconSize: 64.0,
            onPressed: _player.pause,
          );
        } else {
          return IconButton(
            icon: Icon(Icons.replay),
            iconSize: 64.0,
            onPressed: () => _player.seek(Duration.zero),
          );
        }
      },
    );
  }
}

class DurationState {
  const DurationState({this.progress, this.buffered, this.total});
  final Duration progress;
  final Duration buffered;
  final Duration total;
}

The whole project is on GitHub.

stream-builder flutter paint rendering
2 Answers

When you don't have the StreamBuilder and drag in the ProgressBar, it will probably just repaint itself and not require a relayout.

When the StreamBuilder gets a new event from the stream, it rebuilds ProgressBar. Depending on the details of ProgressBar, when it gets rebuild it will also require a relayout (perhaps it contains a layout builder). Since it is in a Column and the Column uses the size of it children during layout (to determine the position of the next child), then Column has to do it layout again as well, which might cause its children to need a repaint.

Play around with this: You'll notice that marking Foo to repaint (horizontal drag) only causes Foo to repaint (when it is wrapped with a RepaintBoundary). Marking Foo for relayout (a tap) will also cause the Column to relayout and repaint. When the LayoutBuilder is present (which causes a relayout when it is rebuild), you'll see that a rebuild of Foo (by vertical drag) also causes the Column to repaint.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Column(
        children: [
          Container(
            height: 400,
            color: Color(0x11ff0000),
          ),
          RepaintBoundary(
            child: Foo(),
          ),
        ],
      );
}

class Foo extends StatefulWidget {
  @override
  _FooState createState() => _FooState();
}

class _FooState extends State<Foo> {
  @override
  Widget build(BuildContext context) => GestureDetector(
        onHorizontalDragUpdate: (_) => context.findRenderObject().markNeedsPaint(),
        onTap: () => context.findRenderObject().markNeedsLayout(),
        onVerticalDragUpdate: (_) => setState(() {}),
        child: LayoutBuilder(
          builder: (context, _) => Container(
            height: 100,
            width: 100.0,
            color: Color(0xff002200),
          ),
        ),
      );
}
user_26618400

This is a supplemental answer to tell how specifically I solved the problem after getting @spkersten's help.

The ProgressBar widget was rebuilding internally whenever the text labels would change. My first attempt at solving the problem was to wrap the widget in a SizedBox with a fixed height and width. This did work in that it prevented the rest of the screen from needing relayout or repainting. However, it was difficult to know what the height of the progress bar was going to be before laying it out.

So my second solution was to paint the text manually rather than use Text widgets. That way I could refrain from calling markNeedsLayout when the text changed. This solved the problem.

My current implementation of the progress bar is here.

user_36818800
Related