Question 174824 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How do I make this chat message line up its properties correctly?

This is a single row for a chat message in a group chat. I need it to look like this:

(circular area for a small icon)      username
(empty space below icon)              message
(empty space below icon)              timestamp (when message is clicked on)

The circular area is going to hold any one of a set of image assets from assets/profileIcons. I tried to simulate the circular area (temporarily) using the code below, but the icon doesn’t show up no matter what color I pick. All I see is a white space there. Also, the username is not neatly lining up with the message field. I’m so confused. I wish there was a way to build this with a GUI because the cascading childs of a widget is really annoying to read.

return Column(
        children: [
          Row(
            children: [
              Expanded(flex: 5,
                  child: Container(
                    margin: EdgeInsets.all(50.0),
                    decoration: BoxDecoration(
                        color: Colors.red,
                        shape: BoxShape.circle
                    ),
                  )
              ),
              Expanded(flex: 8, child: Text(username)),
              Expanded(flex: 15, child: Text('')),
            ],
          ),
          Row(
            children: [
              SizedBox(width: 20,),
              Container(
                constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5),
                padding: EdgeInsets.only(left: 15, top: 15, right: 15, bottom: 15),
                decoration: BoxDecoration(
                  color: Color.fromRGBO(66, 135, 245, 100.0),
                  borderRadius: BorderRadius.circular(30),
                ),
                child: Wrap(
                  children: [
                    Text(text),
                  ],
                ),
              ),
            ],
          ),
        ],
      );
Tags:

2

Answers


  1. 0

    Heading ##listtile ##leading ##chat ## return Scaffold(

      body: Column(
    children: [
      ListTile(
        leading: CircleAvatar(backgroundColor: Colors.red,),
        title: Text("Username1"),
        subtitle: Text("message1"),
      ),
      SizedBox(height: 10),
      ListTile(
        leading: CircleAvatar(backgroundColor: Colors.blue),
        title: Text("Username2"),
        subtitle: Text("message2"),
      ),
    ],
  ),
);
    Login or Signup to reply.
  2. 0

    Try this! I hope this answer is helpful to you.
    .
    As per your requirement, when you tap on a particular message date is shown below the message.
    .
    View Output

    import 'package:flutter/material.dart';

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  int? selectedIndex;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: ListView.builder(
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              final isSelected = index == selectedIndex;
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  FractionallySizedBox(
                    widthFactor: 1.0, // set width of listtile
                    child: ListTile(
                      onTap: () {
                        setState(() {
                          selectedIndex = isSelected ? null : index;
                        });
                      },
                      leading: const CircleAvatar(
                        child: FlutterLogo(),
                      ),
                      title: Text('Username ${index + 1}',
                          style: const TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 16)),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('This is message ${index + 1}'),
                          Visibility(
                            visible:
                                isSelected, // used for show/hide date when message is clicked on
                            child: Text(
                              DateTime.now().toString(),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              );
            }),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search