Flutter Chat UI

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chat',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.grey.shade800,
      ),
      home: MyHomePage(title: 'Flutter Chat'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _msgController = TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(bottom: 74.0),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                MessageTile(
                  message: 'Hello',
                  sender: 'Bob',
                  sentByMe: true,
                ),
                MessageTile(
                  message: "How's it going?",
                  sender: 'Bob',
                  sentByMe: true,
                ),
                MessageTile(
                  message: 'Hey, Bob! Nothing much! How about you?',
                  sender: 'Joe',
                  sentByMe: false,
                ),
                MessageTile(
                  message: 'Same! Watching Netflix!',
                  sender: 'Bob',
                  sentByMe: true,
                ),
                MessageTile(
                  message: 'Did you watch the last episode of GOT?',
                  sender: 'Joe',
                  sentByMe: false,
                ),
                MessageTile(
                  message: "I don't want to spoil it but you will be surprized for sure",
                  sender: 'Joe',
                  sentByMe: false,
                ),
                MessageTile(
                  message: "Nah, I'm not there yet!",
                  sender: 'Bob',
                  sentByMe: true,
                ),
                MessageTile(
                  message: "Tbh, I've a mix feelings about it",
                  sender: 'Bob',
                  sentByMe: true,
                ),
                MessageTile(
                  message: "Yeah, I'm happy with the ending but was expecting little more",
                  sender: 'Joe',
                  sentByMe: false,
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            flex: 5,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                controller: _msgController,
                keyboardType: TextInputType.text,
                maxLines: 1,
                onChanged: (value) {},
                decoration: InputDecoration(
                  hintText: 'Enter your msg',
                  fillColor: Theme.of(context).primaryColor,
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Theme.of(context).primaryColor, width: 1.0),
                    borderRadius: BorderRadius.all(Radius.circular(15.0)),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: IconButton(
              icon: Icon(Icons.send),
              hoverColor: Colors.grey.shade400,
              onPressed: () {
                _msgController.clear();
              },
            ),
          ),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

class MessageTile extends StatelessWidget {
  final String message;
  final String sender;
  final bool sentByMe;

  MessageTile({this.message, this.sender, this.sentByMe});

  @override
  Widget build(BuildContext context) {
    var currentTime = DateTime.now().toIso8601String().substring(11,19);
    
    return Container(
      padding: EdgeInsets.only(
        top: 4,
        bottom: 4,
        left: sentByMe ? 0 : 24,
        right: sentByMe ? 24 : 0,
      ),
      alignment: sentByMe ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: sentByMe 
          ? EdgeInsets.only(left: 30) 
          : EdgeInsets.only(right: 30),
        padding: EdgeInsets.symmetric(vertical: 17, horizontal: 20),
        decoration: BoxDecoration(
          borderRadius: sentByMe
              ? BorderRadius.only(
                topLeft: Radius.circular(23),
                topRight: Radius.circular(23),
                bottomLeft: Radius.circular(23),
              )
              : BorderRadius.only(
                topLeft: Radius.circular(23),
                topRight: Radius.circular(23),
                bottomRight: Radius.circular(23),
              ),
          color: sentByMe ? Colors.blueAccent : Colors.grey.shade500,
          boxShadow: <BoxShadow>[
            BoxShadow(
              offset: Offset(2.0, 4.0),
              color: sentByMe ? Colors.blueAccent.shade100 : Colors.grey.shade400,
              blurRadius: 8.0,
              spreadRadius: 0.5,
            ),
          ],
        ),
        child: Container(
          width: message.length > 25 
            ? MediaQuery.of(context).size.width / 2.5 
            : MediaQuery.of(context).size.width / 3.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 3.0),
                child: Text(
                  sender.toUpperCase(),
                  textAlign: TextAlign.start,
                  softWrap: true,
                  style: Theme.of(context).textTheme.bodyText1.copyWith(
                    color: Colors.grey.shade900,
                  ),
                ),
              ),
              Text(
                message,
                textAlign: TextAlign.start,
                softWrap: true,
                style: Theme.of(context).textTheme.subtitle1.copyWith(
                  color: Colors.white,
                ),
              ),
              Align(
                alignment: Alignment.bottomRight,
                child: Padding(
                  padding: const EdgeInsets.only(top: 8.0),
                  child: Text(
                    currentTime,
                    softWrap: true,
                    style: Theme.of(context).textTheme.caption.copyWith(
                      color: Colors.white54,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}