Ui improvements for tablet mode
This commit is contained in:
3
lib/config/sizes.dart
Normal file
3
lib/config/sizes.dart
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
class Sizes {
|
||||||
|
static int tabletBreakpoint = 800;
|
||||||
|
}
|
||||||
@@ -1,5 +1,3 @@
|
|||||||
import 'dart:io';
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
import 'package:easy_autocomplete/easy_autocomplete.dart';
|
import 'package:easy_autocomplete/easy_autocomplete.dart';
|
||||||
@@ -8,17 +6,16 @@ import 'package:linkdy/screens/bookmarks/provider/bookmark_form.provider.dart';
|
|||||||
import 'package:linkdy/widgets/section_label.dart';
|
import 'package:linkdy/widgets/section_label.dart';
|
||||||
|
|
||||||
import 'package:linkdy/models/data/bookmarks.dart';
|
import 'package:linkdy/models/data/bookmarks.dart';
|
||||||
|
import 'package:linkdy/config/sizes.dart';
|
||||||
import 'package:linkdy/i18n/strings.g.dart';
|
import 'package:linkdy/i18n/strings.g.dart';
|
||||||
import 'package:linkdy/constants/global_keys.dart';
|
import 'package:linkdy/constants/global_keys.dart';
|
||||||
import 'package:linkdy/constants/enums.dart';
|
import 'package:linkdy/constants/enums.dart';
|
||||||
|
|
||||||
class BookmarkFormModal extends ConsumerStatefulWidget {
|
class BookmarkFormModal extends ConsumerStatefulWidget {
|
||||||
final bool fullscreen;
|
|
||||||
final Bookmark? bookmark;
|
final Bookmark? bookmark;
|
||||||
|
|
||||||
const BookmarkFormModal({
|
const BookmarkFormModal({
|
||||||
super.key,
|
super.key,
|
||||||
required this.fullscreen,
|
|
||||||
this.bookmark,
|
this.bookmark,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -37,6 +34,56 @@ class BookmarkFormModalState extends ConsumerState<BookmarkFormModal> {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final width = MediaQuery.of(context).size.width;
|
||||||
|
|
||||||
|
if (width > Sizes.tabletBreakpoint) {
|
||||||
|
return ScaffoldMessenger(
|
||||||
|
key: ScaffoldMessengerKeys.addBookmark,
|
||||||
|
child: Dialog(
|
||||||
|
child: ConstrainedBox(
|
||||||
|
constraints: const BoxConstraints(maxWidth: 500, maxHeight: 700),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
CloseButton(
|
||||||
|
onPressed: () => Navigator.pop(context),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 16),
|
||||||
|
Text(
|
||||||
|
widget.bookmark != null
|
||||||
|
? t.bookmarks.addBookmark.editBookmark
|
||||||
|
: t.bookmarks.addBookmark.addBookmark,
|
||||||
|
style: const TextStyle(fontSize: 24),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
IconButton(
|
||||||
|
onPressed: ref.watch(bookmarkFormProvider).checkBookmark != null
|
||||||
|
? () => ref.read(bookmarkFormProvider.notifier).saveBookmark()
|
||||||
|
: null,
|
||||||
|
icon: const Icon(Icons.save_rounded),
|
||||||
|
tooltip: t.generic.save,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: ListView(
|
||||||
|
children: const [_ModalContent()],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
return ScaffoldMessenger(
|
return ScaffoldMessenger(
|
||||||
key: ScaffoldMessengerKeys.addBookmark,
|
key: ScaffoldMessengerKeys.addBookmark,
|
||||||
child: Dialog.fullscreen(
|
child: Dialog.fullscreen(
|
||||||
@@ -93,6 +140,7 @@ class BookmarkFormModalState extends ConsumerState<BookmarkFormModal> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class _ModalContent extends ConsumerWidget {
|
class _ModalContent extends ConsumerWidget {
|
||||||
const _ModalContent();
|
const _ModalContent();
|
||||||
@@ -377,7 +425,7 @@ void openBookmarkFormModal({
|
|||||||
}) {
|
}) {
|
||||||
showGeneralDialog(
|
showGeneralDialog(
|
||||||
context: context,
|
context: context,
|
||||||
barrierColor: !(width > 700 || !(Platform.isAndroid || Platform.isIOS)) ? Colors.transparent : Colors.black54,
|
barrierColor: Colors.black54,
|
||||||
transitionBuilder: (context, anim1, anim2, child) {
|
transitionBuilder: (context, anim1, anim2, child) {
|
||||||
return SlideTransition(
|
return SlideTransition(
|
||||||
position: Tween(begin: const Offset(0, 1), end: const Offset(0, 0)).animate(
|
position: Tween(begin: const Offset(0, 1), end: const Offset(0, 0)).animate(
|
||||||
@@ -386,9 +434,6 @@ void openBookmarkFormModal({
|
|||||||
child: child,
|
child: child,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
pageBuilder: (context, animation, secondaryAnimation) => BookmarkFormModal(
|
pageBuilder: (context, animation, secondaryAnimation) => const BookmarkFormModal(),
|
||||||
fullscreen: width <= 700,
|
|
||||||
bookmark: bookmark,
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import 'package:linkdy/screens/onboarding/ui/server_required.dart';
|
|||||||
import 'package:linkdy/screens/onboarding/ui/welcome.dart';
|
import 'package:linkdy/screens/onboarding/ui/welcome.dart';
|
||||||
import 'package:linkdy/widgets/system_overlay_style.dart';
|
import 'package:linkdy/widgets/system_overlay_style.dart';
|
||||||
|
|
||||||
|
import 'package:linkdy/config/sizes.dart';
|
||||||
import 'package:linkdy/constants/global_keys.dart';
|
import 'package:linkdy/constants/global_keys.dart';
|
||||||
|
|
||||||
class Onboarding extends ConsumerWidget {
|
class Onboarding extends ConsumerWidget {
|
||||||
@@ -19,6 +20,28 @@ class Onboarding extends ConsumerWidget {
|
|||||||
key: ScaffoldMessengerKeys.onboarding,
|
key: ScaffoldMessengerKeys.onboarding,
|
||||||
child: Scaffold(
|
child: Scaffold(
|
||||||
body: SafeArea(
|
body: SafeArea(
|
||||||
|
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(
|
child: PageView(
|
||||||
controller: ref.watch(onboardingProvider).pageController,
|
controller: ref.watch(onboardingProvider).pageController,
|
||||||
physics: const NeverScrollableScrollPhysics(),
|
physics: const NeverScrollableScrollPhysics(),
|
||||||
@@ -30,6 +53,11 @@ class Onboarding extends ConsumerWidget {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,15 +5,12 @@ import 'package:linkdy/i18n/strings.g.dart';
|
|||||||
import 'package:linkdy/screens/onboarding/provider/onboarding.provider.dart';
|
import 'package:linkdy/screens/onboarding/provider/onboarding.provider.dart';
|
||||||
|
|
||||||
class OnboardingWelcome extends ConsumerWidget {
|
class OnboardingWelcome extends ConsumerWidget {
|
||||||
const OnboardingWelcome({Key? key}) : super(key: key);
|
const OnboardingWelcome({super.key});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
final width = MediaQuery.of(context).size.width;
|
return LayoutBuilder(
|
||||||
final height = MediaQuery.of(context).size.height;
|
builder: (context, constraints) {
|
||||||
|
|
||||||
final iconSize = width > height ? height : width;
|
|
||||||
|
|
||||||
return Padding(
|
return Padding(
|
||||||
padding: const EdgeInsets.all(24),
|
padding: const EdgeInsets.all(24),
|
||||||
child: Stack(
|
child: Stack(
|
||||||
@@ -68,7 +65,9 @@ class OnboardingWelcome extends ConsumerWidget {
|
|||||||
angle: 0.7,
|
angle: 0.7,
|
||||||
child: Icon(
|
child: Icon(
|
||||||
Icons.link_rounded,
|
Icons.link_rounded,
|
||||||
size: iconSize - 48,
|
size: constraints.maxWidth > constraints.maxHeight
|
||||||
|
? constraints.maxHeight
|
||||||
|
: constraints.maxWidth - 48,
|
||||||
color: Theme.of(context).colorScheme.secondary.withOpacity(0.2),
|
color: Theme.of(context).colorScheme.secondary.withOpacity(0.2),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -76,5 +75,7 @@ class OnboardingWelcome extends ConsumerWidget {
|
|||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ Route circlePageBuilder({
|
|||||||
fullscreenDialog: fullScreenDialog ?? false,
|
fullscreenDialog: fullScreenDialog ?? false,
|
||||||
transitionsBuilder: (context, animation, secondaryAnimation, child) {
|
transitionsBuilder: (context, animation, secondaryAnimation, child) {
|
||||||
const double beganRadius = 0.0;
|
const double beganRadius = 0.0;
|
||||||
final double endRadius = MediaQuery.of(context).size.height * 1.2;
|
final double endRadius = MediaQuery.of(context).size.height * 1.7;
|
||||||
|
|
||||||
final radiusTweenAnimation = animation.drive(
|
final radiusTweenAnimation = animation.drive(
|
||||||
Tween(begin: beganRadius, end: endRadius),
|
Tween(begin: beganRadius, end: endRadius),
|
||||||
|
|||||||
Reference in New Issue
Block a user