Merge pull request #3 from adityadroid/ConversationUI

Completed Conversation Screen UI

lib/config/Assets.dart

@@ -0,0 +1,3 @@
+class Assets{
+  static String user = 'assets/user.png';
+}

lib/config/Palette.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+// Color palette for the app
+class Palette{
+  static Color primaryColor = Colors.blue;
+  static Color secondaryColor = Colors.black;
+  static Color primaryTextColor = Colors.black;
+  static Color secondaryTextColor = Colors.black87;
+  static Color primaryBackgroundColor = Colors.white;
+  static Color selfMessageBackgroundColor = Colors.blueGrey;
+  static Color otherMessageBackgroundColor = Colors.tealAccent;
+  static Color selfMessageColor = Colors.white;
+  static Color otherMessageColor = Color(0xff3f3f3f);
+  static Color greyColor = Colors.grey;
+}

lib/main.dart

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
+import 'pages/ConversationPageList.dart';
 
-void main() => runApp(MyApp());
+void main() => runApp(Messio());
 
-class MyApp extends StatelessWidget {
+class Messio extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
@@ -11,37 +12,7 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
-      home: MyHomePage(title: 'Messio'),
+      home: ConversationPageList(),
     );
   }
 }
-
-class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key, this.title}) : super(key: key);
-
-  final String title;
-
-  @override
-  _MyHomePageState createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-
-  @override
-  Widget build(BuildContext context) {
-    // The Flutter framework has been optimized to make rerunning build methods
-    // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
-    return Scaffold(
-      appBar: AppBar(
-        // Here we take the value from the MyHomePage object that was created by
-        // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
-      ),
-      body: Center(
-          child:Text('Hello World!')
-      )
-    );
-
-  }
-}

lib/pages/ConversationPage.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:messio/widgets/ChatAppBar.dart';
+import 'package:messio/widgets/ChatListWidget.dart';
+import 'package:messio/widgets/InputWidget.dart';
+
+class ConversationPage extends StatefulWidget {
+  @override
+  _ConversationPageState createState() => _ConversationPageState();
+}
+
+class _ConversationPageState extends State<ConversationPage> {
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Scaffold(
+          appBar: ChatAppBar(), // Custom app bar for chat screen
+          body: Stack(children: <Widget>[
+            Column(
+              children: <Widget>[
+              ChatListWidget(),
+                InputWidget()
+              ],
+            ),
+          ]
+    )
+      )
+    );
+  }
+
+
+}

lib/pages/ConversationPageList.dart

@@ -0,0 +1,25 @@
+
+import 'package:flutter/material.dart';
+import 'ConversationPage.dart';
+
+class ConversationPageList extends StatefulWidget {
+
+  @override
+  _ConversationPageListState createState() => _ConversationPageListState();
+}
+
+class _ConversationPageListState extends State<ConversationPageList> {
+
+  @override
+  Widget build(BuildContext context) {
+    return PageView(
+      children: <Widget>[
+        ConversationPage(),
+        ConversationPage(),
+        ConversationPage()
+      ],
+    );
+
+
+  }
+}

lib/widgets/ChatAppBar.dart

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:messio/config/Assets.dart';
+import 'package:messio/config/Palette.dart';
+
+class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
+  final double height = 100;
+  @override
+  Widget build(BuildContext context) {
+    var textHeading = TextStyle(color: Palette.primaryTextColor, fontSize: 20); // Text style for the name
+    var textStyle = TextStyle(color: Palette.secondaryTextColor); // Text style for everything else
+
+    double width = MediaQuery.of(context).size.width; // calculate the screen width
+    return Material(
+        child: Container(
+            decoration: new BoxDecoration(boxShadow: [ //adds a shadow to the appbar
+              new BoxShadow(
+              color: Colors.black,
+              blurRadius: 5.0,
+            )]),
+            child:  Container(
+                color: Palette.primaryBackgroundColor,
+                child: Row(children: <Widget>[
+              Expanded( //we're dividing the appbar into 7 : 3 ratio. 7 is for content and 3 is for the display picture.
+                  flex: 7,
+                  child: Center(
+                      child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: <Widget>[
+                      Container(
+                          height: 70 - (width * .06),
+                          child: Row(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: <Widget>[
+                              Expanded(
+                                  flex: 2,
+                                  child: Center(
+                                      child: Icon(
+                                    Icons.attach_file,
+                                    color: Palette.secondaryColor,
+                                  ))),
+                              Expanded(
+                                  flex: 6,
+                                  child: Container(
+                                      child: Column(
+                                    crossAxisAlignment:
+                                        CrossAxisAlignment.start,
+                                    mainAxisAlignment: MainAxisAlignment.center,
+                                    mainAxisSize: MainAxisSize.min,
+                                    children: <Widget>[
+                                      Text('Aditya Gurjar', style: textHeading),
+                                      Text('@adityagurjar', style: textStyle)
+                                    ],
+                                  ))),
+                            ],
+                          )),
+                      //second row containing the buttons for media
+                      Container(
+                          height: 23,
+                          padding: EdgeInsets.fromLTRB(20, 5, 5, 0),
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.start,
+                            crossAxisAlignment: CrossAxisAlignment.center,
+                            children: <Widget>[
+                              Text(
+                                'Photos',
+                                style: textStyle,
+                              ),
+                              VerticalDivider(
+                                width: 30,
+                                color: Palette.primaryTextColor,
+                              ),
+                              Text(
+                                'Videos',
+                                style: textStyle,
+                              ),
+                              VerticalDivider(
+                                width: 30,
+                                color: Palette.primaryTextColor,
+                              ),
+                              Text('Files', style: textStyle)
+                            ],
+                          )),
+                    ],
+                  ))),
+                //This is the display picture
+              Expanded(
+                  flex: 3,
+                  child: Container(
+                      child: Center(
+                          child: CircleAvatar(
+                    radius: (80 - (width * .06)) / 2,
+                    backgroundImage: Image.asset(
+                      Assets.user,
+                    ).image,
+                  )))),
+            ]))));
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(height);
+}

lib/widgets/ChatItemWidget.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:messio/config/Palette.dart';
+import 'package:intl/intl.dart';
+
+class ChatItemWidget extends StatelessWidget{
+  var index;
+
+  ChatItemWidget(this.index);
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO: implement build
+    if (index % 2 == 0) {
+      //This is the sent message. We'll later use data from firebase instead of index to determine the message is sent or received.
+      return Container(
+          child: Column(children: <Widget>[
+            Row(
+              children: <Widget>[
+                Container(
+                  child: Text(
+                    'This is a sent message',
+                    style: TextStyle(color: Palette.selfMessageColor),
+                  ),
+                  padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                  width: 200.0,
+                  decoration: BoxDecoration(
+                      color: Palette.selfMessageBackgroundColor,
+                      borderRadius: BorderRadius.circular(8.0)),
+                  margin: EdgeInsets.only(right: 10.0),
+                )
+              ],
+              mainAxisAlignment:
+              MainAxisAlignment.end, // aligns the chatitem to right end
+            ),
+            Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: <Widget>[
+                  Container(
+                    child: Text(
+                      DateFormat('dd MMM kk:mm')
+                          .format(DateTime.fromMillisecondsSinceEpoch(1565888474278)),
+                      style: TextStyle(
+                          color: Palette.greyColor,
+                          fontSize: 12.0,
+                          fontStyle: FontStyle.normal),
+                    ),
+                    margin: EdgeInsets.only(left: 5.0, top: 5.0, bottom: 5.0),
+                  )])
+          ]));
+    } else {
+      // This is a received message
+      return Container(
+        child: Column(
+          children: <Widget>[
+            Row(
+              children: <Widget>[
+                Container(
+                  child: Text(
+                    'This is a received message',
+                    style: TextStyle(color: Palette.otherMessageColor),
+                  ),
+                  padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
+                  width: 200.0,
+                  decoration: BoxDecoration(
+                      color: Palette.otherMessageBackgroundColor,
+                      borderRadius: BorderRadius.circular(8.0)),
+                  margin: EdgeInsets.only(left: 10.0),
+                )
+              ],
+            ),
+            Container(
+              child: Text(
+                DateFormat('dd MMM kk:mm')
+                    .format(DateTime.fromMillisecondsSinceEpoch(1565888474278)),
+                style: TextStyle(
+                    color: Palette.greyColor,
+                    fontSize: 12.0,
+                    fontStyle: FontStyle.normal),
+              ),
+              margin: EdgeInsets.only(left: 5.0, top: 5.0, bottom: 5.0),
+            )
+          ],
+          crossAxisAlignment: CrossAxisAlignment.start,
+        ),
+        margin: EdgeInsets.only(bottom: 10.0),
+      );
+    }  }
+
+}

lib/widgets/ChatListWidget.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+import 'ChatItemWidget.dart';
+
+
+class ChatListWidget extends StatelessWidget{
+  final ScrollController listScrollController = new ScrollController();
+  @override
+  Widget build(BuildContext context) {
+    // TODO: implement build
+    return Flexible(
+        child: ListView.builder(
+          padding: EdgeInsets.all(10.0),
+          itemBuilder: (context, index) => ChatItemWidget(index),
+          itemCount: 20,
+          reverse: true,
+          controller: listScrollController,
+        ));
+  }
+}