Fix: Improve Home Page Layout and bottom padding

animations/android/build.gradle

@@ -1,11 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.7.10'
+    ext.kotlin_version = '1.8.22'
     repositories {
         google()
         mavenCentral()
     }
 
     dependencies {
+        classpath 'com.android.tools.build:gradle:8.0.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }
@@ -27,4 +28,4 @@ subprojects {
 
 tasks.register("clean", Delete) {
     delete rootProject.buildDir
-}
+}

animations/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-all.zip
 zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip
+zipStorePath=wrapper/dists

animations/android/settings.gradle

@@ -23,7 +23,8 @@ pluginManagement {
 
 plugins {
     id "dev.flutter.flutter-plugin-loader" version "1.0.0"
-    id "com.android.application" version "7.3.0" apply false
+    id "com.android.application" version "8.2.1" apply false
+    id "org.jetbrains.kotlin.android" version "1.9.20" apply false
 }
 
-include ":app"
+include ":app"

animations/lib/main.dart

@@ -169,15 +169,53 @@ class HomePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final headerStyle = Theme.of(context).textTheme.titleLarge;
+    final theme = Theme.of(context);
+    final headerStyle = theme.textTheme.titleMedium?.copyWith(
+      fontWeight: FontWeight.bold,
+    );
+
     return Scaffold(
-      appBar: AppBar(title: const Text('Animation Samples')),
+      appBar: AppBar(
+        title: const Text(
+          'Animation Samples',
+          style: TextStyle(fontWeight: FontWeight.bold),
+        ),
+        centerTitle: false,
+      ),
       body: ListView(
+        padding: const EdgeInsets.all(20),
         children: [
-          ListTile(title: Text('Basics', style: headerStyle)),
-          ...basicDemos.map((d) => DemoTile(demo: d)),
-          ListTile(title: Text('Misc', style: headerStyle)),
-          ...miscDemos.map((d) => DemoTile(demo: d)),
+          Text(
+            'Explore Animation',
+            style: theme.textTheme.headlineMedium?.copyWith(
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+
+          const SizedBox(
+            height: 8,
+          ),
+
+          Text(
+            'Discover interactive animation example in flutter',
+            style: theme.textTheme.bodyMedium?.copyWith(
+              color: theme.colorScheme.onSurfaceVariant,
+            ),
+          ),
+
+          const SizedBox(
+            height: 28,
+          ),
+
+          Text('Basics', style: headerStyle),
+          const SizedBox(height: 12),
+          ...basicDemos.map((demo) => DemoTile(demo: demo)),
+
+          const SizedBox(height: 28),
+          Text('Miscellaneous', style: headerStyle),
+          const SizedBox(height: 12),
+          ...miscDemos.map((demo) => DemoTile(demo: demo)),
+          const SizedBox(height: 25),
         ],
       ),
     );
@@ -191,11 +229,32 @@ class DemoTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListTile(
-      title: Text(demo.name),
-      onTap: () {
-        context.go('/${demo.route}');
-      },
+    final theme = Theme.of(context);
+
+    return Material(
+      color: theme.colorScheme.surfaceContainerLow,
+      borderRadius: BorderRadius.circular(16),
+      child: ListTile(
+        contentPadding: const EdgeInsets.symmetric(
+          horizontal: 18,
+          vertical: 6,
+        ),
+        leading: CircleAvatar(
+          backgroundColor: theme.colorScheme.primaryContainer,
+          child: Icon(
+            Icons.animation,
+            color: theme.colorScheme.onPrimaryContainer,
+          ),
+        ),
+        title: Text(
+          demo.name,
+          style: const TextStyle(fontWeight: FontWeight.w600),
+        ),
+        trailing: const Icon(Icons.arrow_forward_ios, size: 16),
+        onTap: () {
+          context.go('/${demo.route}');
+        },
+      ),
     );
   }
 }