IntroView #1 Material Intro Screen

flutter introview

introview is inspired by paper onboarding and developed with love from scratch. i decided to rewrite almost all the features in order to make it available to the flutter developers and extensible as possible.

a flutter package for some material design app intro screens with some cool animations.

features

• easy addition of pages.
• circular page reveal.
• cool animations.
• animation control, if the user stops sliding in the midway.
• skip button, for skipping the app intro.
• custom font selection.
• material design.

getting started

you should ensure that you add the intro_views_flutter as a dependency in your flutter project.

dependencies:
  intro_views_flutter: '^2.4.0'

you can also reference the git repository directly if you want:

dependencies:
  intro_views_flutter:
    git: git://github.com/aagarwal1012/introviews-flutter

you should then run flutter packages get in your terminal so as to get the package.

usage

• introviewsflutter widget require a list of pageviewmodel , and some other parameters. refer the code below to create a pageviewmodel page. final page = new pageviewmodel( pagecolor: const color(0xff607d8b), iconimageassetpath: 'assets/taxi-driver.png', iconcolor: null, bubblebackgroundcolor: null, body: text( 'easy cab booking at your doorstep with cashless payment system', ), title: text('cabs'), mainimage: image.asset( 'assets/taxi.png', height: 285.0, width: 285.0, alignment: alignment.center, ), textstyle: textstyle(fontfamily: 'myfont', color: colors.white), );
• now refer the code below to get the introviewsflutter widget. final widget introviews = new introviewsflutter( [page], ontapdonebutton: (){ //void callback }, showskipbutton: true, pagebuttontextstyles: new textstyle( color: colors.white, fontsize: 18.0, fontfamily: "regular", ), ); for further usage refer the example available. for landscape preview click the link. note : if you added more than four pages in the list then there might be overlapping between page icons and skip button, so my suggestion is just make the showskipbutton: false.

documentation

pageviewmodel class

dart attribute	datatype	description	default value
pagecolor	color	set color of the page.	null
mainimage	image / widget	set the main image of the page.	null
title	text / widget	set the title text of the page.	null
body	text / widget	set the body text of the page.	null
iconimageassetpath	string	set the icon image asset path that would be displayed in page bubble.	null
iconcolor	color	set the page bubble icon color.	null
bubblebackgroundcolor	color	set the page bubble background color.	colors.white / color(0x88ffffff)
textstyle	textstyle	set textstyle for both title and body	title: color: colors.white , fontsize: 50.0 body: color: colors.white , fontsize: 24.0
bubble	widget	set a custom widget for the inner bubble	null

introviewflutter class

dart attribute	datatype	description	default value
pages	list	set the pages of the intro screen.	null
ontapdonebutton	voidcallback	method executes on tapping done button.	null
showskipbutton	bool	show the skip button at the bottom of page.	true
pagebuttontextsize	double	set the button text size.	18.0
pagebuttonfontfamily	string	set the font of button text.	default
ontapskipbutton	voidcallback	method executes on tapping skip button.	null
pagebuttontextstyles	textstyle	configure textstyle for skip, done buttons, overrides pagebuttonfontfamily, pagebuttonscolor, pagebuttontextsize.	fontsize: 18.0, color: colors.white
skiptext	text / widget	override skip button text and styles.	text(‘skip’)
donetext	text / widget	override done button text and styles.	text(‘done’)
donebuttonpersist	bool	show done button throughout pages	false
columnmainaxisalignment	mainaxisalignment	control [mainaxisalignment] for column	mainaxisalignment.spacearound
fulltransition	double	adjust scroll distance for full transition	300.0

121

download the full project for this post from the following button

this source is fully free for all time

download as zip