How To Make Onboarding Screen Only One Time - flutter

Question

I wanna make my onboarding screen shown only one time when install application in the device
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:introduction_screen/introduction_screen.dart';
import 'widget_tree.dart';
class IntroScreen extends StatefulWidget {
#override
_IntroScreenState createState() => _IntroScreenState();
}
class _IntroScreenState extends State {
final introKey = GlobalKey();
late final bool isFirstRun;
get child => null;
void onIntroEnd(context) {
Navigator.of(context).push(
MaterialPageRoute(builder: () => WidgetTree()),
);
}
Widget _buildFullscreenImage() {
return Image.asset(
'assets/images/intro1.png',
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
alignment: Alignment.center,
);
}
Widget _buildImage(String assetName, [double width = 350]) {
return Image.asset('assets/$assetName', width: width);
}
#override
Widget build(BuildContext context) {
const bodyStyle = TextStyle(fontSize: 19.0);
const pageDecoration = PageDecoration(
titleTextStyle: TextStyle(
color: Color.fromARGB(255, 29, 116, 182),
fontSize: 30.0,
fontWeight: FontWeight.w700,
fontFamily: 'assets/fonts/Ubuntu-B.ttf'),
bodyTextStyle: bodyStyle,
bodyPadding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 16.0),
pageColor: Color.fromARGB(0, 255, 255, 255),
imagePadding: EdgeInsets.zero,
);
return IntroductionScreen(
key: introKey,
globalBackgroundColor: Colors.white,
globalHeader: const Align(
alignment: Alignment.topRight,
child: SafeArea(
child: Padding(
padding: EdgeInsets.only(top: 16, right: 16),
// child: _buildImage('flutter.png', 100),
),
),
),
/*globalFooter: SizedBox(
width: double.infinity,
height: 60,
child: ElevatedButton(
style:const ButtonStyle(alignment:Alignment(1, 1)),
child: const Text(
'Skip!',
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
onPressed: () => _onIntroEnd(context),
),
),*/
pages: [
PageViewModel(
title: ('WELCOME'),
body:
'To the Mawed , which allows you to book a clinic easily . Choose the hospital that suits you and the doctor you want.',
image: Image.asset(
'assets/images/intro1.png',
width: 400,
height: 400,
fit: BoxFit.fitWidth,
alignment: AlignmentDirectional.bottomCenter,
),
decoration: pageDecoration,
),
PageViewModel(
title: "Book Now",
body: " From your home easly & Keep the ticket to show when asked",
image: Image.asset(
'assets/images/intro2.jpg',
width: 350,
height: 350,
fit: BoxFit.fitWidth,
alignment: AlignmentDirectional.center,
),
decoration: pageDecoration,
),
PageViewModel(
title: "Avoid",
body: "Crowding and wasting time, and go on time.",
image: Image.asset(
'assets/images/intro3.jpg',
width: 350,
height: 350,
fit: BoxFit.fitWidth,
alignment: AlignmentDirectional.center,
),
decoration: pageDecoration,
),
PageViewModel(
title: "Choose the hospital",
body: "That suits & the closest to you",
image: Image.asset(
'assets/images/intro4.jpg',
width: 350,
height: 350,
fit: BoxFit.fitWidth,
alignment: AlignmentDirectional.center,
),
decoration: pageDecoration,
),
PageViewModel(
title: "What do you feel ?",
body: "Choose the clinic or medical specialty carefully",
image: Image.asset('assets/images/intro5.png',
width: 350,
height: 350,
fit: BoxFit.fitWidth,
alignment: AlignmentDirectional.center),
decoration: pageDecoration,
),
PageViewModel(
title: "Get to know ",
body: "Your doctor's appointments and choose the time you want.",
image: Image.asset('assets/images/intro6.png',
width: 400,
height: 400,
fit: BoxFit.fitWidth,
alignment: AlignmentDirectional.bottomCenter),
decoration: pageDecoration,
),
],
onDone: () => _onIntroEnd(context),
onSkip: () => _onIntroEnd(context), // You can override onSkip callback
showSkipButton: false,
skipOrBackFlex: 0,
nextFlex: 0,
showBackButton: true,
//rtl: true, // Display as right-to-left
back: const Icon(Icons.arrow_back),
skip: const Text('Skip', style: TextStyle(fontWeight: FontWeight.w600)),
next: const Icon(Icons.arrow_forward),
done:
const Text('Book Now', style: TextStyle(fontWeight: FontWeight.w600)),
curve: Curves.fastLinearToSlowEaseIn,
controlsMargin: const EdgeInsets.all(16),
controlsPadding: kIsWeb
? const EdgeInsets.all(12.0)
: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
dotsDecorator: const DotsDecorator(
size: Size(10.0, 10.0),
color: Color(0xFFBDBDBD),
activeSize: Size(22.0, 10.0),
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
),
),
dotsContainerDecorator: const ShapeDecoration(
color: Colors.black87,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
),
);
}
}

Answer 1

The common way to handle this is to use the SharedPreferences library
1- When displaying the onboarding, store a bool like hasSeenOnboarding in the SharedPreferences with the value true
2- Right before displaying the onboarding, fetch the bool hasSeenOnboarding from the preferences.
If it's false, you can display the onboarding, otherwise you should skip it

Answer 2

You Can Use this Library
you will be able to save the data locally by configuring it only once