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,
);
}
}
If anyone else is struggling with this, you need to wrap this with singlechildscrollview and give it sheetscrollcontroller.