feat: add appainter icon and update app bar style

README.md

@@ -1,8 +1,6 @@
-# Appainter
+![logo](images/logo.png)
 
-**⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️**
-
-Inspired by [Panache](https://github.com/rxlabz/panache), a material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app.
+A material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app.
 
 [![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/zeshuaro/appainter?color=orange&label=version)](https://github.com/zeshuaro/appainter/releases)
 [![Website](https://img.shields.io/website?url=https%3A%2F%2Fzeshuaro.github.io%2Fappainter%2F)](https://zeshuaro.github.io/appainter/)

lib/common/consts.dart

@@ -60,3 +60,5 @@ const kInputDecorationHelperMaxLines = 1;
 const kNone = 'None';
 
 const kSliderTrackHeight = 4.0;
+
+const kSplashRadius = 20.0;

lib/home/views/home_page.dart

@@ -28,26 +28,10 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
     return Scaffold(
-      backgroundColor: Theme.of(context).brightness == Brightness.dark
-          ? _backgroundColorDark
-          : _backgroundColorLight,
-      appBar: AppBar(
-        title: Row(
-          children: const [
-            Text('Appainter'),
-            HorizontalPadding(),
-            ImportButton(key: Key('homePage_importButton')),
-            HorizontalPadding(size: PaddingSize.medium),
-            ExportButton(key: Key('homePage_exportButton')),
-          ],
-        ),
-        centerTitle: false,
-        actions: [
-          _ActionButtons(),
-          const HorizontalPadding(),
-        ],
-      ),
+      backgroundColor: isDark ? _backgroundColorDark : _backgroundColorLight,
+      appBar: _buildAppBar(isDark),
       body: BlocListener<HomeCubit, HomeState>(
         listener: _listener,
         child: GestureDetector(
@@ -58,6 +42,48 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
+  AppBar _buildAppBar(bool isDark) {
+    final color = isDark ? Colors.white : Colors.grey;
+    return AppBar(
+      backgroundColor: isDark ? Colors.black : Colors.white,
+      actionsIconTheme: IconThemeData(color: color),
+      title: Row(
+        children: [
+          const Image(
+            image: AssetImage('assets/icon.png'),
+            height: 48,
+          ),
+          const HorizontalPadding(
+            size: PaddingSize.medium,
+          ),
+          Text(
+            'Appainter',
+            style: TextStyle(color: color),
+          ),
+        ],
+      ),
+      centerTitle: false,
+      actions: [
+        ImportButton(
+          key: const Key('homePage_importButton'),
+          color: color,
+        ),
+        const HorizontalPadding(size: PaddingSize.medium),
+        ExportButton(
+          key: const Key('homePage_exportButton'),
+          color: color,
+        ),
+        const HorizontalPadding(size: PaddingSize.medium),
+        const AppThemeModeButton(),
+        const HorizontalPadding(size: PaddingSize.medium),
+        const UsageButton(key: Key('homePage_usageButton')),
+        const HorizontalPadding(size: PaddingSize.medium),
+        const GithubButton(key: Key('homePage_githubButton')),
+        const HorizontalPadding(),
+      ],
+    );
+  }
+
   void _listener(BuildContext context, HomeState state) {
     if (!state.isSdkShowed) {
       ScaffoldMessenger.of(context).showSnackBar(_buildSdkSnackBar());
@@ -97,25 +123,6 @@ class _HomePageState extends State<HomePage> {
   }
 }
 
-class _ActionButtons extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      children: const [
-        AppThemeModeButton(),
-        HorizontalPadding(size: PaddingSize.medium),
-        UsageButton(
-          key: Key('homePage_usageButton'),
-        ),
-        HorizontalPadding(size: PaddingSize.medium),
-        GithubButton(
-          key: Key('homePage_githubButton'),
-        ),
-      ],
-    );
-  }
-}
-
 class _ScaffoldBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {

lib/home/widgets/app_theme_mode_button.dart

@@ -1,3 +1,4 @@
+import 'package:appainter/common/common.dart';
 import 'package:appainter/home/home.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -18,8 +19,9 @@ class AppThemeModeButton extends StatelessWidget {
         }
 
         return IconButton(
-          onPressed: () => context.read<HomeCubit>().themeModeChanged(!isDark),
           icon: Icon(isDark ? MdiIcons.weatherNight : MdiIcons.weatherSunny),
+          splashRadius: kSplashRadius,
+          onPressed: () => context.read<HomeCubit>().themeModeChanged(!isDark),
         );
       },
     );

lib/home/widgets/export_button.dart

@@ -17,18 +17,25 @@ import 'package:appainter/switch_theme/switch_theme.dart';
 import 'package:appainter/tab_bar_theme/tab_bar_theme.dart';
 import 'package:appainter/text_button_theme/text_button_theme.dart';
 import 'package:appainter/text_theme/text_theme.dart';
+import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
 
 class ExportButton extends StatelessWidget {
-  const ExportButton({Key? key}) : super(key: key);
+  final Color color;
+
+  const ExportButton({Key? key, required this.color}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return TextButton(
-      onPressed: () => _onPressed(context),
-      child: const Text(
+    return TextButton.icon(
+      icon: Icon(
+        MdiIcons.applicationExport,
+        color: color,
+      ),
+      label: Text(
         'Export',
-        style: TextStyle(color: Colors.white),
+        style: TextStyle(color: color),
       ),
+      onPressed: () => _onPressed(context),
     );
   }
 

lib/home/widgets/github_button.dart

@@ -1,3 +1,4 @@
+import 'package:appainter/common/common.dart';
 import 'package:flutter/material.dart';
 import 'package:appainter/services/services.dart';
 import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
@@ -10,8 +11,9 @@ class GithubButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return IconButton(
-      onPressed: () => UtilService.launchUrl(githubUrl),
       icon: const Icon(MdiIcons.github),
+      splashRadius: kSplashRadius,
+      onPressed: () => UtilService.launchUrl(githubUrl),
     );
   }
 }

lib/home/widgets/import_button.dart

@@ -1,10 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:appainter/home/home.dart';
+import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
 import 'package:ndialog/ndialog.dart';
 
 class ImportButton extends StatefulWidget {
-  const ImportButton({Key? key}) : super(key: key);
+  final Color color;
+
+  const ImportButton({Key? key, required this.color}) : super(key: key);
 
   @override
   State<ImportButton> createState() => _ImportButtonState();
@@ -28,12 +31,16 @@ class _ImportButtonState extends State<ImportButton> {
           _dialog?.dismiss();
         }
       },
-      child: TextButton(
-        onPressed: () => context.read<HomeCubit>().themeImported(),
-        child: const Text(
+      child: TextButton.icon(
+        icon: Icon(
+          MdiIcons.applicationImport,
+          color: widget.color,
+        ),
+        label: Text(
           'Import',
-          style: TextStyle(color: Colors.white),
+          style: TextStyle(color: widget.color),
         ),
+        onPressed: () => context.read<HomeCubit>().themeImported(),
       ),
     );
   }

lib/home/widgets/usage_button.dart

@@ -1,3 +1,4 @@
+import 'package:appainter/common/common.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -13,8 +14,9 @@ class UsageButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return IconButton(
-      onPressed: () => _onPressed(context),
       icon: const Icon(MdiIcons.helpCircleOutline),
+      splashRadius: kSplashRadius,
+      onPressed: () => _onPressed(context),
     );
   }
 

pubspec.yaml

@@ -47,3 +47,5 @@ dev_dependencies:
 
 flutter:
   uses-material-design: true
+  assets:
+    - assets/icon.png

web/index.html

@@ -24,10 +24,12 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-title" content="Appainter">
-  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
 
   <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+  <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
 
   <title>Appainter</title>
   <link rel="manifest" href="manifest.json">

web/manifest.json

@@ -10,26 +10,14 @@
   "prefer_related_applications": false,
   "icons": [
     {
-      "src": "icons/Icon-192.png",
+      "src": "/icons/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "icons/Icon-512.png",
+      "src": "/icons/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
-    },
-    {
-      "src": "icons/Icon-maskable-192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "icons/Icon-maskable-512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
     }
   ]
 }