A Comprehensive Guide to IntroductionScreen for Flutter: Enhancing App Introductions

Published on by Flutter News Hub

A Comprehensive Guide to IntroductionScreen for Flutter: Enhancing App Introductions

IntroductionScreen is a highly customizable Flutter package designed to enhance your app's onboarding experience with visually appealing and informative screens. It offers various parameters to tailor each page, ensuring that your app makes a lasting first impression.

Parameter List

IntroductionScreen Parameters

  • pages: List of PageViewModel objects representing each page in the introduction.
  • showSkipButton: Display the "Skip" button.
  • showBackButton: Display the "Back" button.
  • showDoneButton: Display the "Done" button.
  • done: Widget for the "Done" button child.
  • onDone: Callback executed when the Done button is pressed.
  • next: Widget for the "Next" button child.
  • onSkip: Callback executed when the Skip button is pressed.
  • onChange: Callback executed when the page changes.

PageViewModel Parameters

  • title: Page title.
  • body: Page body text.
  • image: Page image.
  • decoration: PageDecoration object for page customization.
  • footer: Widget displayed below the page body.
  • reverse: Reverse order of image and content (title/body).
  • useScrollView: Use a ScrollView for the page.
  • scrollViewKeyboardDismissBehavior: ScrollView keyboard dismiss behavior.

PageDecoration Parameters

  • pageColor: Page background color.
  • boxDecoration: BoxDecoration for the page container.
  • imageFlex: Image flex ratio.
  • bodyFlex: Content (title/body) flex ratio.
  • footerFlex: Footer flex ratio.
  • imagePadding: Image Widget padding.
  • contentPadding: Content (title/body/footer) Widget padding.
  • titlePadding: Title text/Widget padding.
  • descriptionPadding: Body text/Widget padding.
  • footerPadding: Footer text/Widget padding.
  • contentAlignment: Content (title/body/footer) alignment.
  • imageAlignment: Image alignment.
  • fullScreen: Set image as fullscreen (background).

Examples

Simple Introduction Screen

IntroductionScreen(
  pages: [
    PageViewModel(
      title: "Title of introduction page",
      body: "Welcome to the app! This is a description of how it works.",
      image: const Center(child: Icon(Icons.waving_hand, size: 50.0)),
    ),
  ],
  showDoneButton: false,
  done: const Text("Done"),
  onDone: () {},
);

Introduction Screen with Custom Button Text

IntroductionScreen(
  pages: listPagesViewModel,
  showSkipButton: true,
  skip: const Text("Skip"),
  done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w700)),
  onDone: () {},
  onSkip: () {},
);

Introduction Screen with Custom Page Decoration

PageViewModel(
  title: "Title of page with custom decoration",
  body: "This is a description on a page with a custom decoration.",
  image: const Center(child: Icon(Icons.android)),
  decoration: const PageDecoration(
    pageColor: Colors.blue,
  ),
);

Introduction Screen with Custom Button Style

IntroductionScreen(
  pages: listPagesViewModel,
  next: const Text("Next"),
  done: const Text("Done"),
  baseBtnStyle: TextButton.styleFrom(
    backgroundColor: Colors.grey.shade200,
  ),
  skipStyle: TextButton.styleFrom(primary: Colors.red),
  doneStyle: TextButton.styleFrom(primary: Colors.green),
  nextStyle: TextButton.styleFrom(primary: Colors.blue),
);

Tips and Tricks

  • For a more interactive experience, use a custom Done button with an action (e.g., navigating to a specific page).
  • Customize the progress dots (DotsDecorator) to match your app's branding.
  • Add a global header or footer to provide additional information or call-to-actions.
  • Use the key parameter to programmatically control page changes.
  • Set rtl to true to enable right-to-left behavior.
  • Optimize images for different screen sizes to ensure a smooth introduction experience on all devices.

Conclusion

IntroductionScreen provides a robust set of parameters and customization options to create visually appealing and informative onboarding experiences for your Flutter apps. By leveraging these parameters effectively, you can captivate your users from their first interaction with your app and set the stage for a positive and engaging experience.

Flutter News Hub