Add payments view and update invoice view for app

lib/main.dart

@@ -5,16 +5,8 @@ import 'src/settings/settings_controller.dart';
 import 'src/settings/settings_service.dart';
 
 void main() async {
-  // Set up the SettingsController, which will glue user settings to multiple
-  // Flutter Widgets.
   final settingsController = SettingsController(SettingsService());
-
-  // Load the user's preferred theme while the splash screen is displayed.
-  // This prevents a sudden theme change when the app is first displayed.
   await settingsController.loadSettings();
-
-  // Run the app and pass in the SettingsController. The app listens to the
-  // SettingsController for changes, then passes it further down to the
-  // SettingsView.
   runApp(MyApp(settingsController: settingsController));
 }
+

lib/src/sample_feature/invoice_view.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+class InvoiceView extends StatelessWidget {
+  final String itemName;
+
+  const InvoiceView({Key? key, required this.itemName}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Invoice for $itemName'),
+      ),
+      body: Center(
+        child: Text('This is the invoice for $itemName.'),
+      ),
+    );
+  }
+}

lib/src/sample_feature/payment_view.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'invoice_view.dart';
+
+/// A simple payment view that displays information about the selected item.
+class PaymentView extends StatelessWidget {
+  final String itemName;
+
+  const PaymentView({Key? key, required this.itemName}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Payment for $itemName'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text('Proceed with payment for $itemName'),
+            SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: () {
+                Navigator.push(
+                  context,
+                  MaterialPageRoute(builder: (context) => InvoiceView(itemName: itemName)),
+                );
+              },
+              child: Text('View Invoice'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+

lib/src/sample_feature/sample_item_list_view.dart

@@ -4,7 +4,7 @@ import '../settings/settings_view.dart';
 import 'sample_item.dart';
 import 'sample_item_details_view.dart';
 
-/// Displays a list of SampleItems.
+/// Displays a list of courses as cards.
 class SampleItemListView extends StatelessWidget {
   const SampleItemListView({
     super.key,
@@ -19,50 +19,48 @@ class SampleItemListView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: const Text('Sample Items'),
+        title: const Text('Course List'),
         actions: [
           IconButton(
             icon: const Icon(Icons.settings),
             onPressed: () {
-              // Navigate to the settings page. If the user leaves and returns
-              // to the app after it has been killed while running in the
-              // background, the navigation stack is restored.
               Navigator.restorablePushNamed(context, SettingsView.routeName);
             },
           ),
         ],
       ),
-
-      // To work with lists that may contain a large number of items, it’s best
-      // to use the ListView.builder constructor.
-      //
-      // In contrast to the default ListView constructor, which requires
-      // building all Widgets up front, the ListView.builder constructor lazily
-      // builds Widgets as they’re scrolled into view.
-      body: ListView.builder(
-        // Providing a restorationId allows the ListView to restore the
-        // scroll position when a user leaves and returns to the app after it
-        // has been killed while running in the background.
-        restorationId: 'sampleItemListView',
+      body: GridView.builder(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 2,
+          childAspectRatio: 0.75,
+          crossAxisSpacing: 10,
+          mainAxisSpacing: 10,
+        ),
         itemCount: items.length,
         itemBuilder: (BuildContext context, int index) {
           final item = items[index];
 
-          return ListTile(
-            title: Text('SampleItem ${item.id}'),
-            leading: const CircleAvatar(
-              // Display the Flutter Logo image asset.
-              foregroundImage: AssetImage('assets/images/flutter_logo.png'),
+          return Card(
+            elevation: 4,
+            child: InkWell(
+              onTap: () {
+                Navigator.restorablePushNamed(
+                  context,
+                  SampleItemDetailsView.routeName,
+                );
+              },
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const CircleAvatar(
+                    foregroundImage: AssetImage('assets/images/course_placeholder.png'),
+                    radius: 40,
+                  ),
+                  const SizedBox(height: 8),
+                  Text('Course ${item.id}', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
+                ],
+              ),
             ),
-            onTap: () {
-              // Navigate to the details page. If the user leaves and returns to
-              // the app after it has been killed while running in the
-              // background, the navigation stack is restored.
-              Navigator.restorablePushNamed(
-                context,
-                SampleItemDetailsView.routeName,
-              );
-            }
           );
         },
       ),