diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d909e1..8f8e42a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 4.1.0
+- Migrate to flutter 3.22 which deprecates the background and onBackground properties in the ThemeData and also removes MaterialStatePropertyAll
+
 ## 4.0.0
 
 - Add a serviceBuilder to the userstory configuration
diff --git a/packages/flutter_timeline/example/lib/apps/go_router/app.dart b/packages/flutter_timeline/example/lib/apps/go_router/app.dart
index 9c30ade..082edae 100644
--- a/packages/flutter_timeline/example/lib/apps/go_router/app.dart
+++ b/packages/flutter_timeline/example/lib/apps/go_router/app.dart
@@ -32,7 +32,7 @@ class GoRouterApp extends StatelessWidget {
           seedColor: const Color(0xFFB8E2E8),
           primary: const Color(0xffb71c6d),
         ).copyWith(
-          background: const Color(0XFFFAF9F6),
+          surface: const Color(0XFFFAF9F6),
         ),
         useMaterial3: true,
       ),
diff --git a/packages/flutter_timeline/example/lib/apps/navigator/app.dart b/packages/flutter_timeline/example/lib/apps/navigator/app.dart
index e13c783..c309c15 100644
--- a/packages/flutter_timeline/example/lib/apps/navigator/app.dart
+++ b/packages/flutter_timeline/example/lib/apps/navigator/app.dart
@@ -12,7 +12,7 @@ class NavigatorApp extends StatelessWidget {
       theme: ThemeData(
         colorScheme:
             ColorScheme.fromSeed(seedColor: Colors.deepPurple).copyWith(
-          background: const Color(0xFFB8E2E8),
+          surface: const Color(0xFFB8E2E8),
         ),
         useMaterial3: true,
       ),
diff --git a/packages/flutter_timeline/example/lib/apps/widgets/app.dart b/packages/flutter_timeline/example/lib/apps/widgets/app.dart
index 95b1252..9c75730 100644
--- a/packages/flutter_timeline/example/lib/apps/widgets/app.dart
+++ b/packages/flutter_timeline/example/lib/apps/widgets/app.dart
@@ -13,7 +13,7 @@ class WidgetApp extends StatelessWidget {
       theme: ThemeData(
         colorScheme:
             ColorScheme.fromSeed(seedColor: Colors.deepPurple).copyWith(
-          background: const Color(0xFFB8E2E8),
+          surface: const Color(0xFFB8E2E8),
         ),
         useMaterial3: true,
       ),
diff --git a/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart b/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart
index 44e4d38..64b45b9 100644
--- a/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart
+++ b/packages/flutter_timeline_view/lib/src/screens/timeline_post_creation_screen.dart
@@ -201,7 +201,7 @@ class _TimelinePostCreationScreenState
                         context: context,
                         builder: (context) => Container(
                           padding: const EdgeInsets.all(8.0),
-                          color: theme.colorScheme.background,
+                          color: theme.colorScheme.surface,
                           child: ImagePicker(
                             imagePickerConfig: widget.options.imagePickerConfig,
                             imagePickerTheme: widget.options.imagePickerTheme,
@@ -320,7 +320,7 @@ class _TimelinePostCreationScreenState
                       )
                     : ElevatedButton(
                         style: ButtonStyle(
-                          backgroundColor: MaterialStatePropertyAll(
+                          backgroundColor: WidgetStatePropertyAll(
                             theme.colorScheme.primary,
                           ),
                         ),
diff --git a/packages/flutter_timeline_view/lib/src/screens/timeline_post_overview_screen.dart b/packages/flutter_timeline_view/lib/src/screens/timeline_post_overview_screen.dart
index 6293dfc..df34fc4 100644
--- a/packages/flutter_timeline_view/lib/src/screens/timeline_post_overview_screen.dart
+++ b/packages/flutter_timeline_view/lib/src/screens/timeline_post_overview_screen.dart
@@ -58,7 +58,7 @@ class TimelinePostOverviewScreen extends StatelessWidget {
             ElevatedButton(
               style: ButtonStyle(
                 backgroundColor:
-                    MaterialStatePropertyAll(Theme.of(context).primaryColor),
+                    WidgetStatePropertyAll(Theme.of(context).primaryColor),
               ),
               onPressed: () {
                 onPostSubmit(timelinePost);
diff --git a/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart b/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart
index 6b857d0..d8d98f8 100644
--- a/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart
+++ b/packages/flutter_timeline_view/lib/src/screens/timeline_post_screen.dart
@@ -563,7 +563,7 @@ class _TimelinePostScreenState extends State<TimelinePostScreen> {
                   context: context,
                   builder: (context) => Container(
                     padding: const EdgeInsets.all(8.0),
-                    color: theme.colorScheme.background,
+                    color: theme.colorScheme.surface,
                     child: ImagePicker(
                       imagePickerConfig: widget.options.imagePickerConfig,
                       imagePickerTheme: widget.options.imagePickerTheme,
diff --git a/packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart b/packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart
index 5ef5611..7c35011 100644
--- a/packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart
+++ b/packages/flutter_timeline_view/lib/src/widgets/category_selector_button.dart
@@ -28,20 +28,20 @@ class CategorySelectorButton extends StatelessWidget {
         onPressed: onTap,
         style: ButtonStyle(
           tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          padding: const MaterialStatePropertyAll(
+          padding: const WidgetStatePropertyAll(
             EdgeInsets.symmetric(
               vertical: 5,
               horizontal: 12,
             ),
           ),
-          fixedSize: MaterialStatePropertyAll(Size(140, isOnTop ? 140 : 20)),
-          backgroundColor: MaterialStatePropertyAll(
+          fixedSize: WidgetStatePropertyAll(Size(140, isOnTop ? 140 : 20)),
+          backgroundColor: WidgetStatePropertyAll(
             selected
                 ? theme.colorScheme.primary
                 : options.theme.categorySelectionButtonBackgroundColor ??
                     Colors.transparent,
           ),
-          shape: MaterialStatePropertyAll(
+          shape: WidgetStatePropertyAll(
             RoundedRectangleBorder(
               borderRadius: const BorderRadius.all(
                 Radius.circular(8),
diff --git a/packages/flutter_timeline_view/lib/src/widgets/reaction_bottom.dart b/packages/flutter_timeline_view/lib/src/widgets/reaction_bottom.dart
index 57c9ec1..171c597 100644
--- a/packages/flutter_timeline_view/lib/src/widgets/reaction_bottom.dart
+++ b/packages/flutter_timeline_view/lib/src/widgets/reaction_bottom.dart
@@ -33,7 +33,7 @@ class _ReactionBottomState extends State<ReactionBottom> {
   Widget build(BuildContext context) => SafeArea(
         bottom: true,
         child: Container(
-          color: Theme.of(context).colorScheme.background,
+          color: Theme.of(context).colorScheme.surface,
           child: Container(
             margin: const EdgeInsets.symmetric(
               horizontal: 12,