Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aagarwal1012/IntroViews-Flutter
βοΈ A Flutter package for some material design app intro screens with some cool animations.
https://github.com/aagarwal1012/IntroViews-Flutter
dart flutter flutter-package hacktoberfest intro-screen intro-views material-design material-ui onboarding page-reveal welcome-page
Last synced: 27 days ago
JSON representation
βοΈ A Flutter package for some material design app intro screens with some cool animations.
- Host: GitHub
- URL: https://github.com/aagarwal1012/IntroViews-Flutter
- Owner: aagarwal1012
- License: mit
- Created: 2018-06-11T06:55:06.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T17:49:26.000Z (9 months ago)
- Last Synced: 2024-05-20T23:25:22.445Z (about 2 months ago)
- Topics: dart, flutter, flutter-package, hacktoberfest, intro-screen, intro-views, material-design, material-ui, onboarding, page-reveal, welcome-page
- Language: Dart
- Homepage: https://introviews-flutter.web.app
- Size: 8.87 MB
- Stars: 661
- Watchers: 23
- Forks: 141
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-material-design - IntroViews-Flutter - Nice intro animations and screens using material design (Flutter / Components)
- awesome-stars - IntroViews-Flutter
README
IntroViews is inspired by [Paper Onboarding](https://github.com/Ramotion/paper-onboarding-android) and developed with `love` from scratch. Checkout our fully responsive [live example app](https://introviews-flutter.web.app/).
# Table of contents
* [Features](#features)
* [Getting Started](#getting-started)
* [Usage](#usage)
* [Documentation](#documentaion)
* [PageViewModel Class](#pageViewModel-class)
* [IntroViewFlutter Class](#introViewFlutter-class)
* [Bugs or Requests](#bugs-or-requests)
* [Donate](#donate)
* [Contributors](#contributors)
* [License](#license)
# 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.
```yaml
dependencies:
intro_views_flutter: '^3.2.0'
```
You can also reference the git repository directly if you want:
```yaml
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.
```dart
import 'package:intro_views_flutter/intro_views_flutter.dart';
...
final page = PageViewModel(
pageColor: const Color(0xFF607D8B),
iconImageAssetPath: 'assets/taxi-driver.png',
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,
),
titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
);
```
- Now refer the code below to get the `IntroViewsFlutter` widget.
```dart
final Widget introViews = IntroViewsFlutter(
page,
onTapDoneButton: () {
// Void Callback
},
showSkipButton: true,
pageButtonTextStyles: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'Regular',
),
);
```
For further usage refer the [`example`](https://github.com/aagarwal1012/IntroViews-Flutter/tree/master/example/lib) available.
For `Landscape` preview click the [link](https://github.com/aagarwal1012/IntroViews-Flutter/blob/master/display/landscape2.png?raw=true).
**_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 |
| pageBackground | Widget | Set a widget as a background of the whole page (pageColor has priority) | Null |
| mainImage | Image / Widget | Set the main image of the page. If null, then the widget is omitted. | - |
| title | Text / Widget | Set the title text of the page. If null, then the widget is omitted. | - |
| body | Text / Widget | Set the body text of the page. If null, then the widget is omitted. | - |
| 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` |
| titleTextStyle | TextStyle | Set TextStyle for title | `color: Colors.white , fontSize: 50.0` |
| bodyTextStyle | TextStyle | Set TextStyle for 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. | (required) |
| onTapDoneButton | VoidCallback? | Method executes on tapping done button. | Null |
| onTapBackButton | VoidCallback? | Method executes on tapping back button. | Null |
| onTapNextButton | VoidCallback? | Method executes on tapping next button. | Null |
| showSkipButton | bool | Show the skip button at the bottom of page. | true |
| showBackButton | bool | Show the Back button at the bottom of page. Overrides showSkipButton starting from the second page | false |
| showNextButton | bool | Show the Next button at the bottom of page. Overrides doneButtonPersist. | false |
| pageButtonTextSize | double | Set the button text size. | 18.0 |
| pageButtonFontFamily | String? | Set the font of button text. | Null |
| 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') |
| backText | Text / Widget | Override Back Button Text and styles. | Text('BACK') |
| nextText | Text / Widget | Override Next Button Text and styles. | Text('NEXT') |
| 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 |
| background | Color? | Set the background color to Colors.transparent if you have your own background image below | Null |
For help on editing package code, view the [flutter documentation](https://flutter.io/developing-packages/).
# Bugs or Requests
If you encounter any problems feel free to open an [issue](https://github.com/aagarwal1012/IntroViews-Flutter/issues/new?template=bug_report.md). If you feel the library is missing a feature, please raise a [ticket](https://github.com/aagarwal1012/IntroViews-Flutter/issues/new?template=feature_request.md) on GitHub and I'll look into it. Pull request are also welcome.
See [Contributing.md](https://github.com/aagarwal1012/IntroViews-Flutter/blob/master/CONTRIBUTING.md).
# Donate
> If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of :coffee:
>
> - [PayPal](https://www.paypal.me/aagarwal1012/)
# Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Tal Jacobson
π§ π π
marloncepeda
π
Kravchenko Igor
π
SiDevesh
π€
Slawa Pidgorny
π€
Haider Al-Tahan
π€
Newerton
π
Kenneth GulbrandsΓΈy
π β οΈ
Sahil Kumar
β οΈ
Rodrigo Boratto
π
RKKgithub
π»
Sudipta Dutta
π
MatΔj Ε½Γdek
π π» π¦ π§ π€ π
ride4sun
π»
zognotadog
π»
Jayson
π
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! See [Contributing.md](https://github.com/aagarwal1012/IntroViews-Flutter/blob/master/CONTRIBUTING.md).
# License
**IntroViews-Flutter** is licensed under `MIT license`.