Merge pull request #46 from payam-zahedi/feat/update-code-preview

update code preview widget

example/lib/main.dart

@@ -6,19 +6,25 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_web_plugins/url_strategy.dart';
 import 'package:responsive_framework/responsive_framework.dart';
 
+final themeVariantProvider = StateProvider<bool>((ref) {
+  return false;
+});
+
 void main() {
   usePathUrlStrategy();
   runApp(const ProviderScope(child: ToastificationApp()));
 }
 
-class ToastificationApp extends StatelessWidget {
+class ToastificationApp extends ConsumerWidget {
   const ToastificationApp({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
+    final useInterFont = ref.watch(themeVariantProvider);
+
     return MaterialApp(
       title: 'Toastification',
-      theme: lightTheme,
+      theme: useInterFont ? lightInterTheme : lightJakartaTheme,
       builder: (context, child) {
         return ResponsiveWrapper.builder(
           child,

example/lib/src/features/home/views/pages/home.dart

@@ -35,7 +35,7 @@ class _HomeScreenState extends State<HomeScreen> {
   Widget build(BuildContext context) {
     return const ToastificationConfigProvider(
       config: ToastificationConfig(
-        margin: EdgeInsets.fromLTRB(0, 100, 0, 110),
+        margin: EdgeInsets.fromLTRB(0, 16, 0, 110),
       ),
       child: Scaffold(
         extendBody: true,
@@ -88,9 +88,10 @@ class _HorizontalSection extends StatelessWidget {
           alignment: AlignmentDirectional.centerEnd,
           child: SizedBox(
             width: sideHeaderWidth,
+            height: MediaQuery.sizeOf(context).height - 64,
             child: const Padding(
               padding: EdgeInsetsDirectional.fromSTEB(30, 16, 0, 16),
-              child: PreviewPanel(),
+              child: PreviewPanel(expanded: true),
             ),
           ),
         ),

example/lib/src/features/home/views/ui_states/extra.dart

@@ -58,6 +58,38 @@ void openGithub(BuildContext context) async {
   }
 }
 
+void openGithubIssues(BuildContext context) async {
+  const url = 'https://github.com/payam-zahedi/toastification/issues';
+  if (!await launchUrl(Uri.parse(url))) {
+    if (context.mounted) {
+      toastification.show(
+        context: context,
+        type: ToastificationType.error,
+        style: ToastificationStyle.flat,
+        title: 'Ops!',
+        description: 'Something went wrong',
+        autoCloseDuration: const Duration(seconds: 4),
+      );
+    }
+  }
+}
+
+void openGithubPullRequests(BuildContext context) async {
+  const url = 'https://github.com/payam-zahedi/toastification/pulls';
+  if (!await launchUrl(Uri.parse(url))) {
+    if (context.mounted) {
+      toastification.show(
+        context: context,
+        type: ToastificationType.error,
+        style: ToastificationStyle.flat,
+        title: 'Ops!',
+        description: 'Something went wrong',
+        autoCloseDuration: const Duration(seconds: 4),
+      );
+    }
+  }
+}
+
 void showCurrentToast(BuildContext context, ToastDetail toastDetail) {
   toastification.show(
     context: context,

example/lib/src/features/home/views/widgets/app_bar/app_bar.dart

@@ -1,12 +1,26 @@
 import 'package:example/src/core/usecase/responsive/responsive.dart';
+import 'package:example/src/features/home/views/ui_states/extra.dart';
 import 'package:example/src/features/home/views/widgets/app_bar/app_bar_container.dart';
 import 'package:example/src/features/home/views/widgets/app_bar/app_bar_logo.dart';
 import 'package:example/src/features/home/views/widgets/app_bar/app_bar_text_button.dart';
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:iconsax_flutter/iconsax_flutter.dart';
 
 class ToastAppBar extends StatelessWidget {
   const ToastAppBar({super.key});
 
+  @override
+  Widget build(BuildContext context) {
+    return const SliverToBoxAdapter(
+      child: _AppBar(),
+    );
+  }
+}
+
+class PinnedToastAppBar extends StatelessWidget {
+  const PinnedToastAppBar({super.key});
+
   @override
   Widget build(BuildContext context) {
     return const SliverPersistentHeader(
@@ -16,10 +30,6 @@ class ToastAppBar extends StatelessWidget {
   }
 }
 
-const _height = 72.0;
-const _topMargin = 6.0;
-const _totalHeight = _height + _topMargin;
-
 class AppBarDelegate extends SliverPersistentHeaderDelegate {
   const AppBarDelegate();
 
@@ -30,32 +40,68 @@ class AppBarDelegate extends SliverPersistentHeaderDelegate {
     bool overlapsContent,
   ) {
     final shrinkPercentage = shrinkOffset / maxExtent;
+    return _AppBar(isElevated: shrinkPercentage >= 0.8);
+  }
+
+  @override
+  double get maxExtent => _totalHeight;
+
+  @override
+  double get minExtent => _totalHeight;
+
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
+    return false;
+  }
+}
+
+const _height = 72.0;
+const _topMargin = 6.0;
+const _totalHeight = _height + _topMargin;
+
+class _AppBar extends StatelessWidget {
+  const _AppBar({this.isElevated = false});
+
+  final bool isElevated;
+
+  @override
+  Widget build(BuildContext context) {
     const gap = SizedBox(width: 8.0);
 
     if (context.isInDesktopZone) {
       return AppBarContainer(
         height: _height,
         topMargin: _topMargin,
-        isElevated: shrinkPercentage >= 0.8,
+        isElevated: isElevated,
         child: Row(
           children: [
             const AppBarLogo(),
             const SizedBox(width: 46),
             AppBarTextButton(
-              onPressed: () {},
-              icon: const Icon(Icons.abc),
+              onPressed: () {
+                openGithub(context);
+              },
+              icon: const Icon(FontAwesomeIcons.github),
               label: const Text('Github Source'),
             ),
             gap,
             AppBarTextButton(
-              onPressed: () {},
-              icon: const Icon(Icons.face),
+              onPressed: () {
+                openGithubIssues(context);
+              },
+              icon: const Icon(
+                Iconsax.cd_copy,
+              ),
               label: const Text('Report an Issue'),
             ),
             gap,
             AppBarTextButton(
-              onPressed: () {},
-              icon: const Icon(Icons.ac_unit_rounded),
+              onPressed: () {
+                openGithubPullRequests(context);
+              },
+              icon: const Icon(
+                Iconsax.programming_arrow_copy,
+              ),
               label: const Text('Pull Request'),
             ),
             gap,
@@ -66,7 +112,9 @@ class AppBarDelegate extends SliverPersistentHeaderDelegate {
             const Spacer(),
             FilledButton(
               style: FilledButton.styleFrom(),
-              onPressed: () {},
+              onPressed: () {
+                openGithub(context);
+              },
               child: const Text('Give us a Star'),
             )
           ],
@@ -94,15 +142,4 @@ class AppBarDelegate extends SliverPersistentHeaderDelegate {
       ),
     );
   }
-
-  @override
-  double get maxExtent => _totalHeight;
-
-  @override
-  double get minExtent => _totalHeight;
-
-  @override
-  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
-    return false;
-  }
 }

example/lib/src/features/home/views/widgets/app_bar/app_bar_text_button.dart

@@ -36,7 +36,12 @@ class AppBarTextButton extends StatelessWidget {
     return TextButton.icon(
       style: buttonStyle,
       onPressed: onPressed,
-      icon: icon!,
+      icon: IconTheme(
+        data: const IconThemeData(
+          size: 20,
+        ),
+        child: icon!,
+      ),
       label: label,
     );
   }

example/lib/src/features/home/views/widgets/header.dart

@@ -1,5 +1,7 @@
+import 'package:example/main.dart';
 import 'package:example/src/core/usecase/responsive/responsive.dart';
 import 'package:example/src/core/views/widgets/core.dart';
+import 'package:example/src/features/home/views/ui_states/extra.dart';
 import 'package:example/src/features/home/views/widgets/image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -141,7 +143,9 @@ class _InformationWidget extends ConsumerWidget {
         children: [
           GestureDetector(
             onDoubleTap: () {
-              ref.read(_bigStyleProvider.notifier).state = !isBig;
+              // ref.read(_bigStyleProvider.notifier).state = !isBig;
+              ref.read(themeVariantProvider.notifier).state =
+                  !ref.read(themeVariantProvider);
             },
             child: const ColoredTag(
               icon: FontAwesomeIcons.github,
@@ -181,7 +185,9 @@ class _InformationWidget extends ConsumerWidget {
                 style: OutlinedButton.styleFrom(
                   padding: const EdgeInsets.symmetric(horizontal: 16),
                 ),
-                onPressed: () {},
+                onPressed: () {
+                  openGithubPullRequests(context);
+                },
                 icon: Icon(
                   Iconsax.programming_arrow_copy,
                   size: 18,
@@ -194,7 +200,9 @@ class _InformationWidget extends ConsumerWidget {
                 style: FilledButton.styleFrom(
                   padding: const EdgeInsets.symmetric(horizontal: 16),
                 ),
-                onPressed: () {},
+                onPressed: () {
+                  openGithub(context);
+                },
                 icon: const Icon(
                   Icons.star_rounded,
                   size: 18,

example/lib/src/features/home/views/widgets/preview_panel.dart

@@ -12,19 +12,27 @@ import 'package:iconsax_flutter/iconsax_flutter.dart';
 import 'package:toastification/toastification.dart';
 
 class PreviewPanel extends StatelessWidget {
-  const PreviewPanel({super.key});
+  const PreviewPanel({
+    super.key,
+    this.expanded = false,
+  });
+
+  final bool expanded;
 
   @override
   Widget build(BuildContext context) {
     return ColoredBox(
       color: Theme.of(context).colorScheme.background,
-      child: const Padding(
-        padding: EdgeInsets.symmetric(vertical: 8.0),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8.0),
         child: Column(
           children: [
-            ToastPreview(),
-            SizedBox(height: 16),
-            CodePreview(),
+            const ToastPreview(),
+            const SizedBox(height: 16),
+            if (expanded)
+              const Expanded(child: CodePreview())
+            else
+              const CodePreview(),
           ],
         ),
       ),
@@ -86,12 +94,17 @@ class CodePreview extends StatelessWidget {
     if (!context.isInDesktopZone) {
       return const ExpandableCodePreview();
     }
-    return const _RawCodePreview();
+    return const _RawCodePreview(expanded: true);
   }
 }
 
 class _RawCodePreview extends StatelessWidget {
-  const _RawCodePreview({this.showCopyButton = true});
+  const _RawCodePreview({
+    this.showCopyButton = true,
+    this.expanded = false,
+  });
+
+  final bool expanded;
 
   final bool showCopyButton;
   @override
@@ -128,17 +141,22 @@ class _RawCodePreview extends StatelessWidget {
       );
     }
 
-    return Material(
-      shape: RoundedRectangleBorder(
-        borderRadius: context.cardsBorderRadius,
-      ),
-      color: const Color(0xffFBFCFD),
-      child: ConstrainedBox(
-        constraints: const BoxConstraints(
-          minWidth: double.infinity,
-          maxHeight: 380,
+    return Align(
+      alignment: Alignment.topCenter,
+      child: Material(
+        shape: RoundedRectangleBorder(
+          borderRadius: context.cardsBorderRadius,
+          side: BorderSide(color: Theme.of(context).colorScheme.surfaceVariant),
+        ),
+        color: const Color(0xffFBFCFD),
+        child: ConstrainedBox(
+          constraints: BoxConstraints(
+            minWidth: double.infinity,
+            minHeight: 380,
+            maxHeight: expanded ? double.infinity : 380,
+          ),
+          child: child,
         ),
-        child: child,
       ),
     );
   }