Itempage

.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+    // Verwendet IntelliSense zum Ermitteln möglicher Attribute.
+    // Zeigen Sie auf vorhandene Attribute, um die zugehörigen Beschreibungen anzuzeigen.
+    // Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "f0ckapp",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "f0ckapp (profile mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "f0ckapp (release mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        }
+    ]
+}

lib/api/fetchitem.dart

@@ -0,0 +1,15 @@
+import 'package:f0ckapp/model/item.dart';
+import 'dart:convert';
+import 'package:http/http.dart' as http;
+
+Future<Item> fetchItemFromApi(id) async {
+  final response = await http.get(Uri.parse('https://f0ck.dev/api/v2/item/$id'));
+
+  if(response.statusCode == 200) {
+    //List jsonresponse = json.decode(response.body)['rows'];
+    Map<String, dynamic> jsonresponse = json.decode(response.body)['rows'];
+    return Item.fromJson(jsonresponse);
+  } else {
+    throw Exception('failed to load feed');
+  }
+}

lib/main.dart

@@ -1,11 +1,28 @@
 import 'package:flutter/material.dart';
 import 'package:f0ckapp/view/home.dart';
+import 'package:f0ckapp/view/item.dart';
 
-void main() {
+/*void main() {
   runApp(MaterialApp(
     theme: ThemeData(
       scaffoldBackgroundColor: const Color.fromARGB(255, 23, 23, 23)
     ),
     home: const Home()
   ));
+}*/
+
+void main() async {
+  runApp(
+    MaterialApp(
+      debugShowCheckedModeBanner: false,
+      initialRoute: '/',
+      theme: ThemeData(
+        scaffoldBackgroundColor: const Color.fromARGB(255, 23, 23, 23)
+      ),
+      routes: {
+        '/': (context) => const Home(),
+        '/detail': (context) => const ItemPage(id: 0),
+      }
+    ),
+  );
 }

lib/model/item.dart

@@ -2,18 +2,21 @@ class Item {
   int id;
   String mime;
   int tagId;
+  String dest;
   
   Item({
     required this.id,
     required this.mime,
-    required this.tagId
+    this.tagId = 0,
+    this.dest = ''
   });
 
   factory Item.fromJson(Map<String, dynamic> data) {
     return Item(
       id: data['id'],
       mime: data['mime'],
-      tagId: data['tag_id']
+      tagId: data['tag_id'] ?? 0,
+      dest: data['dest'] ?? ''
     );
   }
 }

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(
+                      return GestureDetector(
-                        children: <Widget>[
+                        onTap: () {
-                          Image.network("https://f0ck.dev/t/${snapshot.data?[index].id}.webp"),
+                          Navigator.push(
-                          SizedBox(
+                            context,
-                            child: Align(
+                            MaterialPageRoute(
-                              alignment: FractionalOffset.bottomRight,
+                              builder: (context) => ItemPage(id: snapshot.data![index].id),
-                              child: Padding(
+                            ),
-                                padding: const EdgeInsets.only(bottom: 0, right: 0),
+                          );
-                                child: Icon(
+                        },
-                                  Icons.square,
+                        child: Stack(
-                                  color: mode,
+                          children: <Widget>[
-                                  size: 15.0
+                            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();
+      }
+    );
+  }
+}