Issue with state

Hi you all,

I have chat application, messages are received then saved in a list of Widgets, List of Widgets are then passed to ListView.builder() .

What I want is to keep the state of the Widgets presented… which somehow works but with caveats.

Somehow it works if u scroll it does keep the state.

but when a Message arrives it gets rebuilt.

My ListView Class

  const Content({Key? key}) : super(key: key);
  @override
  State<Content> createState() => _ContentState();
}

class _ContentState extends State<Content> {
  final ScrollController _scrollControler = ScrollController();

  @override
  void dispose() {
    this._scrollControler.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print('reloading content');
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: Setup.colorcontentpages,
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 10.w,
              spreadRadius: 2.w,
              offset: Offset(5.w, 5.w),
            ),
          ],
        ),
        height: 18.h,
        child: GestureDetector(
          // swipe to right
          onHorizontalDragEnd: (DragEndDetails details) {
            if (details.primaryVelocity! > 0.0) {
              // this.getusersonroom();
              Scaffold.of(context).openDrawer();
            }
          },
          // onPanUpdate: (details) {
          //   if (details.delta.dx > 0) {
          //     this.getusersonroom();
          //     return;
          //   }
          // },

          child: Consumer<Messages>(builder: (context, mInstance, _) {
            return ListView.builder(
              shrinkWrap: true,
              reverse: true,
              controller: this._scrollControler,
              padding: EdgeInsets.zero,
              itemCount: mInstance.get(User.getCurrentChanid()).length,
              itemBuilder: (context, index) {
                return mInstance.get(User.getCurrentChanid())[index];
              },
            );
          }),
        ),
      ),
    );
  }
}```

and this is an example of the widget that is used

```class Youtubeplayer extends StatefulWidget {
  final String youtubeid;
  final String nickname;
  final String avatar;
  final String time;

  const Youtubeplayer(
      {Key? key,
      required String this.avatar,
      required String this.nickname,
      required String this.time,
      required String this.youtubeid})
      : super(key: key);

  @override
  State<Youtubeplayer> createState() => _YoutubeplayerState();
}

class _YoutubeplayerState extends State<Youtubeplayer>
    with AutomaticKeepAliveClientMixin {
  late final YoutubePlayerController _controller;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    this._controller = YoutubePlayerController(
      initialVideoId: this.widget.youtubeid,
      flags: YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
      ),
    );
    super.initState();
  }

  @override
  void dispose() {
    this._controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    // return YoutubePlayer(
    //   controller: this._controller,
    //   onReady: () {},
    // );

    return ListTile(
      tileColor: Colors.grey.shade50,
      leading: ClipOval(
        child: CachedNetworkImage(
          width: 45.w,
          height: 45.h,
          // fit: BoxFit.fill,
          imageUrl: this.widget.avatar,
          placeholder: (context, url) =>
              Center(child: CircularProgressIndicator()),
          errorWidget: (context, url, error) => Center(
            child: Image(
              // fit: BoxFit.fill,
              image: AssetImage(Setup.noavatarimage),
            ),
          ),
        ),
      ),
      title: Text(this.widget.nickname,
          style: TextStyle(color: Colors.black54, fontSize: Setup.fontsize)),
      trailing: GestureDetector(
        onTap: () async {
          bool accepted = await alerter(context,
              notice: 'Reportar conteúdo de @${widget.nickname}');
          if (accepted) {
            context
                .read<AppSocket>()
                .getSocket()
                .emit('reportuser', {'user': widget.nickname});
            await simpleokdialog(context, 'Relatado com sucesso!');
          }
        },
        child: Icon(
          Icons.thumb_down,
          color: Colors.red,
        ),
      ),
      subtitle: new YoutubePlayer(
        controller: this._controller,
        onReady: () {},
      ),
    );
  }
}```

My goal is that I want to show my youtube, audio or video widget in the listview and when played they wont lose the state when scrolling and when receiving payload messages from server.

Thanks a lot for your help guys.

I don’t quite understand your issue. What is the problem you are observing? What happens when your widgets are rebuilt? Do you lose your scroll position? Do the states of the list entries get mixed up?

Also, the formatting on your code blocks is messed up. Please make sure that the `-characters are on a separate line so that it gets formatted correctly. :slight_smile: