Feature request: Date and/or Time

s3ppo commented 3 years ago

Hi any chance that you can add a field where i can provide the Date or/and Time.... i tried to insert a Column Widget with a second row, but positioning and styling looks pretty ugly

best regards harald

rafaelsetragni commented 3 years ago

Try this one!

  return ListView.builder(
      reverse: true,
      padding: const EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 10),
      itemCount: history!.messages.length,
      itemBuilder:  (context, index) {

        Message message = history!.messages[index];
        bool sent = widget.me == message.user;
        DateTime date = message.timestamp!.toLocal();
        int msgLength = message.msg.length;
        int limit = 35;

        return Bubble(
          style: sent ? styleMe : styleSomebody,
          child: Container(
            constraints: BoxConstraints(
                maxWidth: mediaQueryData.size.width * 0.7,
            ),
            child: Stack(
              children: [
                Padding(
                  padding: EdgeInsets.only(bottom: msgLength <= limit ? 0 : 18),
                  child: Text(
                      message.msg + (msgLength <= limit ? '             ' : ''),
                      style: DefaultTextStyle.of(context).style
                  ),
                ),
                Positioned(
                  bottom: 0,
                  right: 0,
                  child: Text(
                    dateFormatToday.format(date),
                    textAlign: TextAlign.end,
                    style: DefaultTextStyle.of(context).style.copyWith(fontSize: 12, color: Colors.grey.shade400)
                  ),
                )
              ],
            ),
          ),
        );
      }
  );

s3ppo commented 3 years ago

hi @rafaelsetragni thanks for your example code it is working great, but i am also using images inside. it seems if there is a image .. the stack widget shows text under the image :(

here is my code:

Bubble(
  margin: BubbleEdges.only(top: 5, bottom: 5, left: 30),
  alignment: Alignment.topRight,
  nipWidth: 8,
  nipHeight: 10,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Container(
                                  constraints:
                                      BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
                                  child: Stack(
                                    children: [
                                      if (message.image != null && message.image != '') ...[
                                        showMessageImage(message.image, message.iId.oid)
                                      ],
                                      if (message.message != null && message.message != '') ...[
                                        Padding(
                                          padding:
                                              EdgeInsets.only(bottom: msgLength <= limit ? 0 : 18),
                                          child: Linkify(
                                              style: DefaultTextStyle.of(context).style,
                                              onOpen: _onOpen,
                                              text: message.message +
                                                  (msgLength <= limit ? '           ' : ''),
                                              textAlign: TextAlign.right),
                                        ),
                                      ],
                                      Positioned(
                                          bottom: -0.5,
                                          right: 0,
                                          child: Container(
                                            padding: EdgeInsets.only(right: 3),
                                            child: Text(
                                                DateFormat('HH:mm').format(
                                                    DateTime.fromMillisecondsSinceEpoch(
                                                        message.timestamp.date)),
                                                textAlign: TextAlign.end,
                                                style: DefaultTextStyle.of(context).style.copyWith(
                                                    fontSize: 12, color: Colors.grey.shade400)),
                                          ))
                                    ],
                                  ),

vi-k / bubble

Feature request: Date and/or Time #30