flutter/apidash
1
0
Fork 0
mirror of https://github.com/foss42/apidash.git synced 2025-12-01 10:17:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #671 from Udhay-Adithya/add-feature-onboarding-screen

Browse Source 
feat: add onboarding screen (#651)
This commit is contained in:
Ankit Mahato
2025-04-01 07:17:16 +05:30
committed by GitHub
parent 3c022f8edf 1b45397194
commit 2b8a951104
11 changed files with 289 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/screens/mobile/mobile.dart
View File

@@ -1 +1,2 @@
export 'dashboard.dart';
export 'onboarding_screen.dart';

170
lib/screens/mobile/onboarding_screen.dart Normal file
View File

@@ -0,0 +1,170 @@
import 'package:apidash/consts.dart';
import 'package:apidash/screens/mobile/widgets/onboarding_slide.dart';
import 'package:apidash/screens/screens.dart';
import 'package:apidash/services/services.dart';
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class OnboardingScreen extends StatefulWidget {
const OnboardingScreen({super.key});
@override
State<OnboardingScreen> createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
int currentPageIndex = 0;
final CarouselSliderController _carouselController =
CarouselSliderController();
void _onNextPressed() {
if (currentPageIndex < 2) {
_carouselController.nextPage(
duration: const Duration(milliseconds: 600),
curve: Curves.ease,
);
} else {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => MobileDashboard(),
),
(route) => false,
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.surface,
actions: [
TextButton(
onPressed: () async {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => MobileDashboard(),
),
(route) => false,
);
await setOnboardingStatusToSharedPrefs(
isOnboardingComplete: true,
);
},
child: const Text(
'Skip',
),
),
],
),
body: Container(
color: Theme.of(context).colorScheme.surface,
child: Column(
children: [
Expanded(
child: CarouselSlider(
carouselController: _carouselController,
options: CarouselOptions(
height: MediaQuery.of(context).size.height * 0.75,
viewportFraction: 1.0,
enableInfiniteScroll: false,
onPageChanged: (index, reason) {
setState(() {
currentPageIndex = index;
});
},
),
items: [
OnboardingSlide(
context: context,
assetPath: kAssetApiServerLottie,
assetSize: context.width * 0.75,
title: "Test APIs with Ease",
description:
"Send requests, preview responses, and test APIs with ease. REST and GraphQL support included!",
),
OnboardingSlide(
context: context,
assetPath: kAssetFolderLottie,
assetSize: context.width * 0.55,
title: "Organize & Save Requests",
description:
"Save and organize API requests into collections for quick access and better workflow.",
),
OnboardingSlide(
context: context,
assetPath: kAssetGenerateCodeLottie,
assetSize: context.width * 0.65,
title: "Generate Code Instantly",
description:
"Integrate APIs using well tested code generators for JavaScript, Python, Dart, Kotlin & others.",
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 36.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(3, (index) {
bool isSelected = currentPageIndex == index;
return GestureDetector(
onTap: () {
_carouselController.animateToPage(index);
},
child: AnimatedContainer(
width: isSelected ? 40 : 18,
height: 7,
margin: const EdgeInsets.symmetric(horizontal: 3),
decoration: BoxDecoration(
color: isSelected
? Theme.of(context).colorScheme.primary
: Theme.of(context)
.colorScheme
.secondaryContainer,
borderRadius: BorderRadius.circular(9),
),
duration: const Duration(milliseconds: 300),
),
);
}),
),
),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: IconButton(
onPressed: () async {
_onNextPressed();
if (currentPageIndex == 2) {
await setOnboardingStatusToSharedPrefs(
isOnboardingComplete: true,
);
}
},
icon: const Icon(
Icons.arrow_forward_rounded,
size: 30,
),
style: IconButton.styleFrom(
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35),
),
),
),
),
],
),
const SizedBox(height: 60),
],
),
),
);
}
}

70
lib/screens/mobile/widgets/onboarding_slide.dart Normal file
View File

@@ -0,0 +1,70 @@
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class OnboardingSlide extends StatelessWidget {
final BuildContext context;
final String assetPath;
final double assetSize;
final String title;
final String description;
const OnboardingSlide({
required this.context,
required this.assetPath,
required this.assetSize,
required this.title,
required this.description,
super.key,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 75.0),
child: Center(
child: Lottie.asset(
assetPath,
renderCache: RenderCache.drawingCommands,
width: assetSize,
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.primary,
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 16,
),
child: Text(
description,
textAlign: TextAlign.center,
style: kTextStyleButton.copyWith(fontSize: 16),
),
),
const SizedBox(
height: 70,
)
],
),
],
);
}
}