https://github.com/champ96k/flutter_walkthrough_screen
A flutter package that helps the developer in creating a customized onboarding screen of their app.
https://github.com/champ96k/flutter_walkthrough_screen
dart flutter flutter-plugin flutterpackage onboardingscreens packages ui walkthrough
Last synced: 2 days ago
JSON representation
A flutter package that helps the developer in creating a customized onboarding screen of their app.
- Host: GitHub
- URL: https://github.com/champ96k/flutter_walkthrough_screen
- Owner: champ96k
- License: mit
- Created: 2020-12-07T20:16:11.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-14T13:42:04.000Z (over 4 years ago)
- Last Synced: 2025-03-27T00:11:09.987Z (10 months ago)
- Topics: dart, flutter, flutter-plugin, flutterpackage, onboardingscreens, packages, ui, walkthrough
- Language: Dart
- Homepage: https://pub.dev/packages/flutter_walkthrough_screen
- Size: 858 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flutter Walkthrough Screen
A flutter package which help developer in creating a customize onboarding screens of their app.
## Screenshots
## Usage
[Example](https://github.com/champ96k/flutter_walkthrough_screen/tree/main/example)
To use this package :
* add the dependency to your [pubspec.yaml](https://github.com/champ96k/flutter-onboarding-screen/blob/master/pubspec.yaml) file.
```yaml
dependencies:
flutter:
sdk: flutter
flutter_walkthrough_screen:
```
### How to use
```dart
class TestScreen extends StatelessWidget {
/*here we have a list of OnbordingScreen which we want to have, each OnbordingScreen have a imagePath,title and an desc.
*/
final List list = [
OnbordingData(
image: AssetImage("images/pic1.png"),
titleText:Text("This is Title1"),
descText: Text("This is desc1"),
),
OnbordingData(
image: AssetImage("images/pic2.png"),
titleText:Text("This is Title2"),
descText: Text("This is desc2"),
),
OnbordingData(
image: AssetImage("images/pic3.png"),
titleText:Text("This is Title3"),
descText: Text("This is desc4"),
),
OnbordingData(
image: AssetImage("images/pic4.png"),
titleText:Text("This is Title4"),
descText: Text("This is desc4"),
),
];
@override
Widget build(BuildContext context) {
/* remove the back button in the AppBar is to set automaticallyImplyLeading to false
here we need to pass the list and the route for the next page to be opened after this. */
return IntroScreen(
onbordingDataList: list,
colors: [
//list of colors for per pages
Colors.white,
Colors.red,
],
pageRoute: MaterialPageRoute(
builder: (context) => NextPage(),
),
nextButton: Text(
"NEXT",
style: TextStyle(
color: Colors.purple,
),
),
lastButton: Text(
"GOT IT",
style: TextStyle(
color: Colors.purple,
),
),
skipButton: Text(
"SKIP",
style: TextStyle(
color: Colors.purple,
),
),
selectedDotColor: Colors.orange,
unSelectdDotColor: Colors.grey,
);
}
}
```
# Customize your onboarding screen design
Background color | Background gradient color
:-------------------------:|:-------------------------:
 | 
Last page button | Next page button
:-------------------------:|:-------------------------:
 | 
Skip button | Define next page route
:-------------------------:|:-------------------------:
 | 
Selected dot Color | Unselected dot Color
:-------------------------:|:-------------------------:
 | 
### Created & Maintained By
[Tushar Nikam](http://tusharnikam.ml/)
