FLUTTER

    Intro screens using flutter package for some material design app

    DeepikaBy Updated:No Comments4 Mins Read

    Intro screens using flutter package – IntroViews- IntroViews 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.

    output

    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'

    YAML

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

    dependencies:
  intro_views_flutter:
    git: git://github.com/aagarwal1012/IntroViews-Flutter

    YAML

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

    Usage

    <img decoding=
    Intro screens using flutter package
    • 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), ); Dart
    • 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", ), ); DartFor 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 attributeDatatypeDescriptionDefault Value
    pageColorColorSet color of the page.Null
    mainImageImage / WidgetSet the main image of the page.Null
    titleText / WidgetSet the title text of the page.Null
    bodyText / WidgetSet the body text of the page.Null
    iconImageAssetPathStringSet the icon image asset path that would be displayed in page bubble.Null
    iconColorColorSet the page bubble icon color.Null
    bubbleBackgroundColorColorSet the page bubble background color.Colors.white / Color(0x88FFFFFF)
    textStyleTextStyleSet TextStyle for both title and bodytitle: color: Colors.white , fontSize: 50.0
    body: color: Colors.white , fontSize: 24.0
    bubbleWidgetSet a custom widget for the inner bubblenull

    IntroViewFlutter Class

    Dart attributeDatatypeDescriptionDefault Value
    pagesListSet the pages of the intro screen.Null
    onTapDoneButtonVoidCallbackMethod executes on tapping done button.Null
    showSkipButtonBoolShow the skip button at the bottom of page.true
    pageButtonTextSizeDoubleSet the button text size.18.0
    pageButtonFontFamilyStringSet the font of button text.Default
    onTapSkipButtonVoidCallbackMethod executes on tapping skip button.null
    pageButtonTextStylesTextStyleConfigure TextStyle for skip, done buttons, overrides pageButtonFontFamily, pageButtonsColor, pageButtonTextSize.fontSize: 18.0, color: Colors.white
    skipTextText / WidgetOverride Skip Button Text and styles.Text(‘SKIP’)
    doneTextText / WidgetOverride Done Button Text and styles.Text(‘DONE’)
    doneButtonPersistBoolShow done Button throughout pagesfalse
    columnMainAxisAlignmentMainAxisAlignmentControl [MainAxisAlignment] for columnMainAxisAlignment.spaceAround
    fullTransitiondoubleAdjust scroll distance for full transition300.0

    Resources Used:

    You can check out the entire code of this App here:

    Get Full Source Code

    View Github

    download source code

    Conclusion

    This was all about a quick go through the basic flutter App UI Screen. If you need any assistance regarding flutter app development, you can consult a flutter developer from FlutterDesk. We would love to be of help. Still, if you feel any difficult while dealing with Flutter app development projects, you can reach out to us or hire Flutter developers to outsource any of your app development project.

    Do like & share my Facebook page. if you find this post helpful. Thank you!!

    Happy coding! 😉

    Related Articles:

    READ MORE

    Share.

    Related Posts

    Leave A Reply