First attempt into UI,

lets hope it's gonna be usable

lib/main.dart

@@ -5,5 +5,8 @@ import 'package:sqflite_common_ffi/sqflite_ffi.dart';
 void main() {
   sqfliteFfiInit();
   databaseFactory = databaseFactoryFfi;
-  runApp(MaterialApp(home: MainView()));
+  runApp(MaterialApp(
+    home: MainView(),
+    theme: ThemeData(fontFamily: 'Eurostile Round'),
+  ));
 }

lib/views/main_view.dart

@@ -9,6 +9,11 @@ String _searchFor = "";
 late TetrioPlayer me;
 DB db = DB();
 TetrioService teto = TetrioService();
+const allowedHeightForPlayerIdInPixels = 60.0;
+const allowedHeightForPlayerBioInPixels = 30.0;
+const givenTextHeightByScreenPercentage = 0.3;
+
+enum SampleItem { itemOne, itemTwo, itemThree }
 
 class MainView extends StatefulWidget {
   const MainView({Key? key}) : super(key: key);
@@ -50,77 +55,205 @@ class _MainViewState extends State<MainView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      drawer: NavDrawer(),
+      backgroundColor: Colors.black,
+      body: CustomScrollView(
+        slivers: [
+          SliverAppBar(
             title: const Text("Tetra Stats"),
-      ),
+            floating: false,
-      body: Row(
+            pinned: true,
+            flexibleSpace: Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-          Expanded(
+                ClipRRect(
-              child: TextField(
+                  borderRadius: BorderRadius.circular(1000),
-            onChanged: (String value) {
+                  child: Image.network(
-              _searchFor = value;
+                    "https://tetr.io/user-content/avatars/6098518e3d5155e6ec429cdc.jpg?rv=1673453211638",
-            },
+                    fit: BoxFit.fitHeight,
-            onSubmitted: (String value) {
+                    height: 256,
-              setState(() {
+                  ),
-                me = fetchTetrioPlayer(value);
+                ),
-              });
+                LayoutBuilder(builder: (context, constraints) {
-            },
+                  return Column(
-            maxLength: 25,
+                    mainAxisSize: MainAxisSize.min,
-          )),
+                    mainAxisAlignment: MainAxisAlignment.center,
-          TextButton(
+                    children: [
-              child: const Text("Search"),
+                      if (constraints.maxHeight *
-              onPressed: () {
+                              givenTextHeightByScreenPercentage >
-                setState(() {
+                          allowedHeightForPlayerBioInPixels)
-                  me = fetchTetrioPlayer(_searchFor);
+                        const Text("dan63047",
-                });
+                            style: TextStyle(
-              }),
+                                fontFamily: "Eurostile Round Extended",
-          FutureBuilder<TetrioPlayer>(
+                                color: Colors.white,
-            future: me,
+                                fontSize: 42))
-            builder: (context, snapshot) {
+                      else
-              if (snapshot.hasData) {
+                        const Text("dan63047",
-                snapshot.data!.getRecords();
+                            style: TextStyle(
-                teto.storeState(snapshot.data!, db);
+                                fontFamily: "Eurostile Round Extended",
-                return Flexible(
+                                color: Colors.white,
-                    child: Column(children: [
+                                fontSize: 36)),
-                  Text(snapshot.data!.username.toString()),
+                      if (constraints.maxHeight *
-                  Text(snapshot.data!.userId.toString()),
+                              givenTextHeightByScreenPercentage >
-                  Text(snapshot.data!.role.toString()),
+                          allowedHeightForPlayerIdInPixels)
-                  Text(
+                        const Text(
-                      "Level ${snapshot.data!.level.toStringAsFixed(2)} (${snapshot.data!.xp} XP)"),
+                          "6098518e3d5155e6ec429cdc",
-                  Text("Registered ${snapshot.data!.registrationTime}"),
+                          style: TextStyle(
-                  Text("Bio: ${snapshot.data!.bio}", softWrap: true),
+                              fontFamily: "Eurostile Round Condensed",
-                  Text("Country: ${snapshot.data!.country}"),
+                              color: Colors.white,
-                  Text("${snapshot.data!.friendCount} friends"),
+                              fontSize: 14),
-                  Text(
+                        ),
-                      "Won/PLayed: ${snapshot.data!.gamesWon}/${snapshot.data!.gamesPlayed}"),
+                      if (constraints.maxHeight *
-                  Text("Gametime: ${snapshot.data!.gameTime}"),
+                              givenTextHeightByScreenPercentage >
-                  Text("Supporter tier ${snapshot.data!.supporterTier}"),
+                          allowedHeightForPlayerBioInPixels)
-                  const Text("\nTetra League", softWrap: true),
+                        const Text(
-                  Text(
+                            "osk, please, if my supporter ends, let me use :petthekagari: in the chat",
-                      "${snapshot.data!.tlSeason1.rating.toStringAsFixed(2)} TR"),
+                            style: TextStyle(
-                  Text(
+                              fontFamily: "Eurostile Round",
-                      "${snapshot.data!.tlSeason1.glicko?.toStringAsFixed(2)}±${snapshot.data!.tlSeason1.rd?.toStringAsFixed(2)} GLICKO"),
+                              color: Colors.white,
-                  Text(
+                              fontSize: 16,
-                      "Rank: ${snapshot.data!.tlSeason1.rank.toUpperCase()} (top ${(snapshot.data!.tlSeason1.percentile * 100).toStringAsFixed(2)}%)"),
+                            ),
-                  Text(
+                            softWrap: true),
-                      "Won/Games: ${snapshot.data!.tlSeason1.gamesPlayed}/${snapshot.data!.tlSeason1.gamesWon}"),
+                    ],
-                  Text(
+                  );
-                      "№${snapshot.data!.tlSeason1.standing} (№${snapshot.data!.tlSeason1.standingLocal} in country)"),
+                })
-                  Text(
+              ],
-                      "${snapshot.data!.tlSeason1.apm} APM, ${snapshot.data!.tlSeason1.pps} PPS, ${snapshot.data!.tlSeason1.vs} VS, ${snapshot.data!.tlSeason1.app?.toStringAsFixed(3)} APP"),
+            ),
-                  const Text("\n40 Lines", softWrap: true),
+            expandedHeight: 400,
-                  Text(snapshot.data!.sprint.isNotEmpty
+            backgroundColor: Colors.black,
-                      ? snapshot.data!.sprint[0].toString()
+            actions: [
-                      : "No record"),
+              IconButton(
-                ]));
+                onPressed: () {},
-              } else if (snapshot.hasError) {
+                icon: const Icon(Icons.search),
-                return Text('${snapshot.error}');
+                tooltip: "Search player",
-              }
+              ),
-
+              PopupMenuButton(
-              // By default, show a loading spinner.
+                itemBuilder: (BuildContext context) =>
-              return const CircularProgressIndicator();
+                    <PopupMenuEntry<SampleItem>>[
-            },
+                  const PopupMenuItem<SampleItem>(
+                    value: SampleItem.itemOne,
+                    child: Text('Item 1'),
+                  ),
+                  const PopupMenuItem<SampleItem>(
+                    value: SampleItem.itemTwo,
+                    child: Text('Item 2'),
+                  ),
+                  const PopupMenuItem<SampleItem>(
+                    value: SampleItem.itemThree,
+                    child: Text('Item 3'),
+                  ),
+                ],
+              ),
+            ],
+          ),
+          SliverList(
+            delegate: SliverChildBuilderDelegate(
+              (context, index) => ListTile(
+                title: Text('Item #$index'),
+                tileColor: Colors.transparent,
+                textColor: Colors.white,
+              ),
+              childCount: 1000,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class NavDrawer extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: <Widget>[
+          const DrawerHeader(
+            child: Text(
+              'Side menu',
+              style: TextStyle(color: Colors.white, fontSize: 25),
+            ),
+            decoration: BoxDecoration(
+                color: Color.fromARGB(255, 40, 44, 41),
+                image: DecorationImage(
+                    fit: BoxFit.fill,
+                    image: AssetImage('assets/images/cover.jpg'))),
+          ),
+          ListTile(
+            leading: const Icon(Icons.input),
+            title: const Text('Welcome'),
+            onTap: () => {},
+          ),
+          ListTile(
+            leading: const Icon(Icons.verified_user),
+            title: const Text('Profile'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.settings),
+            title: const Text('Settings'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.border_color),
+            title: const Text('Feedback'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.exit_to_app),
+            title: const Text('Logout'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.input),
+            title: const Text('Welcome'),
+            onTap: () => {},
+          ),
+          ListTile(
+            leading: const Icon(Icons.verified_user),
+            title: const Text('Profile'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.settings),
+            title: const Text('Settings'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.border_color),
+            title: const Text('Feedback'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.exit_to_app),
+            title: const Text('Logout'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.input),
+            title: const Text('Welcome'),
+            onTap: () => {},
+          ),
+          ListTile(
+            leading: const Icon(Icons.verified_user),
+            title: const Text('Profile'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.settings),
+            title: const Text('Settings'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.border_color),
+            title: const Text('Feedback'),
+            onTap: () => {Navigator.of(context).pop()},
+          ),
+          ListTile(
+            leading: const Icon(Icons.exit_to_app),
+            title: const Text('Logout'),
+            onTap: () => {Navigator.of(context).pop()},
           ),
         ],
       ),

pubspec.yaml

@@ -93,3 +93,39 @@ flutter:
   #
   # For details regarding fonts from package dependencies,
   # see https://flutter.dev/custom-fonts/#from-packages
+  fonts:
+    - family: Eurostile Round
+      fonts:
+        - asset: res/fonts/EurostileRound-Black.ttf
+        - asset: res/fonts/EurostileRound-BlackItalic.ttf
+        - asset: res/fonts/EurostileRound-Bold.ttf
+        - asset: res/fonts/EurostileRound-BoldItalic.ttf
+        - asset: res/fonts/EurostileRound-Heavy.ttf
+          weight: 900
+        - asset: res/fonts/EurostileRound-HeavyItalic.ttf
+          weight: 900
+          style: italic
+        - asset: res/fonts/EurostileRound-Italic.ttf
+          style: italic
+        - asset: res/fonts/EurostileRound-Medium.ttf
+        - asset: res/fonts/EurostileRound-MediumItalic.ttf
+          weight: 500
+          style: italic
+        - asset: res/fonts/EurostileRound-Regular.ttf
+    - family: Eurostile Round Condensed
+      fonts:
+        - asset: res/fonts/EurostileRoundCondensed-Heavy.ttf
+        - asset: res/fonts/EurostileRoundCondensed-HeavyItalic.ttf
+        - asset: res/fonts/EurostileRoundCondensed-Italic.ttf
+        - asset: res/fonts/EurostileRoundCondensed-Regular.ttf
+    - family: Eurostile Round Extended
+      fonts:
+        - asset: res/fonts/EurostileRoundExtended-Black.ttf
+        - asset: res/fonts/EurostileRoundExtended-BlackItalic.ttf
+          weight: 900
+          style: italic
+        - asset: res/fonts/EurostileRoundExtended-Italic.ttf
+          style: italic
+        - asset: res/fonts/EurostileRoundExtended-Medium.ttf
+          weight: 500
+        - asset: res/fonts/EurostileRoundExtended-Regular.ttf