Pantallas Usuarios y Chat

lib/main.dart

@@ -28,7 +28,7 @@ class MyApp extends StatelessWidget {
         // closer together (more dense) than on mobile platforms.
         visualDensity: VisualDensity.adaptivePlatformDensity,
       ),
-      initialRoute: 'login',
+      initialRoute: 'chat',
       routes: appRoutes,
     );
   }

lib/models/usuario.dart

@@ -0,0 +1,16 @@
+
+class Usuario {
+
+  String nombre;
+  String email;
+  String uid;
+  bool online;
+
+  Usuario({
+    this.nombre,
+    this.email,
+    this.uid,
+    this.online
+  });
+
+}

lib/pages/chat_page.dart

@@ -1,12 +1,158 @@
+import 'dart:io';
+
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:chat_socket/widgets/chat_message.dart';
+
+class ChatPage extends StatefulWidget {
+  @override
+  _ChatPageState createState() => _ChatPageState();
+}
+
+class _ChatPageState extends State<ChatPage> with TickerProviderStateMixin {
+  final _textController = new TextEditingController();
+  final _focusNode = new FocusNode();
+  bool _estaEscribiendo = false;
+
+  List<ChatMessage> _messages = [
+    // ChatMessage(texto: 'Hola Mundo', uid: '123'),
+    // ChatMessage(texto: 'Hola Mundo', uid: '456'),
+  ];
 
-class ChatPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: Text('EspPage'),
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+        title: Column(
+          children: [
+            CircleAvatar(
+              child: Text(
+                'Te',
+                style: TextStyle(fontSize: 12),
+              ),
+              backgroundColor: Colors.blue[100],
+              maxRadius: 14,
+            ),
+            SizedBox(
+              height: 3,
+            ),
+            Text(
+              'Nombre',
+              style: TextStyle(color: Colors.black54, fontSize: 14),
+            )
+          ],
+        ),
+        centerTitle: true,
+        elevation: 1,
+      ),
+      body: Container(
+        child: Column(
+          children: [
+            Flexible(
+              child: ListView.builder(
+                physics: BouncingScrollPhysics(),
+                itemCount: _messages.length,
+                itemBuilder: (_, i) => _messages[i],
+                reverse: true,
+              ),
+            ),
+            Divider(
+              height: 1,
+            ),
+            Container(
+              color: Colors.white,
+              child: _inputChat(),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _inputChat() {
+    return SafeArea(
+      child: Container(
+        margin: EdgeInsets.symmetric(horizontal: 8.0),
+        child: Row(
+          children: [
+            Flexible(
+              child: TextField(
+                controller: _textController,
+                onSubmitted: _handleSubmit,
+                onChanged: (texto) {
+                  setState(() {
+                    if (texto.trim().length > 0) {
+                      _estaEscribiendo = true;
+                    } else {
+                      _estaEscribiendo = false;
+                    }
+                  });
+                },
+                decoration:
+                    InputDecoration.collapsed(hintText: 'Enviar mensaje'),
+                focusNode: _focusNode,
+              ),
+            ),
+            Container(
+              margin: EdgeInsets.symmetric(horizontal: 4.0),
+              child: Platform.isIOS
+                  ? CupertinoButton(
+                      child: Text('Enviar'),
+                      onPressed: _estaEscribiendo
+                          ? () => _handleSubmit(_textController.text.trim())
+                          : null,
+                    )
+                  : Container(
+                      margin: EdgeInsets.symmetric(horizontal: 4.0),
+                      child: IconTheme(
+                        data: IconThemeData(color: Colors.blue[400]),
+                        child: IconButton(
+                          highlightColor: Colors.transparent,
+                          splashColor: Colors.transparent,
+                          icon: Icon(Icons.send),
+                          onPressed: _estaEscribiendo
+                              ? () => _handleSubmit(_textController.text.trim())
+                              : null,
+                        ),
+                      ),
+                    ),
+            )
+          ],
+        ),
       ),
     );
   }
+
+  _handleSubmit(String texto) {
+    if (texto.length == 0) return;
+
+    print(texto);
+    _textController.clear();
+    _focusNode.requestFocus();
+
+    final newMessage = new ChatMessage(
+      texto: texto,
+      uid: '123',
+      animationController: AnimationController(
+          vsync: this, duration: Duration(milliseconds: 400)),
+    );
+
+    _messages.insert(0, newMessage);
+    newMessage.animationController.forward();
+
+    setState(() {
+      _estaEscribiendo = false;
+    });
+  }
+
+  @override
+  void dispose() {
+    //TODO Off del socket
+    // Eliminamos los controladores de animación de todos los mensajes
+    for (ChatMessage messages in _messages) {
+      messages.animationController.dispose();
+    }
+    super.dispose();
+  }
 }

lib/pages/user_page.dart

@@ -1,13 +1,94 @@
 import 'package:flutter/material.dart';
+import 'package:pull_to_refresh/pull_to_refresh.dart';
+import 'package:chat_socket/models/usuario.dart';
+
+class UserPage extends StatefulWidget {
+  @override
+  _UserPageState createState() => _UserPageState();
+}
+
+class _UserPageState extends State<UserPage> {
+  RefreshController _refreshController =
+      RefreshController(initialRefresh: false);
+
+  final usuarios = [
+    Usuario(nombre: '1Nombre', email: 'test1@test.com', uid: '1', online: true),
+    Usuario(
+        nombre: '2Nombre', email: 'test2@test.com', uid: '1', online: false),
+    Usuario(
+        nombre: '3Nombre', email: 'test3@test.com', uid: '1', online: false),
+  ];
 
-class UserPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: Text('UserPage'),
+      appBar: AppBar(
+        title: Text(
+          'Mi nombre',
+          style: TextStyle(color: Colors.black54),
         ),
-
+        elevation: 1,
+        backgroundColor: Colors.white,
+        leading: IconButton(
+          icon: Icon(
+            Icons.exit_to_app,
+            color: Colors.black54,
+          ),
+          onPressed: () {},
+        ),
+        actions: [
+          Container(
+            margin: EdgeInsets.only(right: 10),
+            child: Icon(
+              Icons.check_circle,
+              color: Colors.blue[400],
+            ),
+            //child: Icon(Icons.offline_bolt, color: Colors.red,),
+          )
+        ],
+      ),
+      body: SmartRefresher(
+        controller: _refreshController,
+        enablePullDown: true,
+        onRefresh: _cargarUsuarios,
+        header: WaterDropHeader(
+          complete: Icon(Icons.check, color: Colors.blue[400]),
+          waterDropColor: Colors.blue[400],
+        ),
+        child: _listViewUsuarios(),
+      ),
+    );
+  }
+
+  ListView _listViewUsuarios() {
+    return ListView.separated(
+      physics: BouncingScrollPhysics(),
+      itemBuilder: (_, i) => _usuarioListTile(usuarios[i]),
+      separatorBuilder: (_, i) => Divider(),
+      itemCount: usuarios.length,
     );
   }
-}
+
+  ListTile _usuarioListTile(Usuario usuario) {
+    return ListTile(
+      title: Text(usuario.nombre),
+      subtitle: Text(usuario.email),
+      leading: CircleAvatar(
+        child: Text(usuario.nombre.substring(0, 2)),
+        backgroundColor: Colors.blue[200],
+      ),
+      trailing: Container(
+        width: 10,
+        height: 10,
+        decoration: BoxDecoration(
+            color: usuario.online ? Colors.green[300] : Colors.red,
+            borderRadius: BorderRadius.circular(100)),
+      ),
+    );
+  }
+
+  _cargarUsuarios() async {
+    await Future.delayed(Duration(milliseconds: 1000));
+    _refreshController.refreshCompleted();
+  }
+}

lib/widgets/chat_message.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+
+
+class ChatMessage extends StatelessWidget {
+
+  final String texto;
+  final String uid;
+  final AnimationController animationController;
+
+
+  const ChatMessage({
+    @required this.texto, 
+    @required this.uid, 
+    @required this.animationController});
+
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeTransition(
+      opacity: animationController,
+      child: SizeTransition(
+        sizeFactor: CurvedAnimation(parent: animationController, curve: Curves.easeOut),
+        child: Container(
+          child: this.uid == '123' ? _myMessage() : _notMyMessage(),
+
+        ),
+      ),
+    );
+  }
+
+  Widget _myMessage(){
+
+    return Align(
+      alignment: Alignment.centerRight,
+      child: Container(
+        margin: EdgeInsets.only(bottom: 5, left: 50, right: 5),
+        padding:  EdgeInsets.all(8.0),
+        child: Text(this.texto, style: TextStyle(color: Colors.white),),
+        decoration: BoxDecoration(
+          color: Color(0xff4d9ef6),
+          borderRadius: BorderRadius.circular(20)
+          ),
+        ),
+    );
+
+  }
+
+  Widget _notMyMessage(){
+
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: Container(
+        margin: EdgeInsets.only(bottom: 5, right: 50, left: 5),
+        padding:  EdgeInsets.all(8.0),
+        child: Text(this.texto, style: TextStyle(color: Colors.black87),),
+        decoration: BoxDecoration(
+          color: Color(0xffe4e5e8),
+          borderRadius: BorderRadius.circular(20)
+          ),
+        ),
+    );
+
+  }
+
+}

pubspec.lock

@@ -88,6 +88,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0-nullsafety.1"
+  pull_to_refresh:
+    dependency: "direct main"
+    description:
+      name: pull_to_refresh
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.6.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -150,4 +157,5 @@ packages:
     source: hosted
     version: "2.1.0-nullsafety.3"
 sdks:
-  dart: ">=2.10.0-110 <2.11.0"
+  dart: ">=2.10.0 <2.11.0"
+  flutter: ">=0.1.4 <2.0.0"

pubspec.yaml

@@ -28,6 +28,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.0
+  pull_to_refresh: ^1.6.3
 
 dev_dependencies:
   flutter_test: