admin/linkding-ios
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Ui improvements for tablet mode

Browse Source
This commit is contained in:
Juan Gilsanz Polo
2024-02-28 18:25:48 +01:00
parent 55c8901eb0
commit c777ccbbca
5 changed files with 195 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
lib/screens/onboarding/ui/onboarding.dart
View File

@@ -7,6 +7,7 @@ import 'package:linkdy/screens/onboarding/ui/server_required.dart';
import 'package:linkdy/screens/onboarding/ui/welcome.dart';
import 'package:linkdy/widgets/system_overlay_style.dart';
import 'package:linkdy/config/sizes.dart';
import 'package:linkdy/constants/global_keys.dart';
class Onboarding extends ConsumerWidget {
@@ -19,14 +20,41 @@ class Onboarding extends ConsumerWidget {
key: ScaffoldMessengerKeys.onboarding,
child: Scaffold(
body: SafeArea(
child: PageView(
controller: ref.watch(onboardingProvider).pageController,
physics: const NeverScrollableScrollPhysics(),
children: const [
OnboardingWelcome(),
OnboardingServerRequired(),
OnboardingConnect(),
],
child: LayoutBuilder(
builder: (context, constraints) {
return Center(
child: ConstrainedBox(
constraints: constraints.maxWidth > Sizes.tabletBreakpoint
? const BoxConstraints(maxWidth: 500, maxHeight: 600)
: const BoxConstraints.expand(),
child: Container(
decoration: constraints.maxWidth > Sizes.tabletBreakpoint
? BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(28),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: const Offset(0, 3), // changes position of shadow
),
],
)
: null,
child: PageView(
controller: ref.watch(onboardingProvider).pageController,
physics: const NeverScrollableScrollPhysics(),
children: const [
OnboardingWelcome(),
OnboardingServerRequired(),
OnboardingConnect(),
],
),
),
),
);
},
),
),
),

111
lib/screens/onboarding/ui/welcome.dart
View File

@@ -5,76 +5,77 @@ import 'package:linkdy/i18n/strings.g.dart';
import 'package:linkdy/screens/onboarding/provider/onboarding.provider.dart';
class OnboardingWelcome extends ConsumerWidget {
const OnboardingWelcome({Key? key}) : super(key: key);
const OnboardingWelcome({super.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,
return LayoutBuilder(
builder: (context, constraints) {
return Padding(
padding: const EdgeInsets.all(24),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset(
'assets/icon/icon1024.png',
width: 50,
height: 50,
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/icon/icon1024.png',
width: 50,
height: 50,
),
const SizedBox(height: 24),
Text(
t.onboarding.title,
style: const TextStyle(fontSize: 28),
),
const SizedBox(height: 16),
Text(
t.onboarding.subtitle,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
const SizedBox(height: 24),
Text(
t.onboarding.title,
style: const TextStyle(fontSize: 28),
),
const SizedBox(height: 16),
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),
],
),
),
],
),
],
),
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: constraints.maxWidth > constraints.maxHeight
? constraints.maxHeight
: constraints.maxWidth - 48,
color: Theme.of(context).colorScheme.secondary.withOpacity(0.2),
),
],
),
),
],
),
Center(
child: Transform.rotate(
angle: 0.7,
child: Icon(
Icons.link_rounded,
size: iconSize - 48,
color: Theme.of(context).colorScheme.secondary.withOpacity(0.2),
),
),
),
],
),
);
},
);
}
}