Desktop responsiveness

lib/app.dart

@@ -2,8 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:snapam/util/constants/strings.dart';
 import 'package:snapam/util/theme_config.dart';
-import 'package:snapam/views/pages/auth/login.dart';
-import 'package:snapam/views/pages/main_screen.dart';
+import 'package:snapam/views/pages/tabs_screen/base_page.dart';
 
 class MyApp extends StatelessWidget {
   @override
@@ -13,7 +12,7 @@ class MyApp extends StatelessWidget {
       title: appName,
       theme: themeData(ThemeConfig.lightTheme),
       // darkTheme: themeData(ThemeConfig.darkTheme),
-      home: MainScreen(),
+      home: BasePage(),
     );
   }
 

lib/util/constants/strings.dart

@@ -1 +1 @@
-const String appName = 'Snapam';
+const String appName = 'Chat app';

lib/views/components/chat_item.dart

@@ -31,7 +31,7 @@ class _ChatItemState extends State<ChatItem> {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8.0),
       child: ListTile(
-        contentPadding: EdgeInsets.all(0),
+        contentPadding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
         leading: Stack(
           children: <Widget>[
             CircleAvatar(

lib/views/pages/auth/login.dart

@@ -8,7 +8,7 @@ import 'package:snapam/util/navigate.dart';
 import 'package:snapam/util/validations.dart';
 import 'package:snapam/views/components/custom_button.dart';
 import 'package:snapam/views/components/custom_text_field.dart';
-import 'package:snapam/views/pages/main_screen.dart';
+import 'package:snapam/views/pages/tabs_screen/base_page.dart';
 
 class Login extends StatefulWidget {
   @override
@@ -34,7 +34,7 @@ class _LoginState extends State<Login> {
       setState(() {});
       showInSnackBar('Please fix the errors in red before submitting.');
     } else {
-      Navigate.pushPageReplacement(context, MainScreen());
+      Navigate.pushPageReplacement(context, BasePage());
     }
   }
 

lib/views/pages/chat/chat_list.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:snapam/util/data.dart';
+import 'package:snapam/views/components/chat_item.dart';
+
+class ChatList extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ListView.separated(
+      separatorBuilder: (BuildContext context, int index) {
+        return Align(
+          alignment: Alignment.centerRight,
+          child: Container(
+            height: 0.5,
+            width: MediaQuery.of(context).size.width / 1.3,
+            child: Divider(),
+          ),
+        );
+      },
+      itemCount: chats.length,
+      itemBuilder: (BuildContext context, int index) {
+        Map chat = chats[index];
+        return ChatItem(
+          dp: chat['dp'],
+          name: chat['name'],
+          isOnline: chat['isOnline'],
+          counter: chat['counter'],
+          msg: chat['msg'],
+          time: chat['time'],
+        );
+      },
+    );
+  }
+}

lib/views/pages/chat/chats.dart

@@ -1,46 +1,28 @@
 import 'package:flutter/material.dart';
-import 'package:snapam/util/data.dart';
-import 'package:snapam/views/components/chat_item.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+import 'package:snapam/views/pages/chat/chat_list.dart';
+import 'package:snapam/views/pages/chat/conversation.dart';
 
-class Chats extends StatefulWidget {
-  @override
-  _ChatsState createState() => _ChatsState();
-}
-
-class _ChatsState extends State<Chats> {
+class Chats extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text(
-          'Chat'
-        ),
-      ),
-      body: ListView.separated(
-        padding: EdgeInsets.all(10),
-        separatorBuilder: (BuildContext context, int index) {
-          return Align(
-            alignment: Alignment.centerRight,
-            child: Container(
-              height: 0.5,
-              width: MediaQuery.of(context).size.width / 1.3,
-              child: Divider(),
-            ),
-          );
-        },
-        itemCount: chats.length,
-        itemBuilder: (BuildContext context, int index) {
-          Map chat = chats[index];
-          return ChatItem(
-            dp: chat['dp'],
-            name: chat['name'],
-            isOnline: chat['isOnline'],
-            counter: chat['counter'],
-            msg: chat['msg'],
-            time: chat['time'],
-          );
-        },
+      // appBar: AppBar(title: Text('Chat')),
+      body: ScreenTypeLayout(
+        mobile: ChatList(),
+        desktop: buildDesktop(),
+        tablet: buildDesktop(),
       ),
     );
   }
+
+  buildDesktop() {
+    return Row(
+      children: [
+        Container(width: 400.0, child: ChatList()),
+        VerticalDivider(thickness: 1, width: 1),
+        Flexible(child: Conversation()),
+      ],
+    );
+  }
 }

lib/views/pages/chat/conversation.dart

@@ -1,8 +1,8 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
-import 'package:snapam/views/components/chat_bubble.dart';
 import 'package:snapam/util/data.dart';
+import 'package:snapam/views/components/chat_bubble.dart';
 
 class Conversation extends StatefulWidget {
   @override
@@ -24,7 +24,7 @@ class _ConversationState extends State<Conversation> {
           ),
           onPressed: () => Navigator.pop(context),
         ),
-        titleSpacing: 0,
+        titleSpacing: 0.0,
         title: InkWell(
           child: Row(
             children: <Widget>[
@@ -62,14 +62,6 @@ class _ConversationState extends State<Conversation> {
           ),
           onTap: () {},
         ),
-        actions: <Widget>[
-          IconButton(
-            icon: Icon(
-              Icons.more_horiz,
-            ),
-            onPressed: () {},
-          ),
-        ],
       ),
       body: Container(
         height: MediaQuery.of(context).size.height,
@@ -112,7 +104,7 @@ class _ConversationState extends State<Conversation> {
                     children: <Widget>[
                       IconButton(
                         icon: Icon(
-                          Icons.add,
+                          Icons.photo,
                           color: Theme.of(context).accentColor,
                         ),
                         onPressed: () {},
@@ -130,19 +122,13 @@ class _ConversationState extends State<Conversation> {
                             hintText: "Write your message...",
                             hintStyle: TextStyle(
                               fontSize: 15.0,
-                              color: Theme.of(context).textTheme.headline6.color,
+                              color:
+                                  Theme.of(context).textTheme.headline6.color,
                             ),
                           ),
                           maxLines: null,
                         ),
                       ),
-                      IconButton(
-                        icon: Icon(
-                          Icons.mic,
-                          color: Theme.of(context).accentColor,
-                        ),
-                        onPressed: () {},
-                      )
                     ],
                   ),
                 ),

lib/views/pages/home.dart

@@ -10,13 +10,14 @@ class Home extends StatefulWidget {
 class _HomeState extends State<Home> {
   @override
   Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
     return Scaffold(
       appBar: AppBar(
         title: Text("Home"),
         centerTitle: true,
       ),
       body: ListView.builder(
-        padding: EdgeInsets.symmetric(horizontal: 20),
+        padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.2),
         itemCount: posts.length,
         itemBuilder: (BuildContext context, int index) {
           Map post = posts[index];

lib/views/pages/profile.dart

@@ -43,40 +43,6 @@ class _ProfileState extends State<Profile> {
                 style: TextStyle(),
               ),
               SizedBox(height: 20),
-              Row(
-                mainAxisSize: MainAxisSize.min,
-                children: <Widget>[
-                  FlatButton(
-                    child: Icon(
-                      Icons.message,
-                      color: Colors.white,
-                    ),
-                    color: Colors.grey,
-                    onPressed: () {},
-                  ),
-                  SizedBox(width: 10),
-                  FlatButton(
-                    child: Icon(
-                      Icons.add,
-                      color: Colors.white,
-                    ),
-                    color: Theme.of(context).accentColor,
-                    onPressed: () {},
-                  ),
-                ],
-              ),
-              SizedBox(height: 40),
-              Padding(
-                padding: EdgeInsets.symmetric(horizontal: 50),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: <Widget>[
-                    _buildCategory("Posts"),
-                    _buildCategory("Friends"),
-                    _buildCategory("Groups"),
-                  ],
-                ),
-              ),
               SizedBox(height: 20),
               GridView.builder(
                 shrinkWrap: true,

lib/views/pages/tabs_screen/base_page.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+
+import 'desktop/rails_page.dart';
+import 'mobile/tabs_page.dart';
+
+class BasePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ScreenTypeLayout(
+      mobile: TabsPage(),
+      desktop: RailsPage(),
+      tablet: RailsPage(),
+    );
+  }
+}