flutter_onboarding_screen_adaptive

Description:

flutter onboarding screen adaptive

Onboarding Screen #
The Onboarding Screen is a Flutter package that provides a customizable onboarding experience for new users. It includes a series of pages with navigation controls and animations, designed to introduce users to the app's features in a user-friendly manner.
Created by @badiniibrahim #
Liked some of my work? Buy me a coffee. Thanks for your support ❤️

Screenshot #


IOS



Android



Features #

Horizontal page navigation with swipe gestures.
Progress indicators to show the current onboarding page.
"Next" and "Skip" buttons for user convenience.
Animated transitions between pages.
Built with GetX for efficient state management.

Getting Started #
Add the dependency to your pubspec.yaml file:
dependencies:
...
flutter_onboarding_screen_adaptive: latest_version
copied to clipboard
Here's a complete example showcasing the usage of the Onboarding Screen: #
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: OnboardingScreen(
pages: [
PageOne(),
PageTwo(),
PageThree(),
],
onSkipSelected: () {
// Handle skip action
},
onGetStarted: () {
// Handle get started action
},
selectedColor: Colors.blue,
unselectedColor: Colors.grey,
indicatorSize: 20.0,
skipText: "Skip",
btnBackgroundColor: Colors.blue,
),
);
}
}

class PageOne extends StatelessWidget {
const PageOne({super.key});

@override
Widget build(BuildContext context) {
return Column(children: [
Image.asset(
"assets/images/1.png",
),
const Center(
child: Text(
'Best choice for everyone.',
style: TextStyle(
fontSize: 30,
color: Colors.black,
fontFamily: 'Gilroy',
),
),
)
]);
}
}

class PageTwo extends StatelessWidget {
const PageTwo({super.key});

@override
Widget build(BuildContext context) {
return Column(children: [
Image.asset(
"assets/images/2.png",
),
const Center(
child: Text(
textAlign: TextAlign.center,
'Teachers & Learners',
style: TextStyle(
fontSize: 30,
color: Colors.black,
fontFamily: 'Gilroy',
),
),
)
]);
}
}

class PageThree extends StatelessWidget {
const PageThree({super.key});

@override
Widget build(BuildContext context) {
return Column(children: [
const Center(
child: Text(
textAlign: TextAlign.center,
'Best platform for both.Anywhere. Accelerate Your Future and beyond.',
style: TextStyle(
fontSize: 30,
color: Colors.black,
fontFamily: 'Gilroy',
),
),
),
Image.asset(
"assets/images/3.png",
),
]);
}
}

copied to clipboard
Figma link for example #

https://www.figma.com/design/J5yekPKDtYcAwU1z6ASFdX/E-learning-App-Onboarding-(Community)?node-id=1-15&t=Pv1ZRi6EscMIPG5U-0

Parameters #

pages: (required) - A list of widgets representing the onboarding pages.
selectedColor: The color of the selected page indicator. Default is Colors.blue.
unselectedColor: Color - The color of the unselected page indicators. Default is Colors.grey.
indicatorSize:double - The size of the page indicators. Default is 20.0.
skipText:String - The text for the skip button. Default is "Skip".
onSkipSelected: Function() - Callback when the skip button is pressed.
btnBackgroundColor: Color - The background color of the navigation buttons. Default is Colors.blue.
onGetStarted: Function() - Callback when the get started button is pressed.

LinkedIn #
Connect with me on LinkedIn