introduction_screen

A PageViewModel represents a single page within the introduction sequence. You provide a list of these objects to the pages parameter of the IntroductionScreen widget.

Key capabilities:

• Content: Define text using title and body (Strings), or use titleWidget and bodyWidget to provide custom Widgets. Note: You must use either body or bodyWidget, not both.
• Visuals: Use the image parameter to display any Widget (e.g., Icon, Image.asset, Image.network).
• Styling: Use the decoration parameter (of type PageDecoration) to customize pageColor, titleTextStyle, and bodyTextStyle for that specific page.

PageViewModel(
  title: "Title of page",
  body: "Description text",
  image: const Center(child: Icon(Icons.star)),
  decoration: const PageDecoration(
    pageColor: Colors.blue,
    titleTextStyle: TextStyle(color: Colors.white),
  ),
)

Use these IntroductionScreen parameters to control the global layout and styling:

Global Layout

• globalBackgroundColor: Background color for all pages. Use Colors.transparent to allow background images to show through.
• globalHeader: A widget displayed at the top of all pages.
• globalFooter: A widget displayed at the bottom of all pages.
• pagesAxis: The axis of scrolling (Axis.horizontal or Axis.vertical).
• showBottomPart: If true, shows the area containing skip/next/done buttons.
• controlsPosition: The Position of the controls (Default: const Position(left: 0, right: 0, bottom: 0)).
• controlsMargin, controlsPadding: Spacing for the controls container.

Progress Dots

• isProgress: Show/hide the progress dots (Default: true).
• isProgressTap: Enable/disable tapping on dots to navigate (Default: true).
• dotsDecorator: Customizes the dots (size, shape, color, spacing).
• dotsContainerDecorator: Customizes the container holding the dots and buttons.
• customProgress: Provide a custom widget to replace the dots indicator.

Animation and Physics

• animationDuration: Duration of the page transition (Default: 350).
• curve: The animation curve (Default: Curves.easeIn).
• scrollPhysics: The ScrollPhysics for the PageView (Default: BouncingScrollPhysics()).
• freeze: If true, freezes the scroll (Default: false).

The IntroductionScreen widget manages the navigation and display of your list of PageViewModels.

Navigation Controls:

• Next Button: Controlled by showNextButton. If you don't provide a next widget, you must set showNextButton: false.
• Skip Button: To show a skip button on all pages except the last, set showSkipButton: true and provide a skip widget.
• Back Button: To show a back button on all pages except the first, set showBackButton: true and provide a back widget.
• Done Button: If showDoneButton is true, you must provide a done widget and an onDone callback.

Styling Buttons:

• Use baseBtnStyle to apply a common TextButton.styleFrom to all buttons (Back, Skip, Next, Done).
• Use specific style parameters (backStyle, skipStyle, nextStyle, doneStyle) to override the base style for individual buttons. Specific styles are merged with the baseBtnStyle.

IntroductionScreen(
  pages: listPagesViewModel,
  showSkipButton: true,
  skip: const Text("Skip"),
  next: const Text("Next"),
  done: const Text("Done"),
  onDone: () {
    // Handle completion
  },
  baseBtnStyle: TextButton.styleFrom(backgroundColor: Colors.grey.shade200),
  skipStyle: TextButton.styleFrom(foregroundColor: Colors.red),
)

Use PageDecoration to control the visual appearance of individual pages.

Note: You cannot use both pageColor and boxDecoration simultaneously.

Styling

• pageColor: Background color of the page.
• boxDecoration: BoxDecoration for the page container.
• titleTextStyle: TextStyle for the title.
• bodyTextStyle: TextStyle for the body.

Layout and Flex

• imageFlex: Flex ratio of the image.
• bodyFlex: Flex ratio of the content (title/body).
• footerFlex: Flex ratio of the footer.
• imagePadding: Padding around the image widget.
• contentPadding: Padding around the title/body/footer.
• titlePadding: Padding specifically for the title.
• descriptionPadding: Padding specifically for the body.
• footerPadding: Padding specifically for the footer.
• bodyAlignment: Alignment of the content (Default: Align.topCenter).
• imageAlignment: Alignment of the image (Default: Align.bottomCenter).
• fullScreen: If true, sets the image as a fullscreen background (Default: false).

You can customize buttons in two ways: using pre-made widgets or providing entirely custom widgets.

Pre-made Buttons

Use these parameters to provide a simple widget (like Text) for the buttons:

• done: The widget for the Done button. (Requires onDone callback).
• next: The widget for the Next button.
• skip: The widget for the Skip button.
• back: The widget for the Back button.

Custom Buttons (Overrides)

If you want full control over the button's implementation, use the override parameters. These have priority over the pre-made button parameters:

• overrideDone: Custom Done button widget.
• overrideNext: Custom Next button widget.
• overrideSkip: Custom Skip button widget.
• overrideBack: Custom Back button widget.

Button Visibility

Control whether buttons are shown using:

• showDoneButton: (Default: true)
• showNextButton: (Default: true)
• showSkipButton: (Default: false)
• showBackButton: (Default: false)

Button Styling

• baseBtnStyle: Apply a global style to all buttons.
• skipStyle, nextStyle, doneStyle, backStyle: Apply specific styles to individual buttons.