CODEWITHSUNDEEP
flutterdarteventsstream
jdbenitez
jdbenitez

Reputation: 15

Custom Event listeners in flutter

I have a widget with a list and a button with a tree dot icon in every row that shows and hides a panel in its own row. I only want one panel open in the list. When I click on a row button, I'd like to close the panels of the other rows list.  All the buttons in the list are siblings. I'd like to send an event to the other rows' code to close the panels. Which is the correct manner of flutter?  

I have tried NotificationListener but it does not work because the components to be notified are not their parents.

The question is if the correct thing to do is to use the event_listener library or to use streams. I'm new to flutter/dart and streams seem too complex to me. It's a very simple use case and in this entry

Flutter: Stream<Null> is allowed?

they say

*

Some peoples use streams as a flux of events instead of a value changing over time, but the class isn't designed with this in mind. They typically try to represent the following method as a stream:

So with simple events with 0 or 1 argument. event_listener or Streams?

This is the screen I'm working on. I want that when one yellow button panel opens the other one closes.

List with panel buttons in every row

Upvotes: 0

Views: 2334

Answers (1)

Eric Omine
Eric Omine

Reputation: 529

Your question is broad and it seems to be a design question, i.e. it doesn't have a right answer.

However, I don't think you should use Streams or EventListeners at all in this case, because you should not make components in the same layer communicate with each other. Components should only communicate with their parents and children, otherwise your code will increase in complexity really fast. That's even documented in flutter_bloc.

Other than that, if you don't lift state up, i.e. move the responsibility of triggering the removal of the other rows to a parent Widget, than you're fighting against Flutter instead of letting it help you.

It's easy to create a parent Widget, just wrap one Widget around it. What you want to do is hard, so why would try to communicate with sibling widgets instead of using what's Flutter designed to do?

This is a suggestion:

class _NewsSectionState extends State<NewsSection> {
    Widget build(BuildContext context) {
        return ListView.builder(
            itemCount: newsInSection.length;
            itemBuilder: (_, int index) => NewsTile(
                title: Text('${newsInSection[index].title}')
                onDismiss: () => onDismiss(index),
                // I don't know how you set this up,
                // but () => onDismiss(Index)
                // should animate the dismiss of the Row with said index
            ),
        );
    }
}

class NewsRow extends StatefulWidget {

    final void Function() onDismiss;

    @override
    State<NewsRow> _createState => _NewsRowState();
}

class _NewsRowState extends State<NewsRow> {
    Widget build(BuildContext context) {
        return Row(
            children: [
                // title
                // home button
                // fav button
                // remove button
                IconButton(
                    Icons.close,
                    onPressed: widget.onDismiss,
                ),
            ],
        );
    }
}

Upvotes: 1

Related Questions