Itempage

lib/view/home.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:f0ckapp/api/fetchdata.dart';
 import 'package:f0ckapp/model/item.dart';
+import 'package:f0ckapp/view/item.dart';
 
 class Home extends StatefulWidget {
   const Home({Key? key}) : super(key: key);
@@ -49,23 +50,33 @@ class _HomeState extends State<Home> {
                         case 2: mode = Colors.red; break;
                         default: mode = Colors.yellow; break;
                       }
-                      return Stack(
-                        children: <Widget>[
-                          Image.network("https://f0ck.dev/t/${snapshot.data?[index].id}.webp"),
-                          SizedBox(
-                            child: Align(
-                              alignment: FractionalOffset.bottomRight,
-                              child: Padding(
-                                padding: const EdgeInsets.only(bottom: 0, right: 0),
-                                child: Icon(
-                                  Icons.square,
-                                  color: mode,
-                                  size: 15.0
+                      return GestureDetector(
+                        onTap: () {
+                          Navigator.push(
+                            context,
+                            MaterialPageRoute(
+                              builder: (context) => ItemPage(id: snapshot.data![index].id),
+                            ),
+                          );
+                        },
+                        child: Stack(
+                          children: <Widget>[
+                            Image.network("https://f0ck.dev/t/${snapshot.data?[index].id}.webp"),
+                            SizedBox(
+                              child: Align(
+                                alignment: FractionalOffset.bottomRight,
+                                child: Padding(
+                                  padding: const EdgeInsets.only(bottom: 0, right: 0),
+                                  child: Icon(
+                                    Icons.square,
+                                    color: mode,
+                                    size: 15.0
+                                  ),
                                 ),
                               ),
-                            ),
-                          )
-                        ]
+                            )
+                          ]
+                        )
                       );
                     },
                     childCount: snapshot.data?.length

lib/view/item.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:f0ckapp/model/item.dart';
+import 'package:f0ckapp/api/fetchitem.dart';
+
+class ItemPage extends StatefulWidget {
+  final int id;
+  const ItemPage({Key? key, required this.id }) : super(key: key);
+
+  @override
+  // ignore: library_private_types_in_public_api
+  _ItemPageState createState() => _ItemPageState();
+}
+
+class _ItemPageState extends State<ItemPage> with SingleTickerProviderStateMixin {
+  late final int id;
+  late Future<Item> f0ck;
+
+  @override
+  void initState() {
+    super.initState();
+    id = widget.id;
+    f0ck = fetchItemFromApi(id);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<Item>(
+      future: f0ck,
+      builder: (context, snapshot) {
+        if(snapshot.hasData) {
+          return Scaffold(
+            appBar: AppBar(
+              title: Text('f0ck $id'),
+            ),
+            body: Column(
+              children: [
+                AspectRatio(
+                  aspectRatio: 1,
+                  child: SizedBox(
+                    width: double.infinity,
+                    child: snapshot.data!.mime.startsWith('image') ? Image.network("https://f0ck.dev/b/${snapshot.data?.dest}") : const Text("no image"),
+                  ),
+                ),
+                Container(
+                  margin: const EdgeInsets.all(20.0),
+                  child: Center(
+                    child: Text(
+                      "${snapshot.data?.mime}",
+                      style: const TextStyle(fontSize: 40),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          );
+        } else if(snapshot.hasError) {
+          return Text("${snapshot.error}");
+        }
+        return const CircularProgressIndicator();
+      }
+    );
+  }
+}