4 Best Splash and Introduction Screen Libraries for Flutter

Splash and Introduction screens are kind of important in an app. While splashing screen helps users notify our the developer’s brand, introduction one helps user understand about the app and how to use some major features of the app.

Following are the best Flutter splash and introduction screen libraries:

splashscreen

This package comes with a lot of customization, including appearing period, page to load after splash is completed, background color, image for app/company logo, and many more.

SplashScreen(
  seconds: 14,
  navigateAfterSeconds: HomePage(),
  title: Text('App title'),
  image: Image.asset('my_logo.png'),
  backgroundColor: Colors.red,
  styleTextUnderTheLoader: TextStyle(),
  photoSize: 300.0,
  loaderColor: Colors.red
)

intro_views_flutter

intro_views_flutter can help developers create an app intro screens with some cool animations. It is designed to allow addition of pages and animation such as circular page reveal easily. Other minor features like skip button, animation control are also included to make it a good choice for creating introduction screens.

//define pages
final pageOne = new PageViewModel(
	pageColor: Colors.blue,
	iconImageAssetPath: 'assets/airplane.png',
	iconColor: null,
	bubbleBackgroundColor: null,
	body: Text(
	'Hello user',
	),
	title: Text('Cabs'),
	mainImage: Image.asset(
	'assets/airplane.png',
	height: 285.0,
	width: 285.0,
	alignment: Alignment.center,
	),
	titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
	bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
);

final pageTwo = new PageViewModel(
	pageColor: Colors.blue,
	iconImageAssetPath: 'assets/building.png',
	iconColor: null,
	bubbleBackgroundColor: null,
	body: Text(
	'The app can do it like this',
	),
	title: Text('Cabs'),
	mainImage: Image.asset(
	'assets/building.png',
	height: 285.0,
	width: 285.0,
	alignment: Alignment.center,
	),
	titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
	bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
);

//add to slider
final Widget introViews = new IntroViewsFlutter(
  [pageOne, pageTwo],
  onTapDoneButton: (){
    
  },
  showSkipButton: true,
  pageButtonTextStyles: new TextStyle(
      color: Colors.white,
      fontSize: 18.0,
      fontFamily: "Regular",
    ),
);

intro_slider

intro_slider helps you make a cool intro for your app. Every property can be customized to make the slider suit your app.

Define each slide

List<Slide> slides = new List();

slides.add(
  new Slide(
    title: "SCHOOL",
    styleTitle: TextStyle(
        color: Color(0xff3da4ab),
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'RobotoMono'),
    description:
        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
    styleDescription: TextStyle(
        color: Color(0xfffe9c8f),
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontFamily: 'Raleway'),
    pathImage: "images/photo_school.png",
  ),
);
slides.add(
  new Slide(
    title: "MUSEUM",
    styleTitle: TextStyle(
        color: Color(0xff3da4ab),
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'RobotoMono'),
    description:
        "Ye indulgence unreserved connection alteration appearance",
    styleDescription: TextStyle(
        color: Color(0xfffe9c8f),
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontFamily: 'Raleway'),
    pathImage: "images/photo_museum.png",
  ),
);
slides.add(
  new Slide(
    title: "COFFEE SHOP",
    styleTitle: TextStyle(
        color: Color(0xff3da4ab),
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'RobotoMono'),
    description:
        "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",
    styleDescription: TextStyle(
        color: Color(0xfffe9c8f),
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontFamily: 'Raleway'),
    pathImage: "images/photo_coffee_shop.png",
  ),
);

Add pages to slider

IntroSlider(
  // List slides
  slides: this.slides,

  // Skip button
  renderSkipBtn: this.renderSkipBtn(),
  colorSkipBtn: Color(0x33ffcc5c),
  highlightColorSkipBtn: Color(0xffffcc5c),

  // Next button
  renderNextBtn: this.renderNextBtn(),

  // Done button
  renderDoneBtn: this.renderDoneBtn(),
  onDonePress: this.onDonePress,
  colorDoneBtn: Color(0x33ffcc5c),
  highlightColorDoneBtn: Color(0xffffcc5c),

  // Dot indicator
  colorDot: Color(0xffffcc5c),
  sizeDot: 13.0,
  typeDotAnimation: dotSliderAnimation.SIZE_TRANSITION,

  // Tabs
  listCustomTabs: this.renderListCustomTabs(),
  backgroundColorAllSlides: Colors.white,
  refFuncGoToTab: (refFunc) {
    this.goToTab = refFunc;
  },

  // Show or hide status bar
  shouldHideStatusBar: true,

  // On tab change completed
  onTabChangeCompleted: this.onTabChangeCompleted,
)

nice_intro

Onboarding is a great way to introduce your app to newcomers, to help them quickly know what to do and where to carry out a task on your app.

List<IntroScreen> pages =  [
	IntroScreen(
	  title: 'Search',
	  imageAsset: 'assets/img/1.png',
	  description: 'Quickly find all your messages',
	  headerBgColor: Colors.white,
	),
	IntroScreen(
	  title: 'Focused Inbox',
	  headerBgColor: Colors.white,
	  imageAsset: 'assets/img/2.png',
	  description: "We've put your most important, actionable emails here",
	),
	IntroScreen(
	  title: 'Social',
	  headerBgColor: Colors.white,
	  imageAsset: 'assets/img/3.png',
	  description: "Keep talking with your mates",
	),
	];

IntroScreens introScreens = IntroScreens(
	footerBgColor: TinyColor(Colors.blue).lighten().color,
	activeDotColor: Colors.white,
	footerRadius: 18.0,
	indicatorType: IndicatorType.CIRCLE,
	pages:pages
)