Flutter: Why won't my DraggableScrollableSheet swipe up?

35 views Asked by At

I'm trying to create a ticker feed style widget. It should show news items one at a time as they happen, however the user is able to open up the DraggableScrollableSheet and scroll through the longer list of all news items.

I have the first part working (scrolling through one event at a time as they come in) but I'm unable to swipe up the sheet to view the other items.

List<NewsEvent> newsList = [];

class NewsEvent {
  final int id;
  final String event;
  final String timestamp;
  final Icon icon;

  NewsEvent({
    required this.id,
    required this.event,
    required this.timestamp,
    required this.icon,
  });
}

class NewsHandler {

  ScrollController scrollController = ScrollController();

  Widget newsFeed() {

    return DraggableScrollableSheet(
      initialChildSize: 0.1,
      minChildSize: 0.1,
      maxChildSize: 0.66,
      snap: true,
      expand: true,
      builder: (context, ScrollController sheetScrollController) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(12),
              topRight: Radius.circular(12),
            ),
            color: isLightMode ? colourOnPrimary : colourPrimaryLeastDark,
          ),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(4.0),
                //This container is for the 'handle' to indicate to the user that it can be pulled up
                child: Container( 
                  width: 50,
                  height: 3,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: Colors.grey,
                  ),
                ),
              ),
              Expanded(
                  child: ListView.builder(
                    physics: const ClampingScrollPhysics(),
                    controller: scrollController,
                    itemCount: newsList.length,
                    itemBuilder: (BuildContext context, int index) {
                      NewsEvent newsEvent = newsList[index];
                      TextStyle eventStyle = const TextStyle(fontSize: 16, color: Colors.black);
                      TextStyle timestampStyle = const TextStyle(fontSize: 12, fontStyle: FontStyle.italic, color: Colors.black);
                  
                      return Column(
                        children: [
                          const SizedBox(height: 5, width: 300, child: Divider(color: Color.fromARGB(123, 158, 158, 158))),
                          ListTile(
                            leading: newsEvent.icon, // News icon
                            title: Row(
                              children: [
                                Expanded(
                                  child: Text(newsEvent.event, style: eventStyle),
                                ),
                                Text(newsEvent.timestamp, style: timestampStyle),
                              ],
                            ),
                          ),
                          
                        ],
                      );
                      
                    },
                  ),
                ),
              //),
            ],
          ),
        );
      },
    );
  }
  //Call this to add a news item
  void addNews(String event, Icon icon) {
    String timestamp = DateFormat.jm().format(DateTime.now());
    newsList.add(NewsEvent(id: newsID, event: event, timestamp: timestamp, icon: icon));
    newsID++;

    MapPageState? mapPageState = mapPageKey.currentState;
    mapPageState?.mapPageSetState();
  }

  //Call this after adding a news item to scroll the list down.
  void scrollDown(){
    scrollController.animateTo(
      scrollController.position.maxScrollExtent,
      duration: const Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    );
  }
}
1

There are 1 answers

0
RJrules64 On
                padding: const EdgeInsets.all(4.0),
                //This container is for the 'handle' to indicate to the user that it can be pulled up
                child: Container( 
                  width: 50,
                  height: 3,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: Colors.grey,
                  ),
                ),
              ),

If anyone else is struggling with this, you need to wrap this with singlechildscrollview and give it sheetscrollcontroller.