Customizations

This document details all the UI customizations Nudge Stories plugin, enabling you to have deeper control over the stories.

Stories come with a lot of customizations that you can do. For UI, you can customize the Stories Container and the Story itself. It's important to understand that the Stories Container is the bar that holds all the stories, while each story contains multiple slides.

Stories UI Customizations

This section outlines the customizations available for the Stories.

Dart

NudgeStories(
  
   // Sizing and Layout
  trayHeight: 200, // Set the height of the entire story bar
  trayItemWidth: 100, //The width for all story thumbnails 
  trayItemHeight: 100 //The height of all story thumbnails
  trayItemRoundness : 10 // Set the roundness of the thumbnail
  
  //Layout
  horizontalEdgePadding: 10, // Set horizontal edge padding of the entire story bar
  verticalEdgePadding: 10, // Set vertical edge padding of the entire story bar
  itemSpacing: 10, // Set the spacing between individual story thumbnails
  trayVerticalAlignment: TrayAlignment.top  // Set the vertical alignment of the tray
  trayItemContentGap:10, // Set the gap between the thumbnail and the text for every story
  trayItemMargin: EdgeInsets.all(0) // Set the margin around every story thumbnail
  
  //Text customizations
  fontFamily: 'Abel', // Set the font family for the title and subtitle
  showText: true, // Show or hide text for all story thumbnails
  headingLightModeColor: Colors.black, // Set heading color for all story thumbnails in light mode
  headingDarkModeColor: Colors.white, // Set heading color for all story thumbnails in dark mode
  subheadingDarkModeColor: Colors.red, // Set subheading color for all story thumbnails in dark mode
  subheadingLightModeColor: Colors.blue, // Set subheading color for all story thumbnails light mode
  
  
  //Colors
  skeletonColor: Colors.grey, // Set the color for the skeleton of every single story thumbnail
  gradientColors: const [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.yellow,
  ], // Apply gradient colors to all the story thumbnails
  theme: ThemeData(
    primaryColor: Colors.orangeAccent,
    fontFamily: 'Dosis',
  ), // Customize the theme
  
 
  
  children: [...], // Any list of widgets
),

Working with List View builder

NudgeStories (
children : [
   ListView.builder(
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return Container(
          margin: const EdgeInsets.only(right: 10),
          height: 100,
          width: 100,
          color: Colors.grey,
        );
      },
      itemCount: 5,
      shrinkWrap: true, // Important, this makes the list view builder take the space that it needs
    ),]
)

Handling multiple scrollable widgets

Incase you plan to add our story widget along with an existing scrollable widget, you refer to the below snippet to handle the scroll across both widgets seamlessly.

dart

const NudgeStories(
  customContent: [YourWidget1(...), YourWidget2(...), ...] // @type: List<Widget>
),