Code Monkey home page Code Monkey logo

calebdeji / flutter_showcaseview Goto Github PK

View Code? Open in Web Editor NEW

This project forked from simformsolutionspvtltd/flutter_showcaseview

0.0 0.0 0.0 10.67 MB

Flutter plugin that allows you to showcase your features on flutter application. ๐Ÿ‘Œ๐Ÿ”๐ŸŽ‰

Home Page: https://pub.dev/packages/showcaseview

License: MIT License

Shell 0.80% C++ 17.79% C 0.61% Objective-C 0.03% Kotlin 0.09% Dart 66.64% Swift 0.75% HTML 2.73% CMake 10.56%

flutter_showcaseview's Introduction

Showcaes View - Simform LLC.

ShowCaseView

Build showcaseview

A Flutter package allows you to Showcase/Highlight your widgets step by step.

Preview

The example app running in Android

Migration guide for release 2.0.0

Renamed properties/fields of widgets mentioned below in the table.

Before After
autoPlayLockEnable enableAutoPlayLock
shapeBorder targetShapeBorder
showcaseBackgroundColor tooltipBackgroundColor
contentPadding tooltipPadding
overlayPadding targetPadding
radius targetBorderRadius
tipBorderRadius tooltipBorderRadius
disableAnimation disableMovingAnimation
animationDuration movingAnimationDuration

Removed unused parameter of Showcase.withWidget() mentioned below:

  • title
  • titleAlignment
  • titleTextStyle
  • description
  • descriptionAlignment
  • descTextStyle
  • textColor
  • tooltipBackgroundColor
  • tooltipBorderRadius
  • tooltipPadding

Installing

  1. Add dependency to pubspec.yaml

    Get the latest version in the 'Installing' tab on pub.dev

dependencies:
    showcaseview: <latest-version>
  1. Import the package
import 'package:showcaseview/showcaseview.dart';
  1. Adding a ShowCaseWidget widget.
ShowCaseWidget(
  builder: Builder(
    builder : (context)=> Somewidget()
  ),
),
  1. Adding a Showcase widget.
GlobalKey _one = GlobalKey();
GlobalKey _two = GlobalKey();
GlobalKey _three = GlobalKey();

...

Showcase(
  key: _one,
  title: 'Menu',
  description: 'Click here to see menu options',
  child: Icon(
    Icons.menu,
    color: Colors.black45,
  ),
),

Showcase.withWidget(
  key: _three,
  height: 80,
  width: 140,
  targetShapeBorder: CircleBorder(),
  container: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      ...
    ],
  ),
  child: ...,
),
  1. Starting the ShowCase
someEvent(){
    ShowCaseWidget.of(context).startShowCase([_one, _two, _three]);
}

If you want to start the ShowCaseView as soon as your UI built up then use below code.

WidgetsBinding.instance.addPostFrameCallback((_) =>
  ShowCaseWidget.of(context).startShowCase([_one, _two, _three])
);

Functions of ShowCaseWidget.of(context):

Function Name Description
startShowCase(List widgetIds) Starting the showcase
next() Starts next showcase
previous() Starts previous showcase
dismiss() Dismisses all showcases

Properties of ShowCaseWidget:

Name Type Default Behaviour Description
blurValue double 0 Provides blur effect on overlay
autoPlay bool false Automatically display Next showcase
autoPlayDelay Duration Duration(milliseconds: 2000) Visibility time of showcase when autoplay is enabled
enableAutoPlayLock bool false Block the user interaction on overlay when autoPlay is enabled.
enableAutoScroll bool false Allows to auto scroll to next showcase so as to make the given target visible.
scrollDuration Duration Duration(milliseconds: 300) Time duration for auto scrolling
disableBarrierInteraction bool false Disable barrier interaction
disableScaleAnimation bool false Disable scale transition for all showcases
disableMovingAnimation bool false Disable bouncing/moving transition for all showcases
onStart Function(int?, GlobalKey)? Triggered on start of each showcase.
onComplete Function(int?, GlobalKey)? Triggered on completion of each showcase.
onFinish VoidCallback? Triggered when all the showcases are completed
enableShowcase bool true Enable or disable showcase globally.

Properties of Showcase and Showcase.withWidget:

Name Type Default Behaviour Description Showcase ShowCaseWidget
key GlobalKey Unique Global key for each showcase. โœ… โœ…
child Widget The Target widget that you want to be showcased โœ… โœ…
title String? Title of default tooltip โœ…
description String? Description of default tooltip โœ…
container Widget? Allows to create custom tooltip widget. โœ…
height double? Height of custom tooltip widget โœ…
width double? Width of custom tooltip widget โœ…
titleTextStyle TextStyle? Text Style of title โœ…
descTextStyle TextStyle? Text Style of description โœ…
titleAlignment TextAlign TextAlign.start Alignment of title โœ…
descriptionAlignment TextAlign TextAlign.start Alignment of description โœ…
targetShapeBorder ShapeBorder If targetBorderRadius param is not provided then it applies shape border to target widget โœ… โœ…
targetBorderRadius BorderRadius? Border radius of target widget โœ… โœ…
tooltipBorderRadius BorderRadius? BorderRadius.circular(8.0) Border radius of tooltip โœ…
blurValue double? ShowCaseWidget.blurValue Gaussian blur effect on overlay โœ… โœ…
tooltipPadding EdgeInsets EdgeInsets.symmetric(vertical: 8, horizontal: 8) Padding to tooltip content โœ…
targetPadding EdgeInsets EdgeInsets.zero Padding to target widget โœ… โœ…
overlayOpacity double 0.75 Opacity of overlay layer โœ… โœ…
overlayColor Color Colors.black45 Color of overlay layer โœ… โœ…
tooltipBackgroundColor Color Colors.white Background Color of default tooltip โœ…
textColor Color Colors.black Color of tooltip text โœ…
scrollLoadingWidget Widget Loading widget on overlay until active showcase is visible to viewport when autoScroll is enable โœ… โœ…
movingAnimationDuration Duration Duration(milliseconds: 2000) Duration of time this moving animation should last. โœ… โœ…
showArrow bool true Shows tooltip with arrow โœ…
disableDefaultTargetGestures bool false disable default gestures of target widget โœ… โœ…
disposeOnTap bool? false Dismiss all showcases on target/tooltip tap โœ… โœ…
disableMovingAnimation bool? ShowCaseWidget.disableMovingAnimation Disable bouncing/moving transition โœ… โœ…
disableScaleAnimation bool? ShowCaseWidget.disableScaleAnimation Disable initial scale transition when showcase is being started and completed โœ…
scaleAnimationDuration Duration Duration(milliseconds: 300) Duration of time scale animation should last. โœ…
scaleAnimationCurve Curve Curves.easeIn Curve to use in scale animation. โœ…
scaleAnimationAlignment Alignment? Origin of the coordinate in which the scale takes place, relative to the size of the box. โœ…
onToolTipClick VoidCallback? Triggers when tooltip is being clicked. โœ…
onTargetClick VoidCallback? Triggers when target widget is being clicked โœ… โœ…
onTargetDoubleTap VoidCallback? Triggers when target widget is being double clicked โœ… โœ…
onTargetLongPress VoidCallback? Triggers when target widget is being long pressed โœ… โœ…
onBarrierClick VoidCallback? Triggers when barrier is clicked โœ… โœ…
tooltipPosition TooltipPosition? Defines vertical position of tooltip respective to Target widget โœ… โœ…
titlePadding EdgeInsets? EdgeInsets.zero Padding to title โœ…
descriptionPadding EdgeInsets? EdgeInsets.zero Padding to description โœ…
titleTextDirection TextDirection? Give textDirection to title โœ…
descriptionTextDirection TextDirection? Give textDirection to description โœ…

How to use

Check out the example app in the example directory or the 'Example' tab on pub.dartlang.org for a more complete example.

Scrolling to active showcase

Auto Scrolling to active showcase feature will not work properly in scroll views that renders widgets on demand(ex, ListView, GridView).

In order to scroll to a widget it needs to be attached with widget tree. So, If you are using a scrollview that renders widgets on demand, it is possible that the widget on which showcase is applied is not attached in widget tree. So, flutter won't be able to scroll to that widget.

So, If you want to make a scroll view that contains less number of children widget then prefer to use SingleChildScrollView.

If using SingleChildScrollView is not an option, then you can assign a ScrollController to that scrollview and manually scroll to the position where showcase widget gets rendered. You can add that code in onStart method of ShowCaseWidget.

Example,

// This controller will be assigned to respected sctollview.
final _controller = ScrollController();

ShowCaseWidget(
  onStart: (index, key) {
    if(index == 0) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
       // If showcase widget is at offset 1000 in the listview.
       // If you don't know the exact position of the showcase widget,
       // You can provide nearest possible location.
       // 
       // In this case providing 990 instead of 1000 will work as well.
        _controller.jumpTo(1000);
      });
    }
  },
);

Main Contributors


Birju Vachhani

Devarsh Ranpara

Ankit Panchal

Kashifa Laliwala

Vatsal Tanna

Sanket Kachhela

Parth Baraiya

Shweta Chauhan

Mehul Kabaria

Dhaval Kansara

Happy Makadiya

Ujas Majithiya

License

MIT License

Copyright (c) 2021 Simform Solutions

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

flutter_showcaseview's People

Contributors

birjuvachhani avatar vatsaltanna avatar devarshranpara-simformsolutions avatar parthbaraiya avatar simform-solutions avatar happymakadiyas avatar sanket-simform avatar devarshranpara avatar shwetachauhan18 avatar ujas-m-simformsolutions avatar nilsreichardt avatar meetjanani avatar vatsaltanna-simformsolutions avatar vipulasri avatar faiyaz-shaikh avatar mehulkk avatar kashifalaliwala avatar fynntimes avatar dhvanit-v-simformsolutions avatar dhaval-k-simformsolutions avatar dhavalrkansara avatar ankitpanchal10 avatar npvaddoriya avatar robertheim avatar pablojimpas avatar p-b1101 avatar prbaraiya avatar skaldek avatar mehulksimform avatar meetjanani-simformsolutions avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.