Make padding 20px (visually) throughout the application (#679)

* init commit * lint * format * format Co-authored-by: Frederik Feichtmeier <[email protected]>
ubuntu · Jan 4, 2023 · 95c468d · 95c468d
1 parent 30e8a48
commit 95c468d
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 21 deletions.
diff --git a/lib/app/common/app_page/page_layouts.dart b/lib/app/common/app_page/page_layouts.dart
@@ -79,7 +79,7 @@ class OnePageLayout extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final width = windowSize.width;
-    final hPadding = 10 + 0.0007 * pow((width - 700) * 0.9, 2);
+    final hPadding = kPagePadding + 0.0007 * pow((width - 800) * 0.9, 2);
     return ListView(
       padding: adaptivePadding
           ? EdgeInsets.only(

diff --git a/lib/app/common/constants.dart b/lib/app/common/constants.dart
@@ -20,17 +20,20 @@ import 'package:flutter/material.dart';
 const kPagePadding = 20.0;
 const kGridPadding = EdgeInsets.only(
   bottom: kPagePadding,
+  left: kPagePadding - 5,
+  right: kPagePadding - 5,
+);
+const kHeaderPadding = EdgeInsets.only(
+  top: kPagePadding,
   left: kPagePadding,
-  right: kPagePadding,
+  bottom: kPagePadding - 5,
 );
-const kHeaderPadding =
-    EdgeInsets.only(top: kPagePadding, left: 25, bottom: kPagePadding);
 const kIconPadding = EdgeInsets.only(top: 8, bottom: 8, right: 5);
 const kDialogWidth = 450.0;
 const kGridDelegate = SliverGridDelegateWithMaxCrossAxisExtent(
   mainAxisExtent: 150,
-  mainAxisSpacing: 15,
-  crossAxisSpacing: 15,
+  mainAxisSpacing: 10,
+  crossAxisSpacing: 10,
   maxCrossAxisExtent: 550,
 );
 const kSnapcraftColor = Color(0xFFE95420);

diff --git a/lib/app/explore/explore_header.dart b/lib/app/explore/explore_header.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:software/app/common/app_format.dart';
 import 'package:software/app/common/app_format_popup.dart';
+import 'package:software/app/common/constants.dart';
 import 'package:software/app/common/snap/snap_section_popup.dart';
 import 'package:software/app/explore/explore_model.dart';
 
@@ -13,7 +14,11 @@ class ExploreHeader extends StatelessWidget {
     final model = context.watch<ExploreModel>();
 
     return Padding(
-      padding: const EdgeInsets.only(top: 25, left: 25, bottom: 20),
+      padding: const EdgeInsets.only(
+        top: kPagePadding,
+        left: kPagePadding,
+        bottom: kPagePadding - 5,
+      ),
       child: Align(
         alignment: Alignment.centerLeft,
         child: Wrap(

diff --git a/lib/app/explore/search_page.dart b/lib/app/explore/search_page.dart
@@ -41,7 +41,11 @@ class SearchPage extends StatelessWidget {
 
         return snapshot.hasData && snapshot.data!.isNotEmpty
             ? GridView.builder(
-                padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
+                padding: const EdgeInsets.only(
+                  bottom: kPagePadding - 5,
+                  left: kPagePadding - 5,
+                  right: kPagePadding - 5,
+                ),
                 gridDelegate: kGridDelegate,
                 shrinkWrap: true,
                 itemCount: snapshot.data!.length,

diff --git a/lib/app/explore/section_banner.dart b/lib/app/explore/section_banner.dart
@@ -7,6 +7,8 @@ import 'package:software/app/common/snap/snap_page.dart';
 import 'package:software/app/common/snap/snap_section.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
 
+import '../common/constants.dart';
+
 class SectionBanner extends StatelessWidget {
   const SectionBanner({
     super.key,
@@ -28,9 +30,9 @@ class SectionBanner extends StatelessWidget {
       child: Padding(
         padding: const EdgeInsets.only(
           top: 5,
-          left: kYaruPagePadding + 5,
-          right: kYaruPagePadding + 5,
-          bottom: kYaruPagePadding,
+          left: kPagePadding,
+          right: kPagePadding,
+          bottom: kPagePadding - 5,
         ),
         child: InkWell(
           onTap: onTap,

diff --git a/lib/app/explore/section_grid.dart b/lib/app/explore/section_grid.dart
@@ -52,8 +52,12 @@ class SectionGrid extends StatelessWidget {
 
     return GridView.builder(
       physics: ignoreScrolling ? const NeverScrollableScrollPhysics() : null,
-      padding:
-          padding ?? const EdgeInsets.only(bottom: 20, left: 20, right: 20),
+      padding: padding ??
+          const EdgeInsets.only(
+            bottom: kPagePadding - 5,
+            left: kPagePadding - 5,
+            right: kPagePadding - 5,
+          ),
       shrinkWrap: true,
       gridDelegate: kGridDelegate,
       itemCount: sections.length,

diff --git a/lib/app/updates/package_updates_page.dart b/lib/app/updates/package_updates_page.dart
@@ -203,7 +203,7 @@ class _UpdatesHeader extends StatelessWidget {
     return Align(
       alignment: Alignment.centerLeft,
       child: Padding(
-        padding: const EdgeInsets.all(kYaruPagePadding),
+        padding: const EdgeInsets.all(kPagePadding),
         child: Wrap(
           direction: Axis.horizontal,
           alignment: WrapAlignment.start,

diff --git a/lib/app/updates/snap_updates_page.dart b/lib/app/updates/snap_updates_page.dart
@@ -18,6 +18,7 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:snapd/snapd.dart';
+import 'package:software/app/common/constants.dart';
 import 'package:software/l10n/l10n.dart';
 import 'package:software/services/snap_service.dart';
 import 'package:software/app/common/loading_banner_grid.dart';
@@ -26,7 +27,6 @@ import 'package:software/app/common/updates_splash_screen.dart';
 import 'package:software/app/updates/snap_updates_model.dart';
 import 'package:ubuntu_service/ubuntu_service.dart';
 import 'package:yaru_icons/yaru_icons.dart';
-import 'package:yaru_widgets/yaru_widgets.dart';
 
 class SnapUpdatesPage extends StatelessWidget {
   const SnapUpdatesPage({Key? key}) : super(key: key);
@@ -64,12 +64,7 @@ class SnapUpdatesPage extends StatelessWidget {
         return Column(
           children: [
             Padding(
-              padding: const EdgeInsets.only(
-                left: 25,
-                top: kYaruPagePadding,
-                bottom: kYaruPagePadding,
-                right: 25,
-              ),
+              padding: const EdgeInsets.all(kPagePadding),
               child: Row(
                 children: [
                   ElevatedButton(