Created onboarding

This commit is contained in:
Juan Gilsanz Polo
2024-02-22 02:11:10 +01:00
parent d9a82ec1fa
commit 36f9332f61
23 changed files with 538 additions and 43 deletions

View File

@@ -0,0 +1,29 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:my_linkding/screens/onboarding/provider/onboarding.provider.dart';
import 'package:my_linkding/screens/onboarding/ui/server_required.dart';
import 'package:my_linkding/screens/onboarding/ui/welcome.dart';
import 'package:my_linkding/widgets/system_overlay_style.dart';
class Onboarding extends ConsumerWidget {
const Onboarding({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return OverlayStyle(
child: Scaffold(
body: SafeArea(
child: PageView(
controller: ref.watch(onboardingProvider).pageController,
physics: const NeverScrollableScrollPhysics(),
children: const [
OnboardingWelcome(),
OnboardingServerRequired(),
],
),
),
),
);
}
}

View File

@@ -0,0 +1,132 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:my_linkding/screens/onboarding/provider/onboarding.provider.dart';
import 'package:my_linkding/i18n/strings.g.dart';
class OnboardingServerRequired extends ConsumerWidget {
const OnboardingServerRequired({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: ListView(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.dns_rounded,
size: 50,
color: Theme.of(context).colorScheme.primary,
),
const SizedBox(height: 24),
Text(
t.onboarding.serverRequired,
style: const TextStyle(fontSize: 28),
),
const SizedBox(height: 8),
Text(
t.onboarding.serverRequiredDescription,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
Container(height: 24),
Card(
child: InkWell(
onTap: () => {},
borderRadius: BorderRadius.circular(10),
child: Padding(
padding: const EdgeInsets.all(24),
child: Row(
children: [
SvgPicture.asset(
'assets/resources/github.svg',
color: Theme.of(context).colorScheme.primary,
width: 40,
height: 40,
),
const SizedBox(width: 24),
Flexible(
child: Text(
t.onboarding.installationInstructions,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
),
),
const SizedBox(height: 8),
],
),
),
Column(
children: [
ListTile(
contentPadding: const EdgeInsets.all(8),
leading: Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
value: ref.watch(onboardingProvider).confirmServerRunning,
onChanged: (_) => ref.read(onboardingProvider.notifier).confirmServerRunning(),
),
title: Text(
t.onboarding.serverRunningConfirmation,
style: const TextStyle(fontSize: 14),
),
onTap: () => ref.read(onboardingProvider.notifier).confirmServerRunning(),
),
const SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FilledButton(
onPressed: () => ref.read(onboardingProvider.notifier).previousPage(),
child: Row(
children: [
const Icon(Icons.arrow_back_rounded),
const SizedBox(width: 8),
Text(t.onboarding.previous),
],
),
),
FilledButton(
onPressed: ref.watch(onboardingProvider).confirmServerRunning == true
? () => ref.read(onboardingProvider.notifier).nextPage()
: null,
child: Row(
children: [
Text(t.onboarding.next),
const SizedBox(width: 8),
const Icon(Icons.arrow_forward_rounded),
],
),
),
],
),
],
),
],
),
);
}
}

View File

@@ -0,0 +1,79 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:my_linkding/i18n/strings.g.dart';
import 'package:my_linkding/screens/onboarding/provider/onboarding.provider.dart';
class OnboardingWelcome extends ConsumerWidget {
const OnboardingWelcome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
final iconSize = width > height ? height : width;
return Padding(
padding: const EdgeInsets.all(24),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
height: 50,
color: Colors.red,
),
const SizedBox(height: 24),
Text(
t.onboarding.title,
style: const TextStyle(fontSize: 28),
),
const SizedBox(height: 8),
Text(
t.onboarding.subtitle,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(),
FilledButton(
onPressed: () => ref.read(onboardingProvider.notifier).nextPage(),
child: Row(
children: [
Text(t.onboarding.start),
const SizedBox(width: 8),
const Icon(Icons.arrow_forward_rounded),
],
),
),
],
),
],
),
Center(
child: Transform.rotate(
angle: 0.7,
child: Icon(
Icons.link_rounded,
size: iconSize - 48,
color: Theme.of(context).colorScheme.secondary.withOpacity(0.2),
),
),
),
],
),
);
}
}